使用 GitHub Actions 將 React 專案部署至 GitHub Pages 服務

做法

首先,到專案的「Settings」頁面,將「Workflow permissions」設置為「Read and write permissions」。

在專案的 .github/workflows 資料夾新增 gh-pages.yaml 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
name: GitHub Pages

on:
push:
branches:
- main
pull_request:

jobs:
deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '14'

- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-

- run: npm ci
- run: npm run build

- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public

推送程式碼。

1
2
3
git add .
git commit -m "Add deploy script"
git push

參考資料