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
地址中看到效果。