GitHub Actions 優雅部署 Hexo

各位在上一篇學廢了怎麼套用 Hexo 的 theme 及一些工具幫助撰寫 Blog，文章中也有提到怎麼安裝 deploy 的 plugin，想了解可以點為 Blog 添點顏色。

我心目中理想的方案是使用 Obsidian 來整合整個文章的發佈，達到將整理好的筆記推至 Blog 中且在本地端瀏覽起來也方便，但是深入研究之後 Obsidian 要 Push 需要訂閱如果想 sync 的話也需要訂閱加總起來的話價格也非常的可觀，對一個北漂求生的工程屍來說也是一筆負擔，後續會嘗試使用 Notion 應該可以達成理想中的撰寫方式，成功的話再整理成文章記錄下來當然如果有更好的方式也歡迎留言提供。

本篇會多著墨於自動化部屬可以簡化整個寫作發文的流程也有助於 CI/CD 的學習，希望本章有幫上一點忙。

Continuous Deployment

Continuous Deployment 縮寫為 CD 中文可以翻作續部署，依照需求可以與持續整合（Continuous integration, CI）配合使用，就是大家口中所述的 CI/CD。本篇實作並沒有整合自動化單元測試，因只有一人撰寫也未走完整的 git flow 在我認知中稱不上完整的 CI，所以會多著墨於 CD 的部分。

說了這麼多什麼是 Continuous Deployment? IBM 是這麼解釋的。

Continuous deployment is a strategy in software development where code changes to an application are released automatically into the production environment.

大意就是在軟體開發中自動將更動的程式 Build Release 並提交至 Production 環境中，以本篇的例子就是 Main branch 只要有新 commit GitHub Action 就會自動 Build 一個靜態網頁並推至 gh-pages 這個 Branch。

GitHub Actions

在 GitHub Universe 2018，GitHub 發佈了 GitHub Actions 可以透過它實作 CI/CD、分支管理、issue 分類等。

關於計費官網寫每個月有 2000 分鐘 / 500MB 的使用上限，使用分鐘數每個月會重置但是 500MB 的儲存空間是不會重置的。機器分鐘的計算方式如下方表格，每個系統分鐘數是不一樣的如果有必要的話需要對專案的建置時間來去做優化。

系統 分鐘
Linux 1
Windows 2
macOS 10

本篇是用 ubuntu 的 OS 就是 Linux，所以分鐘數不用倍數計算。

GitHub deploy key

就如同使用 Git GUI 推本地端異動到 Repository 一樣，只是這個情境換到 GitHub 的 Server 而已 Repository 要讀寫第一關一定是認證機制也一樣會需要公私鑰來去認證。

Generator Key

  1. 打開 Terminal 輸入下方的 command，e-mail 的部分可以替換成自己的 mail，接著就一路 Enter 下去。
    1
    ssh-keygen -t ed25519 -C "e-mail" -f deploy
  2. 一般來說 gen 出來的 key 會在.ssh 的資料夾內，如果沒有特別設定路徑會在 User/.ssh，這個資料夾預設是隱藏的可以壓 command + shift + . 就可以看到隱藏的資料夾了，內部有兩個檔案 XXX.pub & XXX，沒有更改檔名預設會是 deploy。
    • XXX.pub：公鑰
    • XXX：私鑰

設定專案公私鑰

公鑰

Setting > Deploy keys > Add deploy key

Title 可以隨個人喜好設定，沒有像 branch 有特別命名方式；Key 就 copy XXX 沒有副檔名的檔案內容。
Add deploy key

私鑰

Setting > Secrets and variables > Actions > New repository secret

Title 可以隨個人喜好設定只要 Yaml 內容有寫對的話機器就不會找不到 Key 了。

Add repository secret

Yaml 設定

新增 GitHub Action 執行所需的 Yaml 方式有兩種：

  1. 在.github 目錄下方新增 workflows 資料夾，並在裡面加入 deploy.yml 的檔案可以針對所需開發自己需要的 job。
  2. 透過 Web 設定，路徑如 Actions > New workflow > Simple workflow 就會創建一個 yml 並放在相對應路徑中方便許多，可以參考下方圖片步驟。

Step 1. New workflow

Step 2. Create simple workflow

Step 3. Add Jobs

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
60
61
62
63
64
65
66
67
68
69
70
71
72
# Github action name
name: Deploy

# 觸發條件
on:
  push:
    branches:
      - main # 監聽的Branch，只要有commit就會觸發

# 變數宣告
env:
  GIT_USER: CHIAN-WEI, CHEN
  GIT_EMAIL: [email protected]
  DEPLOY_REPO: CHIAN-WEI, CHEN/Repository Name
  DEPLOY_BRANCH: gh-pages

jobs:
  build:
    name: Build on node ${{ matrix.node_version }} & ${{ matrix.os }}
    runs-on: ubuntu-latest # 建置任務的容器，有下列選擇：ubuntu-latest, windows-latest, macos-latest
    strategy:
      matrix:
        os: [ ubuntu-latest ]
        node_version: ['20.x']

    steps:
      - name: Checkout source
        uses: actions/checkout@v4

      # 設定Deploy branch
      - name: Checkout deploy repo
        uses: actions/checkout@v4
        with:
          repository: ${{ env.DEPLOY_REPO }}
          ref: ${{ env.DEPLOY_BRANCH }}
          path: .deploy_git

      - name: Setup Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node_version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}} # 須與GitHub上Repository secrets內的secret title一樣
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name ${{ env.GIT_USER }}
          git config --global user.email ${{ env.GIT_EMAIL }}

      # Hexo環境建置
      - name: Install dependencies
        run: npm ci

      - name: Setup Hexo environment
        run: |
          npm install -g hexo-cli

      - name: Hexo clean
        run: |
          hexo clean

      - name: Hexo generate
        run: |
          hexo generate

      - name: Hexo deploy
        run: |
          hexo deploy

總結

以前撰寫文章總是要經歷四步驟 clean、generate、server 沒問題後還要再 deploy 非常繁瑣，工程師都知道科技始終來自於惰性要讓過程簡化的話一定需要自動化，也讓大家撰寫部落格上更加的輕鬆，CI/CD 也是求職上加分的項目所以學會寫 yaml 也蠻重要的。

希望本篇文章對你有所幫助，如果有問題或需更正歡迎留言！

参考

Blog
#Blog #Hexo #GitHub Actions #CI/CD #Deploy #Continuous Deployment
GitHub Actions 優雅部署 Hexo
http://awilab.com/20240320564916095/
作者
CHIAN-WEI, CHEN
發布於
2024年3月20日
許可協議