使用 Github Action 部署 Github Pages (node)

記錄一下使用 Github Action 部署 Github Pages 的流程
我這邊需求是 node + vue

步驟很簡單：

1. 設定個人用的 token
2. 撰寫 Action 的 yml
3. 設定 repo

設定個人token

記得一兩年前 Github 就棄用輸入密碼的方式允許外部方式連線 repo，都必須要用 token。設定方式如下

先在大頭像找到 setting

接著在左側欄找到 Developer Settings

選擇 Token(classic)

選擇 Generate new token (classic)

scopes 至少要勾以下範圍

設定 yml

這邊就不解釋 Action 的做法
請參考 文件
我用的是這組 action ：JamesIves/[email protected]

相關參數寫在這邊:https://github.com/JamesIves/github-pages-deploy-action

部署在自己的的專案

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Install & Build
      run: |
        npm install
        npm run build 

      - name: Deploy
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages
          folder: dist

部署到其他專案

${{ secrets.ACCESS_TOKEN }} 就是從 ACCESS_TOKEN 的設定取值，不要將 token 暴露在明碼上

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Install & Build
      run: |
        npm install
        npm run build 

    - name: Deploy Antoher Repo
      uses: JamesIves/[email protected]
      with:
        branch: gh-pages
        folder: dist
        token: ${{ secrets.ACCESS_TOKEN }}
        repository-name:  Sakasky/SEZ

要另外在專案中設定 token

以 yml 為例子
Name就設定 ACCESS_TOKEN
然後將 token 放到 Secret 裡面

打開 Github Pages 設定

測試過要先設定或不設定都可以，若不先設定，而直接部署的話也可以

完成

只要每次 commit / push 完，Action 就會自動幫部署網頁啦，超級方便！