github actions自动发布react项目

开始发布默认项目已经上传github，这个过程过于简单，不赘述

根目录创建路径.github/workflows，在此文件夹下创建文件deploy.yml，粘贴以下内容，按需修改配置，再上传代码，就会自动发布了。（也可以直接在这里New workflow，还有好多好多别人已经写好的workflow可以直接用，我暂时没试过，欢迎大家踊跃尝试）

name: Deploy page # action的名字，会显示在github Actions的All workflows下面

on: # 触发条件
  push: # push代码时
    branches: # 触发push的分支
      - main # 可以修改成你自己想构建的分支

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 跑脚本的机器
    steps: # 步骤
      - name: Checkout 🛎️ # 第一步 拉代码
        uses: actions/checkout@v2  # 拉代码的插件
        with:
          persist-credentials: false


      - name: Install and Build 🔧  # 第二步，装node包，构建
        run: |
          npm install
          CI=false && npm run build  # 你自己项目的构建命令
          cp build/index.html build/404.html # 防止404跳转github的404

      - name: Deploy 🚀 # 部署
        id: 'deploy'
        uses: JamesIves/github-pages-deploy-action@releases/v3 # 部署到github的静态页，会将打包后的文件推送至下面填写的分支，可以直接新开一个分支用来放打包后的文件
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: static-page # 编译文件分支
          FOLDER: build # 编译文件的文件夹

      - name: Send Notification # 发送邮件
        uses: dawidd6/action-send-mail@master # 发邮件的插件，打开你小号邮箱的设置界面，开启SMTP服务，记住授权码。
        with:
          server_address: smtp.163.com 
          server_port: 465
          username: ${{ secrets.MAIL_USERNAME }} # 邮箱小号的登录名
          password: ${{ secrets.MAIL_PASSWORD }} # 开启服务时的授权码
          subject: 【】#邮件主题
          body: 邮件内容
          to: xxxx@xxx.com # 收件邮箱
          from: GitHub Actions # 发件人

以上，secrets存放在github的设置里：

image.png

设置还需设置pages:

image.png

最后打开上图绿框中的链接，即可访问你的项目了。