利用 hexo + github 架設靜態網站

這篇是我第一次用 Hexo 和 GitHub Pages 架設靜態網站的紀錄，整理 Node.js 安裝、Hexo 初始化、Redefine 主題設定、圖片路徑與部署流程。

引言

Hexo 是一個架設靜態網站的好東西，而我選擇它是因為看到別人的網頁好好看，所以也跟著做。原本應該很早以前就要開始了，但那時期中考很忙，所以我現在才開始。

GitHub Pages 是免費的靜態網站託管服務，可以給別人看你的網站，但只能放靜態的。

安裝 Node.js 與 Hexo

第一步需要下載 Node.js 跟 Hexo。

到 Node.js 官網下載 LTS 版本的 Node.js。
安裝完成後，可以用終端機確認版本：

node -v
npm -v

安裝 Hexo CLI：

npm install hexo-cli -g

確認 Hexo 是否安裝成功：

hexo version
hexo -v

初始化 Hexo 資料夾

hexo init <folder name>
cd <folder name>
npm install
npm install hexo-deployer-git --save
code .

指令說明：

指令	說明
`hexo init <folder name>`	初始化 Hexo 專案
`cd <folder name>`	進入專案資料夾
`npm install`	安裝 Hexo 需要的 package
`npm install hexo-deployer-git --save`	安裝 GitHub Pages 部署工具
`code .`	用 VS Code 開啟專案

設定背景主題

Hexo 本來就有預設主題，但我不太喜歡，所以改用 redefine。

到 Redefine 主題文件頁面。
點選快速開始。
安裝主題：

npm install hexo-theme-redefine@latest

到 _config.yml 將主題設定改成：

theme: redefine

將原本的 _config.landscape.yml 改成 _config.redefine.yml。
依照官方文件補上 _config.redefine.yml 的內容。

GitHub Pages 設定

登入 GitHub。
建立新的 repository。
Repository name 填入：

用戶名.github.io

例如網址是 https://happymike0103.github.io，repository 就會是：

happymike0103.github.io

設定 `_config.yml`

圖片資產設定：

post_asset_folder: true
 
marked:
  prependRoot: true
  postAsset: true

部署設定：

deploy:
  type: "git"
  repo: "https://github.com/用戶名/用戶名.github.io.git"
  branch: "main"

常用指令

指令	簡寫	說明
`hexo clean`	`hexo cl`	清除舊的生成資料
`hexo generate`	`hexo g`	產生靜態檔案到 `public/`
`hexo server`	`hexo s`	本地預覽網站
`hexo deploy`	`hexo d`	部署網站到 GitHub Pages
`hexo new post <postname>`	無	新增文章

本地預覽網址預設是：

http://localhost:4000/

花式教學

Redefine 主題支援許多特殊區塊，例如 note、tabs、folding 與 Mermaid。

Note 範例

{% note blue fa-image %}
content
support nextLine
{% endnote %}

Folding 範例

{% folding Test %}
Content
asdfasdf
{% endfolding %}

Tabs 範例

{% tabs First Tab %}
<!-- tab First Tab -->
This is Tab 1.
<!-- endtab -->
 
<!-- tab Second Tab -->
This is Tab 2.
<!-- endtab -->
 
<!-- tab Third Tab -->
This is Tab 3.
<!-- endtab -->
{% endtabs %}

Mermaid 範例

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Q & A

為什麼圖片顯示不出來？

還記得剛剛把 post_asset_folder: false 改成 true 嗎？這步就是重點。

當我們執行：

hexo new post <postname>

Hexo 會產生：

<postname>.md
<postname>/

要在文章裡插入圖片時，可以把圖片放到 <postname>/ 資料夾裡，然後在 Markdown 裡寫：

![](/post-assets/hexo-pages/pic_name.jpg)

為什麼我明明已經 `hexo deploy`，但 GitHub Pages 沒反應？

GitHub Pages 更新需要一段時間，我使用時大約需要 2 到 3 分鐘。撰寫過程中可以先用 hexo server 在本地預覽，確認沒問題再部署。

結論

由於這是第一篇文章，所以排版可能不會那麼好看，我也會再調整版面。這個網站主要是紀錄我的成長與學習歷程，請各位加減看。

希望之後可以多產出一些文章。新年快樂！

參考資料

Redefine 主題官方文件
Hexo 官方文件
Hexo 教學：從頭打造個人部落格
架設部落格第一次就上手 Hexo + GitHub + 自訂網域
Hexo 插入圖片並解決圖片路徑問題

引言