GitHub-Actions的使用教程

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

posted @ 2020-11-19 16:06  RopeHuo  阅读(2538)  评论(0编辑  收藏  举报