天天看點

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

作者:zhangshengdong

從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 。

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