GitHub-Actions的使用教程

一、根據GitHub提供的文檔生成密鑰，生成好後記得複製下來，要否則再訪問頁面的時候密鑰就不展現了。

# 生成密鑰時主要須要開啓的權限有
一、rope 下全部權限
二、admin:repo_hook 下全部權限
三、delete_repo 下全部權限
# 主要是關於rope的權限，儘可能都開啓

二、在要使用Actions功能的倉庫的Settings中的Secrets中新增一條。

Name爲:ACCESS_TOKEN
Value爲:剛纔生成好的密鑰

三、在項目的package.json文件中找到homepage字段，沒有的話就新增一個。

"homepage": "https://[GitHub的用戶名].github.io/[使用Actions功能的倉庫名]"

四、在使用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

五、修改代碼->發佈到倉庫->在倉庫的Actions中能夠看到構建過程，構建結束後能夠在第三步設置的homepage地址中看到效果。