使用 GitHub Pages & GitHub Actions 部署前端项目（以 React 为例）1.在GitHub

1.在 GitHub 上托管项目

像这样 --> react-demo-deploy

2.生成自动部署所依赖的 personal access token

登陆 GitHub ，点击头像下的 setting

点击 Developer settings

点击 Personal access tokens > generate new token

给 token 起个名字，随后勾选下方的全部选项，点击生成

复制生成的 token 并妥善保管此处需要注意的是，这个 token 有很高的你的账号的访问权限，因此千万不能泄露给别人，并且在刷新这个页面之后就不会再显示出来了

回到你的仓库，依次点击 Settings > Secrets > New secret

将 name 设置为 DEPLOY_KEY，并将刚才复制的 token 粘贴在下方

添加 Personal access token 成功

3.添加 ssh-key 到你的 GitHub 账号

有两个选择，一种是生成 key 之后直接添加的账户的 ssh-key，另一种是只添加到当前仓库的 Deploy keys 中，我们以第一种为例这两者的区别参考 --> github 上的账户的 SSH keys 与仓库的 Deploy keys 有何区别

ssh-keygen
# 无限回车
cat ~/.ssh/id_rsa.pub
# 将输出粘贴至github的ssh-key管理中（https://github.com/settings/keys）

4.项目中添加 GitHub Actions 配置

在项目根目录下添加.github/workflows/deploy.yml文件，内容如下

deploy.yml

name: Publish to Github Pages

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@master

      # 安装依赖
      - run: npm ci

      # 打包
      - run: npm run build

      # 部署
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v2.5.0
        env:
          PERSONAL_TOKEN: ${{ secrets.DEPLOY_KEY }}
          PUBLISH_BRANCH: gh-pages
          # 生成文件的目录
          PUBLISH_DIR: ./build