Hugo + GitHub Actions实现GitHub Pages的自动部署

手动步骤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# 利用hugo命令创建对应的博客markdown文件
hugo new post/hugo/index.md
# 利用下述命令开启hugo博客的动态监听展示，并进行编写
hugo server -w -D 
# 执行下述命令提交到source code master分支
git add -A
git commit -a -m "xxxx"
git push origin master
# 准备public
hugo
# 提交修改到public repo master分支
...

上面的手动步骤是发布的必要指令，但是感觉每次都敲，实在没多大必要。正巧上个项目用上了Github Actions，所以想着用工具去实现自动化部署。

Github Actions 配置步骤

创建workflows文件

在博客源码地址创建文件: .github/workflows/blog-depoly.yml

必须修改EXTERNAL_REPOSITORY字段，变成自己的repo name；具体字段，可按需修改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.110.0'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
          EXTERNAL_REPOSITORY: ellaann/ellaann.github.io
          PUBLISH_BRANCH: main
          PUBLISH_DIR: ./public
          commit_message: ${{ github.event.head_commit.message }}

创建和配置PERSONAL_TOKEN

在个人GitHub页面，依次点击Settings->Developer settings->Personal access tokens进入页面。（参考路径地址：https://github.com/settings/tokens ）
点击Generate new token，在Note中输入名称，在Select scopes选择workflow。
将生成的token复制出来为后续创建secret做准备，注意必须及时复制，一旦离开此页面后续就无法查看其值，只能重新创建新token。
进入对应的GitHub项目下，依次点击Settings->Secrets->Actions进入添加Action secrets的界面，点击New repository secret按钮。（参考路径地址：https://github.com/ellaann/ed-blog/settings/secrets/actions）
在出现的界面中name部分输入我们设置的值（PERSONAL_TOKEN），Secret部分输入刚保存的token值，然后点击Add secret按钮

实现效果

当执行git push origin master后，GitHub Actions会开启自动构建部署，至此整个设置过程完毕。 workflows 效果 comments 效果就是这样！希望你们也能成功~