使用Hugo建立靜态部落格，并托管在Github Pages上

從netfily遷移到github pages

netfily被封

其實，早在3年前，我剛建立新部落格的時候，就是托管在netfily上的，本部落格的第一篇内容 《使用Hugo和Netlify建立靜态部落格，并托管在Github上》 https://www.zhangshengdong.com/post/hugo_and_netlify/ ，就是在寫這件事。

但很快，netfily的登陸由于用到了google的腳本，被大陸封了。隻是對于像我這樣的老使用者，隻是不能登入而已，新文章依然可以自動從github倉庫裡同步釋出，是以也就沒在意。

可是兩天前，我新寫了一篇部落格，本地hugo編譯沒問題，可是netfily卻一直編譯不成功。但即使翻牆，也無法登入檢視原因。隻好開始考慮尋找新的托管網站。

使用github pages

在知乎上對比了一圈托管網站，發現國内的大多要錢，或者設定複雜。最友善使用的，好像也就是github pages了。但這樣一來，就沒有了免費cdn，網頁加載速度慢了許多。

github流水線

自動化流程

github pages最好是設定一個名為username.github.io的倉庫。但很不巧的是，我的部落格源碼之前就是儲存在我的blog倉庫中。而github pages生成的二級域名，對于網站好像不太友好。是以隻能設計一個自動化流程：

1. 在源碼blog倉庫中，設定github action，自動編譯靜态網頁；
2. 将編譯出的public檔案夾上傳至新的BZ-coding組織的BZ-coding.github.io倉庫；
3. 将BZ-coding.github.io倉庫選擇master分支自動釋出github pages網頁。

hugo github action

在blog倉新增自動編譯hugo的github action：

# Sample workflow for building and deploying a Hugo site to GitHub Pages

name: Deploy Hugo site to Pages

on:

# Runs on pushes targeting the default branch

push:

branches: ["master"]

# Allows you to run this workflow manually from the Actions tab

workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages

permissions:

contents: read

pages: write

id-token: write

# Allow one concurrent deployment

concurrency:

group: "pages"

cancel-in-progress: true

# Default to bash

defaults:

run:

shell: bash

jobs:

# Build job

build:

runs-on: ubuntu-latest

env:

HUGO_VERSION: 0.102.3

steps:

- name: Install Hugo CLI

run: | wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.deb \ && sudo dpkg -i ${{ runner.temp }}/hugo.deb

- name: Checkout

uses: actions/checkout@v3

with:

submodules: recursive

- name: Build with Hugo

run: |

echo "pwd is "

pwd

ls

hugo --minify --verbose

- name: Display

run: |

echo "github.workspace is ${{ github.workspace }}"

ls ${{ github.workspace }}

echo "github.workspace public is ${{ github.workspace }}/public"

ls ./public

- name: Deploy

uses: peaceiris/actions-gh-pages@v3

with:

deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 這裡的 ACTIONS_DEPLOY_KEY 則是上面設定 Private Key的變量名

external_repository: BZ-coding/BZ-coding.github.io # Pages 遠端倉庫

publish_dir: "./public"

keep_files: false # remove existing files

publish_branch: master # deploying

branch commit_message: ${{ github.event.head_commit.message }}

自動上傳至網頁釋出倉

在上面腳本的最後，加入了把編譯結果檔案上傳至另一個倉庫的代碼：

- name: Deploy

uses: peaceiris/actions-gh-pages@v3

with:

deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 這裡的 ACTIONS_DEPLOY_KEY 則是上面設定 Private Key的變量名

external_repository: BZ-coding/BZ-coding.github.io # Pages 遠端倉庫

publish_dir: "./public"

keep_files: false # remove existing files

publish_branch: master # deploying

branch commit_message: ${{ github.event.head_commit.message }}

其中，需要把目标賬号裡的ssh公鑰，對應的私鑰，配置在blog倉庫的secrets裡。

并且，這邊的上傳，現在好像不能分成兩個job，否則好像會public裡為空。

配置自動釋出網站和自定義域名

把網頁釋出倉BZ-coding/BZ-coding.github.io，裡的github pages配置成master的根目錄。

然後在BZ-coding賬号裡驗證zhangshengdong.com域名之後，就可以在github pages配置的自定義域名裡配上www.zhangshengdong.com了。還可以強制打開https。

解決自定義域名自動消失的問題

但是随後發現，每次網頁代碼更新後，BZ-coding.github.io的自定義域名就會消失。

經搜尋，得知，要在生成的網站根目錄裡添加CNAME檔案，檔案内容就寫你想自定義的域名就行，比如www.zhangshengdong.com 。