发表更新devops / github12 分钟读完 (大约1748个字)

使用github action 自动更新 github pages

首先我们会讲解如何使用 github action 部署一个简单的 html 页面到脚本所在仓库的 gh-pages 分支，接着我们会讲解如何部署到不同仓库的指定分支。

创建项目结构

首先在项目里创建.github 文件夹，然后创建 workflows 文件夹

在 workflows 文件夹下创建一个.yml 文件，笔者这样叫 deploy.yml，任意名字都行。

项目的结构如下所示：

1
2
3
4
5
6
7
8
9
10

[user@server]# tree
.
├── .github
│   └── workflows
│       └── deploy.yml
├── LICENSE
├── README.md
└── your_script.sh

部署到相同仓库的 gh-pages 分支

在这个例子，我们将使用脚本your_script.sh 创建一个非常简单的 html 页面，里面仅仅打印出当天的日期，然后将 html 页面部署到脚本所在仓库的 gh-pages 分支。
一旦部署完成，我们做好 github pages 相关设置，就可以在 internet 上访问相关我们部署的网页了，麻雀虽小但是五脏俱全， 我们需要做更复杂的事情， 只需要将那些逻辑放入your_script.sh即可， 可以是编译并部署一个 Angular, vue 或 react 项目， 也可以是一个基于 Hexo, Hugo, Jekyll 的静态网站等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 请对一下github action flow 配置做一些解释
on:
  push: # 当用户push代码到代码仓库main分支时触发github action
    branches:
      - main
  schedule: # 定时触发github action
    - cron: "0 0 */1 * *" # 这里设置的每天触发一次，具体配置可以自行了解Cron表达式知识
  workflow_dispatch: # GitHub Actions 中的一种触发器，用于手动触发工作流（Workflow）。它允许用户通过 GitHub 界面或 API 手动启动一个工作流，而不是依赖于事件
permissions:
  contents: write # 一种最简单的授予github action 写权限的方式

name: Build and Deploy
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 指定运行任务的环境，这里是 ubuntu-latest。
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4 #检出代码仓库。
      - name: run your customized script # 自定义脚本
        run: your_script.sh
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4 #使用第三方 Action 将构建后的文件部署到 GitHub Pages。
        with:
          folder: "dest"

这些配置也很容易理解，这里有一点要说明，GitHub Actions 支持直接复用别人写的脚本，上面的 actions/checkout@v4 和 JamesIves/github-pages-deploy-action@v4 就是官方和别人仓库使用的 GitHub Actions 脚本

通常情况下，找个合适的 GitHub Actions 脚本就能满足使用

your_script.sh 代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#!/bin/bash

# 创建一个最简单的html页面里面包含当天的日期

# 获取当天日期
current_date=$(date +"%Y-%m-%d")

# 创建HTML文件
cat <<EOF > dest/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple HTML Page</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>Today's date is: $current_date</p>
</body>
</html>
EOF

完成以上代码编写工作以后，我们需要去 GitHub 创建一个代码仓库，然后将代码 push 到代码仓库
Github Actions 会自动执行 deploy.yml 里的文件，进行打包和部署（自动创建 gh-pages 分支）

接下来开启代码仓库 GitHub Pages， 因为设置 GitHub Pages 不是本文的重点，所有这里不做展开。 完成这些我们就可以在在 internet 上访问页面了， 由于我们设置设置的触发时间是每天触发一次， 我们可以看见网页内容是每日更新的。

部署到指定仓库的指定分支

在以上示例中，我们是将脚本生成的内容发布到脚本相同的代码仓库的 gh-pages 分支下，但是在实际工作中我们更多时候需要将生成的内容发布到指定的仓库的指定分支。其中一些配置与上面的示例稍微有所不同，所以这里单独列举一个示例用于说明如何通过 github action 更新指定项目的指定分支。

在上面的示例中我们使用 permissions contents: write 配置授予了 github action 所属项目的写权限， 从而 github action 才能将生成的内容发布到 gh-pages 分支，而在本例中我们需要相对复杂的配置过程授予 github action 对于远程仓库的写权限。

在上面的示例中我们使用 github-pages-deploy-action@v4 这个第三方 action 来发布内容，大多数情况下都使用的默认参数，配置比较简单。而在本例中我们需要更加深入的了解这个 action 的一些参数。

配置 Deploy Keys

查看github-pages-deploy-action 的配置文档, 我们了解到通过 ssh-key 选项 即可为 github action 配置 SSH Deploy Key，其实质就是一个用于访问远程仓库的私钥，只要将私钥对应的公钥设置为远程仓库 deploy key, 然后私钥存储为 github action 所在仓库的 secret, 然后通过 ssh-key 选项 github-pages-deploy-action 即可达到读写远程仓库的目的。

首先通过 ssh-keygen 生成一对公私钥

1
2
3

ssh-keygen -t rsa -m pem -b 4096 -C "youremailhere@example.com" -f key_for_deploy_action -N ""

通过以上命令我们即可得到一对公私钥 key_for_deploy_action 和 key_for_deploy_action.pub

拷贝 key_for_deploy_action.pub 中的内容，打开远程仓库 => settings => Deploy keys

点击 add deploy key , 输入 title, 填入 key, 勾选 Allow write access, 添加 key, 这样我们就添加了 deploy key.

然后，将私钥的内容作为 DEPLOY_KEY 添加到 github action 所在仓库的 settings > Secrets and variables > actions > Repository secrets 菜单中。

配置好后，您可以将操作的 ssh 密钥部分设置为作为秘密存储的私钥。

配置好后，您可以将 github-pages-deploy-action 的 ssh-key 部分设置为作为秘密存储的私钥。

1
2
3
4
5
6
- name: Deploy
  uses: JamesIves/github-pages-deploy-action@v4 #使用第三方 Action 将构建后的文件部署到 GitHub Pages。
  with:
    folder: "dest"
    repository-name: remote_repo_user/remote-repo
    ssh-key: ${{ secrets.DEPLOY_KEY }}

把这次修改推送到 GitHub 仓库，就会自动触发打包部署，然后检查 action 是否触发以及执行完成，检查远程仓库的 gh-pages 分支内容是否更新

更多高级用法讲解

更多选项可以参考文档 github-pages-deploy-action - optional-choices

参考文档

使用 GitHub Actions 和 GitHub pages 实现前端项目的自动打包部署

GitHub Pages Deploy Action

自动令牌身份验证

Managing deploy keys

相关文章

使用github action 自动更新 github pages

https://pengtech.net/github/github_action_update_github_page.html

作者

鹏叔

发布于

2025-04-25

更新于

2025-04-25

许可协议

#
评论

热门文章

目录

最新文章

follow.it

分类

热门文章

×