Hexo Blog 01：使用 Hexo 迅速在 GitHub Pages 展開 Blog 旅程

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 1.2k 所需閱讀時間 ≈ 4 分鐘

自從成為碼農後已經用 Markdown 做了很久的筆記，之前聽朋友說 Hexo 能直接把 Markdown 檔案變成 Blog 文章，想想就覺得心動，這樣日常做筆記之餘還能有所產出。感覺做筆記時心態會更認真，不過原本只是重點搬運工，之後還要思考文章的可讀性，以及如何才能幫助到真正需要這些資訊的人等等。

目標

  • 使用 Hexo Blog 框架將 Markdown 文件輸出成精美 Blog
  • 以 GitHub Pages 作為 Blog 網站的架設平台

參考文檔

按照以下官方文檔進行操作：

  • 文件 | Hexo

  • 在 GitHub Pages 上部署 Hexo

不過照官方文檔操作可能會遇到一些障礙，我改良了些許流程，希望能因此幫到大家。

前置需求

  • 安裝 git

    我的版本：

    command line tool
    1
    2
    $ git --version
    git version 2.24.1.windows.2

  • 安裝 Node.js

    我的版本：

    command line tool
    1
    2
    $ node --version
    v18.12.1

  • 註冊 GitHub

所有安裝操作盡量以最新穩定版本為主。

主要流程

安裝 Hexo

command line tool
1
npm install -g hexo-cli

我的版本：

command line tool
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ hexo version
hexo-cli: 4.3.0
os: win32 10.0.19045
node: 18.12.1
v8: 10.2.154.15-node.12
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 108
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.10
openssl: 3.0.7+quic
cldr: 41.0
icu: 71.1
tz: 2022b
unicode: 14.0
ngtcp2: 0.8.1
nghttp3: 0.7.0

建立 Hexo Blog 專案，並安裝 Hexo 必要檔案

command line tool
1
2
3
hexo init <folder>
cd <folder>
npm install

<folder> 換成自己想要的 Blog 專案名稱，我是直接學 官網首頁 的範例取為 blog。

於 GitHub 建立名為 username.github.io 的儲存庫，能見度 (visibility) 必須設為 Public

username 為 GitHub 使用者名稱，請自行替換。

這樣其實就是建立了一個 GitHub Pages 儲存庫，此儲存庫專門用來存放 Hexo 替我們生成的靜態網頁檔案，GitHub Pages 會將這些檔案作為網頁發佈。

基本上此儲存庫建立好後我們就不會直接使用它了，都是藉由部署指令自動更新其內容。

於 GitHub 建立一個用來存放 Hexo Blog 專案的儲存庫，名稱隨意，能見度設為 Private

之後 Blog 文章的更新與設定調整都是推至此儲存庫。

註：官方文檔只建立了一個 username.github.io 儲存庫，但因為之後可能會設定一些機密資訊，所以我強烈建議多開一個私人儲存庫來降低風險，踩坑經歷請見：Hexo 避免機密資訊上傳 GitHub

將 Hexo Blog 專案 push 至儲存庫的預設分支

command line tool
1
2
3
4
5
6
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<username>/<步驟 4 的儲存庫名稱>.git
git push -u origin main

註：由於不知何時起 GitHub 要求以 token 執行 push 操作，這裡可能會遇到一些 GitHub 登入問題，在此提供之前踩坑後覺得有用的資訊：

  • Creating a personal access token

    • GitHub - Personal Access Token & SourceTree

更改 Hexo Blog 專案根目錄中 _config.yml 的部署設定

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
# URL
url: https://<username>.github.io
# Blog 的網址，就是步驟 3 的 GitHub Pages 專案名稱，一定要填對，不然部署網站時會出錯

# Deployment
deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # 就是步驟 3 的 GitHub Pages 儲存庫網址，一定要填對，不然部署 Blog 網站時會出錯
  # example, https://github.com/hexojs/hexojs.github.io
  branch: main
  # Hexo 生成 Blog 靜態網頁檔案後會 push 至 GitHub Pages 專案的 main branch

安裝 hexo-deployer-git

command line tool
1
npm install hexo-deployer-git --save

我的版本：v3.0.0

這是 Hexo 專門用來以 git 部署 Blog 網頁的工具，會依照步驟 6 的設定，將 Blog 網頁內容推到步驟 3 的 GitHub Pages 儲存庫，該儲存庫會自動將網頁部署。

執行快速部署指令

command line tool
1
hexo clean && hexo deploy

註：clean 會清除先前生成的靜態網頁資料；deploy 就是部屬指令。

瀏覽 <GitHub 用戶名>.github.io 檢查你的 Blog 能否運作

註：可能需要等待一下子。

大功告成！
大功告成！

阻礙

雖然成功架設了 Blog，不過坑還是很大，在此列出接下來需要解決的問題：

  • 改變頁面主題：Hexo Themes
  • 留言功能
  • 讓 Blog 更容易被搜尋：Google Search Console
  • 加入廣告 Plugin：Google Adsense
  • 讓 Blog 可追蹤流量：Google Analytics

結語

2022/11/23 成功建置本 Blog

如果你平常也在用 Markdown 做些技術筆記，不妨一起嘗試 Hexo，讓連自己都很少看的筆記成為 Blog 文章來服務網路上遇到同樣問題的人們吧！

願各位付出的精力都能結出甜美的果實。

2022/12/30 更新成保護機密資訊的建置方式。

下一篇系列文章：更換 Hexo 主題，初探 NexT