0%

使用 Github Actions 自動化部署 Hexo 到 Github Pages 個人部落格

發表於 分類於 閱讀次數：
本篇文章是想要透過 Github Actions 功能自動化部署 Blog 到 Github Pages，以減少每次更新文章所需的手動執行指令的時間。

前情提要

每次更新 Blog 文章，皆需手動執行指令部屬有點小麻煩 (指令可以參考 使用GitHub + Hexo 建立個人blogger 中第9點 發表文章)。
原本從 Local 端執行部屬指令時，上傳到 Github Pages 的檔案只有編譯過後的靜態網頁檔案，之前有提過如果Blog 原始草稿檔不見的話會很難復原，所以趁著這個機會將 Blog 原始草稿檔案交由 GitHub 管理，也透過 Github Actions 功能自動化部署簡化更新 Blog 文章的流程。

作法

Step1. 在 GitHub 上，新增一個 private 的 repository 存放 Blog 原始草稿

Step2. 產出 SSH 部署私鑰

若先前有設定過 GitHub 配置的 Global SSH key 可以跳過這個步驟。
沒有設定過的話，可以參考我之前寫的這篇文章產出公私鑰與設定 Global SSH key 解決Github push 身份驗證失敗。

Step3. 調整 Step1.Blog 原始草稿 repository 部署私鑰

路徑:Settings > Secrets and variables > Actions > New repository secret

Name : 輸入 HEXO_SSH_PRIVATE_KEY
Value : 輸入SSH 部署私鑰產出的內容

請注意 HEXO_SSH_PRIVATE_KEY 這個名稱後續會在yml配置中用到，兩邊必須一致，否則執行部屬時，會讀取不到鑰匙。

Step4. 在原始草稿 repository，新增 GitHub Action 設定與寫 workflow 腳本

路徑: Actions > New workflow > set up a workflow yourself.

基本上 github 會另外開個虛擬機作為workflow 的執行環境，會依照yml中的指令執行。

以下是我的yml設定：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 配置檔名稱
name: Hexo Deploy
# 進行什麼行為時觸發，也可多行為觸發，例如[push, fork] ，多個觸發行為可以用 [push]表示，這邊指定只有 master branch 被異動時才會觸發部署
on:
  push:
    branches:
      - master

jobs:
  pages:
    # 環境提供作業系統，目前提供Windows, macOS, Ubuntu，詳細查閱（https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#choosing-github-hosted-runners）
    runs-on: ubuntu-latest
    steps:
      # 拉取當前Repository的分支main的Code到他們的容器（如配置檔中使用的Runs-on的Ubuntu）上
      - name: Checkout
        uses: actions/checkout@v2
        with:
          ref: master

      # 安裝Nodejs環境
      - name: Use Node.js 12
        uses: actions/setup-node@v2
        with:
          node-version: '12'

      # 緩存
      - name: Cache NPM Dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
     
      # 增加SSH KEY的配置
      - name: Add SSH Private Key
        env:
          SSH_PRIVATE: ${{ secrets.HEXO_SSH_PRIVATE_KEY }}
        run: |
          mkdir -p ~/.ssh/
          echo "$SSH_PRIVATE" > ~/.ssh/id_rsa
          
          chmod 700 -R ~/.ssh        
          ssh-keyscan github.com >> ~/.ssh/known_hosts
  
          git config --global user.email "xxxxx@gmail.com"
          git config --global user.name "xxxxx"
          
      # 安裝Hexo需要的環境（針對Hexo根目錄的package.json）
      - name: Install Dependencies
        run: |
          npm install hexo-cli -g
          npm install
          npm install hexo-generator-sitemap --save
      # 一鍵化部署
      - name: Hexo Deploy
        run: |
          hexo clean
          hexo d -g

Step5. 發表文章

依照上方yml檔案設定只要將草稿 commit 到指定的branch (master)，就可以輕輕鬆鬆的發佈新文章了！
每 commit 一次就會有對應的部屬紀錄

Step6. Deploy 失敗除錯方法

當你發表文章後，遲遲沒有看到網頁的更新，
可以查看每次的部屬紀錄，如果有報錯，這邊會展示錯誤訊息。