2025-03-31

用github repo儲存hexo專案，並Auto deploy到github page的repo上

身為工程師，擁有一台筆電也是很合情合理並且合乎邏輯的事情
那麼就會希望隨時隨地，只要有筆電，就可以輕鬆寫文章並且上傳，這次就來先試試看把整包hexo專案丟上github，並且在有更新時auto deploy吧！

---

動機與資料來源

由於自己除了桌電還有筆電，而hexo專案是在桌電上嘗試的。
但我會想在筆電上寫文章，這樣如果寫完之後還要開桌電deploy太麻煩了，因此就打算這樣做。

資料來源一開始是從這篇開始研究的

• Hexo + github actions 自動化部署

以下依照我自己的理解，重新順一次邏輯，並且講一些自己踩到過的雷

如何Deploy

就像我們在local一鍵部屬的方式一樣，仿照類似的作法在github上執行

hexo clean
hexo generate
hexo deploy

然而，在那之前我們也多做了一些事情

• 安裝Node.js
• 安裝hexo-cli

因此，我們需要做的事情是，只要有update，我們就在Github Action上透過Node.js執行

1. npm install -g hexo-cli
2. hexo clean
3. hexo generate
4. hexo deploy

透過ssh去deploy

由於我們需要透過ssh去deploy，因此我們需要建立ssh deploy key，這個可以透過以下command來建立

ssh-keygen -f [key_name]

執行完會產生public key跟private key。
然後我們把key分別設定到：

• private key：放置hexo專案的repo > settings > secrets
• public key：放置頁面的repo > settings > deploy keys；記得這邊要把Allow write access勾起來

設定完之後，就能透過ssh deploy啦！
但別忘了，我們要透過ssh deploy的關係，因此hexo的_config.yml裡面deploy的repo要改成

git@github.com:[user/repo]

Deploy的workflow

如同先前提到的，我們需要透過github action去deploy，而在github action裡面是透過.yml檔案去設定整個workflow的
除了直接在github的UI上做操作以外，也能直接在

hexo專案 > workflows

資料夾底下自己建立一個.yml檔案，這樣push上去之後就能夠在github action上看到這個workflow了喔！

而我這邊寫的格式如下

name: HEXO CI

on: # Trigger point
  push: # 有push的時候執行，下面設定特定分支
    branches:
      - main
  workflow_dispatch: #增加手動執行workflow的功能

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js LTS
        uses: actions/setup-node@v3
        with:
          node-version: 'lts/*'

      - name: Configuration SSH # 設定SSH跟config
        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 [username] # 記得改成自己的username
          git config --global user.email [useremail] # 記得改成自己的email

      - name: Install dependencies # 安裝hexo-cli
        run: |
          npm i -g hexo-cli
          npm i

      - name: Deploy hexo # Deploy hexo
        run: |
          hexo clean
          hexo generate
          hexo deploy

如果hexo專案本身沒問題，之前也有透過一鍵部屬deploy的話，把workflow設定好，專案丟上repo之後，基本上就完成嘍！
如此一來，無論你用哪台電腦，只要更新專案的repo，就能夠直接更新網頁了！

自己踩到的雷

TypeError: Object.fromEntries is not a function

這個是因為參考資料中，指定node的版本號是10.x的關係，而這個function在Node.js 12+才有。
這邊把他改成LTS就沒這問題了

ERROR: The key you are authenticating with has been marked as read only.

顧名思義，就是key要有寫入的權限，因此在設定deploy keys的時候記得要把Allow write access打勾

網頁一片空白

這通常跟主題(themes)有關，如果用預設主題不會有這問題，然而如果是使用別的主題的話，有可能會發生

• Push上去的時候，因為主題本身是一個專案，因此push的時候不會跟著上去，導致hexo專案上面找不到該主題
• 透過submodules解決這個問題，但由於有些頁面配置需要改到themes/[主題名稱]/_config.yml，因此也沒辦法跟著上去

這邊我後來是直接clone主題下來，放在正確的位置(themes/[主題名稱])，然後把他的.git資料夾刪掉
這樣同時解決這兩個問題，缺點只有在如果該主題的專案有更新沒辦法馬上吃到而已

結語

這次實作了之後覺得github action實在是挺方便的，如果你也有類似需求的話，也能參考看看喔！

科技

hexo教學