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

{% post_link hexo-3-upgrade-to-6 上一篇文章 %}中，我把 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：取得部屬狀況。