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

# 1.在 GitHub 上托管项目

像这样 --> react-demo-deploy (opens new window)

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

登陆 GitHub ，点击头像下的 setting 1.png

点击 Developer settings 2.png

点击 Personal access tokens > generate new token 3.png

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

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

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

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

添加 Personal access token 成功 9.png

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

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

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

10.png

# 4.项目中添加 GitHub Actions 配置

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

deploy.yml (opens new window)

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 5.修改 homepage

在 package.json 中添加homepage字段，值为https://baibai-lee.github.io/<your repositorie name>/

# 6.提交代码并检测是否部署成功

做完以上工作后就可以提交你的代码，GitHub Actions 会自动执行并将项目进行部署

回到仓库，点击 Actions > Publish to Github Pages，找到你这次的提交，检查任务是否成功执行 11.png 12.png

点击 Settings > Options 往下翻，查看 GitHub Pages 是否成功添加 13.png

如果一切顺利，就可以看到你的项目啦 --> https://baibai-lee.github.io/react-demo-deploy/ (opens new window) 14.png

# 可能存在的坑

  • 假如你的项目使用 yarn 进行包管理，在 GitHub Actions 中会出现错误，这个时候取巧一点的办法是，在本地执行以下npm i生成一下package-lock.json,再提交代码；一了百了的办法是直接把包管理器换成 npm

15.png