使用 Github Actions 自动部署 Hugo

回应痛点

  1. 写作所用的设备不带环境没有Git必须换回原来用的设备hugo生成网页并部署
  2. 只想好好写东西不想再管我的终端/命令行

本文假设你已经在本地拥有一个用Hugo搭建的完整站点且已经push到了username/username.github.io这个仓库

1. 把源仓库传到一个新库 #

整体上传到一个新库后我们可以使用Git方便地进行管理相当于把原本在本地的博客系统传到网盘在设置好Github Actions既可以整个库clone下来也可以通过上传单个.md文件到content/posts文件夹的手动push方式来自动部署而这都不需要重新搭建Hugo环境

在这里我们使用Github Desktop

2. 将新库和Github Pages仓库串起来 #

username/username.github.io下是public文件夹内生成的静态网页你一定记得的在本地我们需要cd public而我们希望通过添加或修改源仓库的.md来实现这一系列的生成和部署这涉及到跨仓库的联动需要通过token实现

网页版点击头像进入Github个人的Settings

得到token进入源仓库的Settings

3. 设置好Github Actions #

接下来我们进入源仓库的Actions若之前有使用过点击左侧New workflow若无默认会给出许多推荐我们任选一个开始configure即可

name: deploy 
# 这个 action 的名字

on:
    push: 
    # 代表每次 push 都会 turn on action
    workflow_dispatch: 
    # 代表我们也可以手动 turn on

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: checkout
              uses: actions/checkout@v2
              with:
                  submodules: true
                  fetch-depth: 0

            - name: setup
              uses: peaceiris/actions-hugo@v2.6.0
              with:
                  hugo-version: "latest"
                  extended: true 
                  # 按需选择是否使用 hugo-extended

            - name: build
              run: hugo

            - name: deploy
              uses: peaceiris/actions-gh-pages@v3
              with:
                  PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }} 
                  # 生成的 token 就用在这里,因为下面用到 external repository
                  EXTERNAL_REPOSITORY: username/username.github.io 
                  # 修改为你的 Github Pages 仓库
                  PUBLISH_BRANCH: main 
                  # 以及对应的分支 main/master
                  PUBLISH_DIR: ./public 
                  # 指定将自动部署得到的 public 文件夹 push 上去
                  commit_message: ${{ github.event.head_commit.message }}

若点击保存则将自动完成第一次commit注意提前备份原Github Pages仓库里的内容没备份也可以通过历史commit找到啦哈哈

4. 如果你还希望刷新 Cloudflare 缓存 #

我还使用Cloudflare Pages来加速访问为了在更新博文后刷新posts页面的缓存可以借助Cloudflare Purge Cache或者Cloudflare Cache Purge Action

以后者为例deploy之后加入

- name: Purge cache
  uses: nathanvaughn/actions-cloudflare-purge@master
  with:
      cf_zone: ${{ secrets.CLOUDFLARE_ZONE }}
      cf_auth: ${{ secrets.CLOUDFLARE_AUTH_KEY }}
      files: |
         https://fanrongbin.com/posts/index.html
         https://fanrongbin.com/index.html
         https://fanrongbin.com/main.css

需要新增两个secret

Comment

Login via Github
No Login
Nickname
Email
Website
0/500
0 comments
Webmention

What is Webmention?

Hypothes.is