GitHub Actions 实现提交代码自动打包部署到 gh-pages

GitHub Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务（持续集成和持续部署）。就是你可以给你的代码仓库部署一系列自动化脚本，在你进行了提交/合并分支等操作后，自动执行脚本。

可以利用 GitHub Actions ，提交代码触发自动 build 部署gh-pages（项目要 public）

项目分支：

• master 分支 - 源代码
• gh-pages 分支 - 打包后的静态文件

创建 GitHub Token

GitHub 个人头像 -> Setting -> Developer settings - Personal access tokens，勾选 repo、workflow，创建 Token 并保存

在仓库中添加 secret

将上一步创建的 Token 添加到 GitHub 仓库的 Secrets 里

仓库 -> Settings -> Secrets -> New repository secret

创建 Actions 配置文件

项目根目录下创建 .github/workflows/deploy.yml 文件:

name: deploy

on:
  push:
    branches: [master] # master 分支有 push 时触发
    paths-ignore:   # 下列文件的变更不触发部署，可以自行添加
      - README.md

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:

      # 下载源码
      # 这一步就是检出你的仓库并下载里面的代码到runner中,actions/checkout@v2是官方自己造的轮子，直接拿来用就行
      - name: Checkout
        uses: actions/checkout@v2

      # 打包构建
      - name: Build
        uses: actions/setup-node@master
        with:
          node-version: '16.x'
      - run: npm install # 安装依赖
      - run: npm run build # 打包

      # 部署到 GitHub pages
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          publish_dir: ./dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.DEPLOY_SECRET }} # secret 名
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: 自动部署 # 部署时的 git 提交信息，自由填写

可以看到日志显示每个步骤的处理方式，展开任何步骤以查看其细节

配置下 pages，设置 source 为 gh-pages 分支

然后每次推送到 mater 分支，Github Action 都会自动运行，将构建产物发布至 Github Page

访问 https://用户名.github.io/项目名 即可看到部署后的页面