GitHub-Actions的使用教程

一、根据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

相关文章
相关标签/搜索