使用hugo框架+github action创建个人博客

发表于： 2025-05-10 分类于：个人博客/hugo

字数： 1495 阅读：≈ 3分钟浏览：

使用hugo框架+github action创建个人博客

本操作是使用静态页面后的进阶操作，主要是为了省去在本地进行hugo编译的步骤。理想的状态是，我只负责写文，和将好的md提交到git备份，然后就可以坐等网站内容更新了，官方提供的GitHub Action正可以满足这个需求。

需要管理两个仓库，一个是原先的静态仓库，一个是整个hugo仓库

Github Action需要做两件事：

编译，生成静态文件
部署，把静态文件移动到合适的位置

主要流程

配置私有hugo库的Github Action
配置合适的token

在hugo博客根目录下，创建放置Github Action 配置文件的目录 .github/workflows；在 .github/workflows目录下，创建一个 yml文件，这就是Github Action需要的一个工作流的配置，如果需要多个工作流可以创建多个yml文件

博主.yml文件示例

 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
36
name: deploy

# 代码提交到main分支时触发github action
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: actions/checkout@v4
          with:
              fetch-depth: 0

        - name: Setup Hugo
          uses: peaceiris/actions-hugo@v3
          with:
              hugo-version: "0.145.0" # 可以修改为你使用的 Hugo 版本
              extended: true

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/actions-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}#对应静态页面库的密钥
              EXTERNAL_REPOSITORY: 0linkun/0linkun.github.io# 修改为你的 GitHub Pages 仓库
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public#把本地生成的public文件夹下的文件部署到静态库
              commit_message: auto deploy
			# 如果使用自定义域名，还需要添加下面一行配置
              cname: blog.000k.de

配置合适的token

首先，需要生成一个Personal access tokens

在个人GitHub页面，依次点击（个人设置）Settings->Developer settings->Personal access tokens进入如下页面：

点击Generate new token出现如下界面，在Note中输入名称，在Select scopes选择workflow

将生成的token复制出来为后续创建secret做准备，注意必须及时复制，一旦离开此页面后续就无法查看其值，只能重新创建新token。
进入对应的GitHub项目下，依次点击Settings->Secrets->Actions进入添加Action secrets的界面，点击New repository secret按钮

在出现的界面中name部分输入在yml中设置的值，Secret部分输入步骤3中记录的token值，然后点击Add secret按钮

![需要注意的是name的值不能以GITHUB_开头，否则创建会出错

在流水线中将personal_token值设置为步骤5中secret的名称，类似${{ secrets.PERSONAL_TOKEN }}s，至此personal_token设置过程完毕。

在这里需要特别说明一下， hugo官网的例子用的是github_token，然而实操时才发现github_token不支持外部库，我们采用的两个仓库的方案不能使用github_token。 Github Action除了github_token之外，还支持deploy_token和personal_token。出于方便考虑，我选择了personal_token。

至此整个设置过程完毕！