使用GitHub Actions自动部署你的博客

Note

本文章是使用hugo+GitHub Pages搭建免费博客的续篇。
下文假设你已经：

拥有自己的GitHub Pages仓库
安装了hugo并完成有关配置

1 前言

通过这篇文章，你将获得以下方案：

使用Git与GitHub备份全站
使用GitHub Actions自动部署全站
使用自定义域名

2 使用Git与GitHub备份全站

2.1 初始化Git

在GitHub上创建一个新的private仓库，仓库名为 blogName 。

Warning

请务必设置为private仓库，否则你的配置文件中的私密信息将会被公开。

在你的站点目录下执行以下命令：

1
git init
2
git remote add origin <your-repo-url>
3
git add .
4
git commit -m "init"
5
git push -u origin master

2.2 配置.gitignore

在你的站点目录下创建 .gitignore 文件，内容如下：

1
/public

这可以防止你的 public 目录被提交到仓库中。

3 使用GitHub Actions自动部署全站

3.1 创建GitHub Actions

在你的站点目录下创建 .github/workflows/gh-pages.yml 文件，内容如下：

点击查看配置文件

1
# Sample workflow for building and deploying a Hugo site to GitHub Pages
2
name: Deploy Hugo site to Pages
3

4
on:
5
  # Runs on pushes targeting the default branch
6
  push:
7
    branches: ["main"]
8

9
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
10
permissions:
11
  contents: read
12
  pages: write
13
  id-token: write
14

15
# Environment variables available to all jobs and steps in this workflow
16
env:
17
  HUGO_ENV: production
18
  HUGO_VERSION: "0.115.4"
19
  GO_VERSION: "1.20.5"
20
  NODE_VERSION: "18.15.0"
21
  TINA_CLIENT_ID: ${{ vars.TINA_CLIENT_ID }}
22
  TINA_TOKEN: ${{ vars.TINA_TOKEN }}
23

24
jobs:
25
  # Build job
26
  build:
27
    runs-on: ubuntu-latest
28
    steps:
29
      - uses: actions/checkout@v3
30
      - name: Set up Node.js
31
        uses: actions/setup-node@v3
32
        with:
33
          node-version: ${{ env.NODE_VERSION }}
34

35
      - name: Install Hugo
36
        run: |
37
          curl -LO "https://github.com/gohugoio/hugo/releases/download/v${{ env.HUGO_VERSION }}/hugo_extended_${{ env.HUGO_VERSION }}_Linux-64bit.tar.gz"
38
          tar -xvf hugo_extended_${{ env.HUGO_VERSION }}_Linux-64bit.tar.gz
39
          sudo mv hugo /usr/local/bin/
40
          rm hugo_extended_${{ env.HUGO_VERSION }}_Linux-64bit.tar.gz
41
          hugo version
42

43
      - name: Install Go
44
        run: |
45
          curl -LO "https://dl.google.com/go/go${{ env.GO_VERSION }}.linux-amd64.tar.gz"
46
          sudo tar -C /usr/local -xzf go${{ env.GO_VERSION }}.linux-amd64.tar.gz
47
          echo "export PATH=$PATH:/usr/local/go/bin" >> $GITHUB_ENV
48
          rm go${{ env.GO_VERSION }}.linux-amd64.tar.gz
49
          go version
50

51
      - name: Setup Project
52
        run: npm run project-setup
53

54
      - name: Install npm dependencies
55
        run: npm install
56

57
      - name: Build Website
58
        run: npm run build
59

60
      - name: Upload artifact
61
        uses: actions/upload-pages-artifact@v1
62
        with:
63
          path: ./public
64

65
      - name: Echo CNAME
66
        run: echo ${{ secrets.CNAME }} > ./public/CNAME
67

68
      - name: Deploy Web
69
        uses: peaceiris/actions-gh-pages@v3
70
        with:
71
          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
72
          EXTERNAL_REPOSITORY: ${{ secrets.PAGE_URL }}
73
          PUBLISH_BRANCH: master
74
          PUBLISH_DIR: ./public
75
          commit_message: ${{ github.event.head_commit.message }}

仔细观察代码，你会发现有一些变量需要你自己填写。

3.2 配置GitHub Secrets

在你的仓库中，点击 Settings -> Secrets -> New repository secret ，添加以下变量：

PERSONAL_TOKEN
这是你的GitHub Personal Token，用于推送到仓库中。
点击这里获得你的Token。
PAGE_URL
这是你的GitHub Pages仓库的URL，格式应该为 username.github.io 。
CNAME(可选)
这是你的自定义域名，格式应该为 example.com 。

点击查看示例

202308281452214

3.3 部署博客

观察GitHub Actions的配置文件，你会发现，只有在main分支提交时，才会触发自动部署。

1
# Sample workflow for building and deploying a Hugo site to GitHub Pages
2
name: Deploy Hugo site to Pages
3

4
on:
5
  # Runs on pushes targeting the default branch
6
  push:
7
    branches: ["main"]

因此，我们需要将静态文件推送到main分支中就能完成部署。

1
git add .
2
git commit -m "init"
3
git push origin main

或者在GitHub网页中编辑完文章后，点击Commit changes按钮。

这样，你应该就能在username.github.io中看到你的博客了。

4 （可选）使用自定义域名

如果你想要绑定域名，可以在 GitHub Pages 的设置中，将 Custom domain 设置为你的域名。
此外，你还需要在你的域名服务商中，添加一条 CNAME 记录，将 yourCustom.domain 指向你的博客域名username.github.io。

Tip

有时，你或许需要在你的域名服务商中，添加一条 A 记录，将 yourCustom.domain 指向 GitHub对应的IP地址。

这样你就可以通过yourCustom.domain访问你的博客了。

5 结语

至此，你的博客就已经可以自动部署了。

下一篇文章中，我将分享我将博客文章图片托管至OSS的方案。