【部落格營建筆記】手把手帶你用github action自動部署部落格和踩坑記錄

本文一步步帶你使用github action自動化部署hexo部落格，讓你在將commit推上專案repo時，自動執行hexo g、hexo d部署上網站repo。除了教學，也會列出所有作者遇到的問題與解決方法！

SSH公私鑰生成與設定

使用ssh-keygen生成一組公私鑰，公鑰給存放靜態網頁的公開repo(即username.github.io)，私鑰給存放hexo專案的私人repo

ssh-keygen -f github-deploy-key

私人Hexo專案repo

Setting → Secrets → New repository secret

Name欄位輸入 HEXO_DEPLOY_PRI
Value欄位輸入私鑰 github-deploy-key 的內容(begin和end的兩行也需要喔)

公開靜態網頁repo

settings → Deploy keys → add deploy key

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

記得勾選Allow write access，否則會發生ERROR: The key you are authenticating with has been marked as read only.的問題。

在私人Hexo專案製作一個action腳本

選擇Actions分頁後點擊set up a workflow yourself製作自己的workflow。

name: HEXO CI
#workflow名稱
on:
  push:
    branches:
    - master
#在執行push到master分支時觸發
#請特別注意你的repo所使用的主要分支，是main就需要修改為main
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.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 "你的github使用者名稱"
          git config --global user.email "你的github電子信箱"
# 這裡記得修改成你自己的資料
      - name: Install dependencies
        run: |
          npm i -g hexo-cli
          npm i
      - name: Deploy hexo
        run: |
          hexo generate && hexo deploy

請注意第6行的觸發分支(branch)如果你的repo使用main作為主要分支，master就要修改為main。
第14行原參考資料使用版本為10.x，目前會造成TypeError: Object.fromEntries is not a function的問題，升級到12.x可以解決。

接著就可以按下右上角的start commit按鈕，commit這項變更，並且跑一次workflow。
通常是會出現錯誤，以下逐一排解我自己所遇到的錯誤。

常見錯誤與解答

`TypeError: Object.fromEntries is not a function`

node版本過低，在YAML設定檔變更node-version為[12.x]可以解決。

`unknown block tag`…等本地可使用主題功能，遠端卻無法使用的相關錯誤

遇到錯誤的當下使用的主題是butterfly

當你的theme資料夾使用git clone來安裝主題時，clone下來的主題也是一個git專案，預設中對於這種巢狀(?)專案，git會予以忽略，不推上遠端repo，這就造成的遠端生成靜態網頁時沒有主題功能可用的錯誤，以下使用subtree來集中管理hexo專案和主題專案，這樣做就可以將兩者一起推上遠端，也可以保持主題專案的更新

刪除現有的主題

rm -rf themes/butterfly
git add -A
git commit -m "delete butterfly"
git push origin main

繫結子專案

git remote add -f butterfly https://github.com/jerryc127/hexo-theme-butterfly.git
git subtree add --prefix=themes/butterfly butterfly master --squash

更新子專案

git fetch butterfly master
git subtree pull --prefix=themes/butterfly butterfly master --squash

把專案push到遠端倉庫

git push origin main

`fatal: could not read Username for 'https://github.com': No such device or address`

只需要修改你的部署設定為SSH格式，在_config.yml中進行變更。

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/RainMeoCat/rainmeocat.github.io.git
  branch: main

改成SSH格式

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:RainMeoCat/rainmeocat.github.io.git
  branch: main

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

需要勾選Allow write access，點擊右側delete刪除舊有的公鑰，重新新增公鑰。

github page使用自定義域名時每次部署都會被重設回github.io的問題

github page自定義域名的設定檔由公開靜態網頁repo裡的CNAME檔案進行設定，預設中hexo g是不會產生CNAME檔案的，而每一次部署都是直接使用生成出來的public資料夾直接覆蓋repo，這將導致CNAME遭到清除，以下方式解決，能夠保留CNAME。

在source資料夾底下手動新增CNAME檔案

www.rainmeocat.com

不要包含https://

這樣每次hexo g就可以包含這個檔案一起生成在public資料夾裡！

解決這些問題後，每一次有commit推上hexo專案repo時，就能夠自動部署網站了！
如果還有問題歡迎留言～

參考資料

Hexo + github actions 自動化部署
 Hexo主題同步
 升級一下 Hexo
git配置時遇到的問題