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