0%

Hexo + github actions 自動化部署

GitHub Actions 介紹

部落格上線以來,一直是以手動佈署的方式發文,每次都要打 hexo cleanhexo d -g 指令,等 hexo 重新生成靜態頁面完再更新 github,久了就嫌麻煩,因此決定改成自動化佈署流程。

目前常見的 CI/CD 服務平台是 travis CI 跟 Jenkins

  • travis CI 較適用開源專案,很多 hexo 自動化部署教學用的是 travis CI
  • Jenkins 較常用於大型專案,功能完整且提供大量的 plugin,使用者眾多

而本文使用的 GitHub Actions 是由 GitHub 官方推出的自動化流程工具,在2018年10月推出,前段時間還得申請測試資格,但最近已開放使用。

我使用理由為 GitHub Actions 是 github 自家整合的產品,無需多申請帳號,且工作中有接觸到 GitHub Actions,因此嘗試以此為自動化部屬工具。

github 專案

專案 說明
https://github.com/op30132/blog 存放 hexo 源碼
https://github.com/op30132/op30132.github.io 存放 hexo 生成的靜態頁面

先將原來的檔案丟到 github 上,如果已經建立 repo,那就沒差

1. 生成 SSH 部署私鑰

首先利用 ssh-keygen 命令生成一組私鑰(github-deploy-key)和公鑰(github-deploy-key.pub),key 名稱可自取

1
ssh-keygen -f github-deploy-key

2. 設置 blog

blog repo → settings → Secrets → add a new secret

  • Name 輸入 HEXO_DEPLOY_PRI
  • Value 輸入私鑰 github-deploy-key 的內容

3. 設置 op30132.github.io

op30132.github.io → settings → Deploy keys → add deploy key

  • Title 輸入 HEXO_DEPLOY_PUB
  • Key輸入公鑰 github-deploy-key.pub 的內容

4. 編寫 blog 的 Action 腳本

到 blog 下的 action,點選 Set up a workflow yourself,自行編寫 Action 腳本

基本上 github 會另外開個虛擬機作為workflow 的執行環境,透過 yaml (yml為副檔名) 這種嚴格的文件配置檔,進行一系列操作設定,使用 ubuntu 系統、安裝nodeJs、設定 HEXO_DEPLOY_PRI、登入 github,最後進行 hexo generate && hexo deploy

以下參考網路教學

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
name: HEXO CI

on:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]

steps:
- uses: actions/checkout@v1

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}

- name: Configuration environment
env:
HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
run: |
mkdir -p ~/.ssh/
echo "$HEXO_DEPLOY_PRI" | tr -d '\r' > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.name "op30132"
git config --global user.email "op30132@gmail.com"
- name: Install dependencies
run: |
npm i -g hexo-cli
npm i
- name: Deploy hexo
run: |
hexo generate && hexo deploy

注意 yml 檔的空格非常嚴謹,少一個或多一個就會報錯

複製貼上完就可以 start commit 了,github會創建一個 .github/workflows/main.yml 檔案在根目錄下

5. 修改_config.yml

如果原來是 http 的,要改為 ssh 格式

  • http

  • ssh

結論

最後只要新增文章,利用 git push 推上 blog 這個 repo 就會自動在 action 中幫你部署到靜態頁面的 op30132.github.io repo 了! 如果部署失敗,還可以點進去看錯誤訊息,藉此來偵錯喔

為什麼推上去後卻在 Deploy hexo 這步失敗了?

是這樣的,我一開始推上去後一直在 Deploy hexo 這步失敗,下拉錯誤訊息發現檔案有 create 成功,然而部落格卻變得一片空白,而 op30132.github.io 上的所有檔案都沒有任何內容

仔細看錯誤訊息 warning No layout,最後發現在上傳源碼到 blog 時,NexT主題檔由於本身是一個專案,有自己的 git 紀錄,因此 push 時沒有跟著傳到 github

解法

參考文章

http://andersjing.com/2018/06/30/hexo-theme/

https://hdj.me/github-actions-hexo-cicd/

https://thagki9.com/2019/09/20/hexo-cicd-on-github-actions/