1、根據(jù)GitHub提供的文檔生成密鑰，生成好后記得復(fù)制下來，要不然再訪問頁面的時(shí)候密鑰就不展示了。
# 生成密鑰時(shí)主要需要開啟的權(quán)限有
1、rope 下所有權(quán)限
2、admin:repo_hook 下所有權(quán)限
3、delete_repo 下所有權(quán)限
# 主要是關(guān)于rope的權(quán)限，盡量都開啟
2、在要使用Actions功能的倉庫的Settings中的Secrets中新增一條。
Name為:ACCESS_TOKEN
Value為:剛才生成好的密鑰
3、在項(xiàng)目的package.json文件中找到homepage字段，沒有的話就新增一個(gè)。
"homepage": "https://[GitHub的用戶名].github.io/[使用Actions功能的倉庫名]"
4、在使用Actions功能的倉庫的根目錄添加一個(gè).github目錄，并在其中新增一個(gè)workflows目錄，在workflows目錄中再新增一個(gè)任意名字的.yml文件。
# 自定義當(dāng)前執(zhí)行文件的名稱
name: GitHub Actions Build and Deploy Demo
# 整個(gè)流程在master分支發(fā)生push事件時(shí)觸發(fā)
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 運(yùn)行在ubuntu-latest環(huán)境的虛擬機(jī)中
steps:
# 獲取倉庫源碼
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# 構(gòu)建和部署
- name: Install and Build
# 由于示例項(xiàng)目代碼并非在根目錄,所以要這里手動(dòng)進(jìn)入了項(xiàng)目目錄
# 如果你代碼本身就處于根目錄則不需要再手動(dòng)進(jìn)入了
run: |
cd ./react_project
npm install
npm run-script build
# 發(fā)布
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
# 環(huán)境變量
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # GitHub 密鑰 ACCESS_TOKEN 是在第二步Settings的Secrets中新增時(shí)定義的Name,要保持一致
# 發(fā)布到指定分支
BRANCH: gh-pages
# 構(gòu)建成果所在目錄,默認(rèn)位置都是在根目錄
FOLDER: ./react_project/build
5、修改代碼->發(fā)布到倉庫->在倉庫的Actions中可以看到構(gòu)建過程，構(gòu)建結(jié)束后可以在第三步設(shè)置的homepage地址中看到效果。
