自動化部署 Hugo 部落格到 GitHub Pages

Hugo GitHub Actions

接續以 Hugo 建立部落格，Hugo 在其文件中提到了多種 Hosting and Deployment 方式。若你選擇將 source code 放在 GitHub 上，那麼你可以直接考慮將部落格放在 GitHub Pages 上，並使用 GitHub Actions 自動化所有部署和更新的流程。

Step 1: Create a Project on GitHub for the Blog

在 GitHub 上建立部落格 repository，並將 source code 都推上去。

不該推的東西請加到 .gitignore 中

  • resources
  • .DS_Store

Step 2: 建立 GitHub Pages

如果你想建立 GitHub Pages，請按照說明在帳號下建立一個名為 your-username.github.io 的 repository。

Step 3: 部署準備

Create GitHub token

在 GitHub Tokens Page 建立 personal access token，權限選擇 repo 和 workflow。建立完成後，請複製 token。

Add Access Token as Secrets

在部落格 repo 的 Settings > Secrets 頁面上，建立一 Repository secrets。

  • Name: 可取你想要的
  • Value: 貼上剛剛複製的 token

Step 4: Create A GitHub Action

  • 在部落格 repo 建立 .github/workflows 資料夾
  • 資料夾下新增 main.yml，貼上以下 action 設置
 1name: CI
 2on: push
 3jobs:
 4  deploy:
 5    runs-on: ubuntu-18.04
 6    steps:
 7      - name: Git checkout
 8        uses: actions/checkout@v2
 9
10      - name: Update theme
11        # (Optional) If you have the theme added as submodule, you can pull it and use the most updated version
12        run: git submodule update --init --recursive
13
14      - name: Setup hugo
15        uses: peaceiris/actions-hugo@v2
16        # or change to a version you prefer
17        with:
18          hugo-version: "0.80.0"
19
20      - name: Build
21        # remove --minify tag if you do not need it
22        # docs: https://gohugo.io/hugo-pipes/minification/
23        run: hugo --minify
24
25      # replace TOKEN and username to your own settings
26      - name: Deploy
27        uses: peaceiris/actions-gh-pages@v3
28        with:
29          personal_token: ${{ secrets.TOKEN }}
30          external_repository: <username>/<username>.github.io
31          publish_dir: ./public
32          # keep_files: true
33          user_name: <username>
34          user_email: <username@email.com>
35          publish_branch: main
36          # cname: example.com

Step 5: Push to GitHub Remote

push 到 remote 後，你將會在 repo 的 Actions 頁面看到 action 的進度。等待 action 成功後，就可以在 https://<username>.github.io/ 看到部落格囉！

Reference