1、根据GitHub提供的文档生成密钥,生成好后记得复制下来,要不然再访问页面的时候密钥就不展示了。
# 生成密钥时主要需要开启的权限有
1、rope 下所有权限
2、admin:repo_hook 下所有权限
3、delete_repo 下所有权限
# 主要是关于rope的权限,尽量都开启
2、在要使用Actions功能的仓库的Settings
中的Secrets
中新增一条。
Name为:ACCESS_TOKEN
Value为:刚才生成好的密钥
3、在项目的package.json
文件中找到homepage
字段,没有的话就新增一个。
"homepage": "https://[GitHub的用户名].github.io/[使用Actions功能的仓库名]"
4、在使用Actions
功能的仓库的根目录添加一个.github
目录,并在其中新增一个workflows
目录,在workflows
目录中再新增一个任意名字的.yml
文件。
# 自定义当前执行文件的名称
name: GitHub Actions Build and Deploy Demo
# 整个流程在master分支发生push事件时触发
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 运行在ubuntu-latest环境的虚拟机中
steps:
# 获取仓库源码
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# 构建和部署
- name: Install and Build
# 由于示例项目代码并非在根目录,所以要这里手动进入了项目目录
# 如果你代码本身就处于根目录则不需要再手动进入了
run: |
cd ./react_project
npm install
npm run-script build
# 发布
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
# 环境变量
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # GitHub 密钥 ACCESS_TOKEN 是在第二步Settings的Secrets中新增时定义的Name,要保持一致
# 发布到指定分支
BRANCH: gh-pages
# 构建成果所在目录,默认位置都是在根目录
FOLDER: ./react_project/build
5、修改代码->发布到仓库->在仓库的Actions
中可以看到构建过程,构建结束后可以在第三步设置的homepage
地址中看到效果。