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