跳过正文

GitHub 上使用 Actions 部署 Pages

·1310 字·3 分钟
目录

因为我希望博客博文的源文件不会轻易被别人一锅端掉,所以采取了博客源码使用私密仓库,将 Hugo 创建的静态文件部署到 Pages 的仓库之中。由于本人过于懒惰的原因,就使用了 Actions 在源文件的仓库接受到提交时,就会自动生产静态文件并部署到 Pages 仓库。

创建部署密钥 (Deploy Key)
#

在本机上操作
#

为了让源码仓库有权限推送到 GitHub Pages 仓库,需要创建一个 SSH 密钥对,并将公钥配置为目标仓库的“部署密钥”,私钥配置为源码仓库的“Secret”。

使用如下命令创建 SSH 密钥对,注意不要设置密码 (passphrase),一路回车即可。

ssh-keygen -t rsa -b 4096 -C "gh-actions-for-hugo" -f hugo-deploy-key

这个命令会生成两个文件:

  • hugo-deploy-key (私钥)
  • hugo-deploy-key.pub (公钥)

Pages 仓库配置
#

接下来就是在 Pages 仓库添加公钥。打开你目标仓库 https://github.com/xxx/xxx.github.io,进入 SettingsSecurityDeploy keys,点击 Add deploy key,输入参数如下,填写完毕后点击 Add key

  • Title:可以随意填写,如 Hugo Deploy Action
  • Key:将 hugo-deploy-key.pub (公钥)文件里的全部内容复制并粘贴进去。
  • 勾选 Allow write access。这一点至关重要,因为它需要写入权限来推送构建好的文件。

源码仓库配置
#

最后,在源码仓库中添加私钥。打开 源码仓库,进入 SettingsSecuritySecrets and variablesActions,点击 New repository secret,输入参数如下,填写完毕后点击 Add key

  • Name:必须命名为 ACTIONS_DEPLOY_KEY (这个名字将在下面的工作流文件中使用)。
  • Secret:将 hugo-deploy-key (私钥) 文件里的全部内容复制并粘贴进去。

创建 GitHub Actions 工作流文件
#

Hugo 源码仓库 的根目录下,创建一个 .github/workflows 文件夹,在该文件夹中创建一个 .yml 文件,例如 deploy.yml;将下面的代码完整地复制并粘贴到 deploy.yml 文件中。

# deploy.yml

# 工作流名称
name: Build and Deploy Hugo Site

# 触发条件:当推送到 main 分支时触发
on:
  push:
    branches:
      - main  # 或者你的默认分支名,例如 master

# Job 任务
jobs:
  build-and-deploy:
    # 运行环境
    runs-on: ubuntu-latest

    # 步骤
    steps:
      # 步骤一:检出源码
      # 使用 actions/checkout@v4
      # submodules: true 是为了同时拉取你的 Hugo 主题(如果主题是作为 git submodule 添加的)
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      # 步骤二:设置 Hugo 环境
      # 使用 peaceiris/actions-hugo@v2
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest' # 你也可以指定一个版本,例如 '0.119.0'
          extended: true # 因为主题需要 Hugo Extended 版本

      # 步骤三:构建静态文件
      # 执行 hugo 命令,--minify 会压缩生成的 HTML/CSS/JS 文件
      - name: Build
        run: hugo --minify

      # 步骤四:部署到 duan-1.github.io
      # 使用 peaceiris/actions-gh-pages@v3
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          # 使用步骤一中设置的部署私钥
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          # 部署的目标仓库
          external_repository: xxx/xxx.github.io
          # 部署的目标分支
          publish_branch: main # Github Pages 用户/组织站点的分支通常是 main 或 master
          # 需要部署的文件夹,hugo 默认生成到 public
          publish_dir: ./public
          # 如果你有自定义域名,可以取消下面这行的注释
          # cname: your-domain.com
          # 提交部署信息
          commit_message: ${{ github.event.head_commit.message }}

提交代码并验证
#

提交代码
#

将创建的 .github/workflows/deploy.yml 文件 add, commit, 和 push 到 Hugo 源码仓库。

git add .github/workflows/deploy.yml
git commit -m "feat: Add GitHub Actions workflow for auto-deployment"
git push origin main

验证
#

推送完成后,进入源码仓库的 Actions 标签页,就会看到一个名为 Build and Deploy Hugo Site 的工作流正在运行;等待工作流运行成功(显示绿色对勾),如果失败(红色叉),我们可以点击进去查看日志,定位错误原因。在工作流成功后,访问 GitHub Pages 的仓库,就会发现多了一个由 GitHub Actions 产生的提交;稍等片刻,访问博客网址 https://xxx.github.io,就能看到最新的内容。

到这里,就成功设置了自动化部署。之后每次当完成一篇新博客并将其推送到源码仓库的 main 分支时,GitHub Actions 就会自动完成构建和部署的所有工作。

duan
作者
duan
愿世界和平