iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 6

【Day 6】Hexo 的基本設定與發布規則

上一篇有提到,關於 Hexo 與 Github 的相關介紹與安裝步驟,可以先看看這幾篇文章:

  1. Hexo+GitHub,新手也可以快速建立部落格
  2. 第一次架設Hexo網站 - MD工坊

筆者使用的是 MacBook,這系列的安裝教學會以 MAC 操作為主,
那我們就話不多說,開始安裝吧!


第一步,認識終端機

首先要知道終端機是什麼(筆者是第一次用 MAC 裝東西,平常工作都是用PC)
看了教學才知道,原來 MAC 要安裝軟體基本上都要開終端機!震驚全球十億人!(只有你
終端機就是這個東西,類似 Windows 的命令提示字元。

cmd

一開始看到它的時候很害怕,因為本身是設計師,平常不會有機會開到它。
除非是電腦突然怎麼了不動了,只好低著頭去求工程師大大...(跪

安裝步驟

安裝 Hexo 的所有步驟都必須使用終端機或 cmd。
請按照 文章 的步驟,安裝好以下軟體,並且用終端機或 cmd 設定完成:

  1. Node.js
  2. Git
  3. XcodeVS Code(個人使用這個)
  4. 申請一個 GitHub 帳號
  5. 將 Hexo 配置到 GitHub

擴充套件

因為筆者平時習慣用 VS code,所以這篇僅介紹如何使用 VS code 的 Hexo 擴充套件來製作部落格。
上述軟體都安裝成功,並且也將 Hexo 配置到 GitHub 後,
接著開啟 VS code 的擴充應用程式,下載 vscode-hexo 擴充套件。

vscode-hexo

這個擴充套件有教學,會教你一些 Hexo 的指令和快捷鍵。

hexo-info


指令

首先,從 檔案 開啟你的 Hexo blog 資料夾。
可以把資料夾設一個替身到桌面,比較快找到。(對,我就是那個找不到的人…

請記得,要對 Hexo 下任何指令前都需要按下 Ctrl+Shift+P 或是 Command+Shift+P
再接下去打相關指令。

指令整理如下:

初始化網站

hexo init

如果你編輯到一半發現你的部落格壞掉了!可以將整個網站初始化還原。
不過別忘了先把你打好的文章備份起來喔!

路徑位置:source > _posts > .md檔案

新增文章

hexo new

輸入指令後按下 Enter,就可以命名你的文章 title(也就是你的檔名,本篇以 New-post 為例 )
你的文章檔名就會叫做 New-post.md

請以 英文命名 為主,中文在網頁顯示時有可能會出現亂碼。
新增成功後,就會跳到熱騰騰的文章編輯頁面:

---
title: 標題
date: 2020-02-14 01:15:26
tags:
---
第一篇文章

發布文章

hexo deploy , 按 Enter 後輸入 -g

文章打好後,記得按下儲存。
接著就可以準備發佈到部落格上囉!

deploy 是部署,generate 是生成(靜態檔案)
發佈完成,等一段時間(通常是五分鐘),再將部落格重新整理,就可以看到新文章囉!

在本機預覽

hexo server

如果想先在本機(本地端)看看文章的效果,可以輸入此指令。
Hexo 會生成一個 localhost:4000 的網址(本機伺服器)給你預覽線上的樣子。

在確認發佈前,記得輸入 Ctrl+C 或是以下指令來關閉伺服器喔!

hexo stop

清除快取

hexo clean

如果有刪除文章,或是做了很多事情(?
可以輸入指令來清除快取檔案和已產生的靜態檔案,簡單來說就是清理一下看不見的垃圾。
但是這個功能在不久的將來,讓筆者釀成了一次悲劇!請務必小心使用!之後會分享悲劇的起源。


Hexo 也使用 Markdown 語法

很久以前就有接觸過 Markdown(無名小站時期)
當時覺得很好玩,打一些簡單的符號,文字的樣式就變了!剛好鐵人賽的編輯器也是使用 Markdown。
以下推薦幾篇 Markdown 教學,不熟悉語法的朋友可以研究看看。

  1. Markdown 語法教學
  2. 3分鐘學會Markdown常用語法

Markdown 編輯器 HackMD

以下兩篇文章筆者尚未研究,先收藏起來。

  1. MarkDown 語法大全 - HackMD
  2. HackMD 快速入門教學

上一篇
【Day 5】使用 Hexo+GitHub 架設一個專屬部落格吧!
下一篇
【Day 7】如何更換 Hexo 主題
系列文
從平面轉型成網頁設計的 UI/UX 設計師30

尚未有邦友留言

立即登入留言