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

SRE 之恥 —— 圖源:網路

架構圖 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。

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

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

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

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

貼上下面的內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
name: Deploy

on: [push]

env:
TZ: 'Asia/Taipei'

jobs:
build:
runs-on: ubuntu-latest
name: Deploy Hexo Blog
steps:
- name: Checkout
uses: actions/[email protected]
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_nameuser_email 分別填寫上你的 GitHub Username 跟 Email。
如果是用 GitHub Actions Bot 來產生的 Deploy key,可以直接把 Line 27 & 28 刪除。
Line 30-32:取得部屬狀況。

小陷阱 Little trap

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

怎麼都被 rename......

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

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

改完後就全部校正回歸了,可喜可賀!

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


Hexo + GitHub Actions 部屬網站遷移全紀錄
https://blog.yangjerry.tw/2022/04/19/hexo-github-actions-deploy/
作者
Jerry Yang
發布於
2022年4月19日
許可協議