Hexo + GitHub Actions 部屬網站遷移全紀錄

上一篇文章中，我把 Hexo 升級到最新版 6.1.0，並且只留下少數必要檔案，其他像是 Hexo Themes 也丟給 `package.json`。

Mac 放上 GitHub Repo 後，從 Windows 的 WSL 透過 git clone 拉回來嘗試 Generate 也成功。

但每次都要下 hexo deploy（因為我是用 Git Deploy），而且不同環境可能 .deploy_git 不同步而導致 Deploy 錯誤。

其實想想，最後的 Deploy 可以直接丟給 GitHub Actions 完成就好，本機只要測試 hexo generate 有沒有把最新文章產生成功就好。

梗圖 Meme

架構圖 Architecture

Hexo 上的 GitHub Actions 是 Source 跟 GitHub Pages 是同一個 Repo 但不同分支上（Source 在 main/master 分支，GitHub Pages 在 gh-pages 分支）。

本次示範的 Source 跟部屬的 GitHub Pages 將會是不同 Repo 底下。

Hexo Source：blog-source
GitHub Pages：blog

設定 GitHub Actions Setting GitHub Actions

1. 準備 Deploy key

要準備 Deploy key 就要用 ssh-keygen 生成公鑰私鑰

ssh-keygen -t ed25519 -C "<YOUR_EMAIL>" -f deploy

<YOUR_EMAIL> 可以替換成你的 GitHub Email 或者照下面填寫 GitHub Action Bot 的 Email。

ssh-keygen -t ed25519 -C "41898282+github-actions[bot]@users.noreply.github.com" -f deploy

Enter passphrase 就直接按下 Enter 鍵跳過。

之後就會生成 deploy.pub 跟 deploy 兩個檔案。

deploy.pub 是公鑰
deploy 是私鑰

2. GitHub Pages 專案中放上公鑰

點到要部屬的 GitHub Pages 的 Repo（本範例為 blog）
Setting $\rightarrow$ Deploy keys $\rightarrow$ Add deploy key

Title：打上你想取的名字。

Key：將 deploy.pub 公鑰內容貼到這裡。

Allow write access 打勾，這樣才能給 GitHub Actions 部屬。

完成就按下 Add key。

這樣就新增放上公鑰了。

3. Hexo Source 專案中放上私鑰

點到放 Hexo Source 的 Repo（本範例為 blog-source）
Setting $\rightarrow$ Secrets $\rightarrow$ Actions $\rightarrow$ New repository secret

Name：DEPLOY_KEY

Value：將 deploy 私鑰內容貼到這裡。

完成就按下 Add secret。

這樣就新增放上私鑰了。

4. 設定 GitHub Actions

點到放 Hexo Source 的 Repo（本範例為 blog-source）
按下 Actions 裡面 set up a workflow yourself

貼上下面的內容

name: Deploy

on: [push]

env:
  TZ: 'Asia/Taipei'

jobs:
  build:
    runs-on: ubuntu-latest
    name: Deploy Hexo Blog
    steps:
    - name: Checkout
      uses: actions/checkout@v1
      with:
        submodules: true # Checkout private submodules(themes or something else).
    - name: Timezone set Asia/Taipei
      run: sudo timedatectl set-timezone 'Asia/Taipei'
    - name: Yarn Install
      uses: borales/[email protected]
      with:
        cmd: install
    - name: Hexo Deploy
      id: deploy
      uses: sma11black/[email protected]
      with:
        deploy_key: ${{ secrets.DEPLOY_KEY }}
        user_name: <YOUR_GITHUB_USERNAME>  # (or delete this input setting to use bot account)
        user_email: <YOUR_GITHUB_EMAIL>    # (or delete this input setting to use bot account)
    - name: Get the output
      run: |
        echo "${{ steps.deploy.outputs.notify }}"

大概解釋一下這個 .yaml 在做什麼

Line 3：Push 的時候觸發下面這些 Jobs
Line 5-6：設定環境變數 Timezone 為 Asia/Taipei（為什麼要寫後面我會解釋）
Line 13-16：把此專案 Checkout 下來。
Line 17-18：設定 Timezone 為 Asia/Taipei。
Line 19-22：套件管理我習慣用 yarn，執行 yarn install，這裡你也可以替換成 npm 相關的 Steps。
Line 23-29：這裡我使用 sma11black/[email protected] 幫我完成自動化部屬 Hexo。
如果前面產生的 Deploy key 是用自己的 Email，那麼這裡的 user_name 和 user_email 分別填寫上你的 GitHub Username 跟 Email。
如果是用 GitHub Actions Bot 來產生的 Deploy key，可以直接把 Line 27 & 28 刪除。
Line 30-32：取得部屬狀況。

小陷阱 Little trap

當初沒有改 Timezone 的時候，跑了 Actions 沒有問題，但是……

因為 GitHub Actions 的 Runner server 都在國外，通常國外預設的時間都是 UTC 或者美洲時間，如果想要以台灣時間為準，就必須要對 Runner 設定 Timezone 為 Asia/Taipei。

其實我有發現 GitHub Actions 如果你步驟有使用 uses，它就會跑在 Docker container 裡面，Container 時間通常也是 UTC，所以這也是為什麼要在 Line 5-6 設定 TZ。

改完後就全部校正回歸了，可喜可賀！

至於什麼 SEO 優化，就暫時不想管了，感覺好麻煩 T_T。