如何配置GitHub Actions实现React项目新commit提交后自动build部署GitHub Pages

该需求完全可以实现，使用GitHub自带的GitHub Actions功能即可完成，无需依赖本地开发环境，即使直接在浏览器端修改代码提交也能自动触发构建。

1. 新建工作流配置文件 #

在项目根目录下创建.github/workflows/auto-build.yml文件，写入如下配置：

name: 自动构建GitHub Pages
# 触发条件：推送到主分支时自动执行，同时支持手动触发测试
on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 拉取项目代码
      - uses: actions/checkout@v4
      # 配置Node.js环境，版本可替换为你项目适配的版本
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'yarn'
      # 安装项目依赖
      - run: yarn install
      # 执行你定义的build命令，自动生成docs目录
      - run: yarn build
      # 提交构建后的docs目录到仓库
      - run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git add docs/
          git commit -m "chore: 自动构建生成Pages资源" || echo "无构建变更，跳过提交"
          git push

2. 配置工作流权限 #

进入仓库的「Settings」→「Actions」→「General」页面，下滑到「Workflow permissions」区块，选择「Read and write permissions」选项后保存，给工作流开放代码提交权限。

3. 验证配置 #

配置完成后，你可以直接在浏览器端修改代码提交到主分支，系统会自动触发构建流程，无需再手动执行yarn build命令。你也可以进入仓库的「Actions」页面查看构建进度和日志。

• 工作流配置中的branches: [ main ]需要替换为你实际的主分支名称，若主分支为master则修改为branches: [ master ]
• 配置中的Node.js版本需与你项目适配的版本保持一致，避免构建报错
• 你现有的package.json中的build脚本无需任何修改，工作流会直接调用该脚本执行构建，完全兼容你原有逻辑
• 若你使用npm而非yarn作为包管理工具，将配置中的yarn install修改为npm install，yarn build修改为npm run build即可

内容的提问来源于stack exchange，提问作者Paul