一、根据GitHub提供的文档生成密钥,生成好后记得复制下来,要否则再访问页面的时候密钥就不展现了。react
# 生成密钥时主要须要开启的权限有 一、rope 下全部权限 二、admin:repo_hook 下全部权限 三、delete_repo 下全部权限 # 主要是关于rope的权限,尽可能都开启
二、在要使用Actions功能的仓库的Settings
中的Secrets
中新增一条。git
Name为:ACCESS_TOKEN Value为:刚才生成好的密钥
三、在项目的package.json
文件中找到homepage
字段,没有的话就新增一个。github
"homepage": "https://[GitHub的用户名].github.io/[使用Actions功能的仓库名]"
四、在使用Actions
功能的仓库的根目录添加一个.github
目录,并在其中新增一个workflows
目录,在workflows
目录中再新增一个任意名字的.yml
文件。npm
# 自定义当前执行文件的名称 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
五、修改代码->发布到仓库->在仓库的Actions
中能够看到构建过程,构建结束后能够在第三步设置的homepage
地址中看到效果。json