深入但不淺出，如何用 github actions 自動發佈 gh-pages

大家好，我是奶綠茶
github 有個好用的功能，只要 branch 叫 gh-pages
就可以用 username.github.io/repository_name 這樣的網址瀏覽網頁。

這是奶綠我在 2019 年 前端修練精神時光屋 製作的純前端聊天室 Demo
https://milkmidi.github.io/The-F2E---Rapid-Chat

本來需要手動發佈到 gh-pages，
現在 github 提供了 actions ，就可以完全自動化。

當 master branch 有新的 commit 時，能夠自動更新到 gh-pages 。

新增 perrsonal sccess token 給 Github Actions 用

Settings / 左邊的 Personal access tokens
選取 repo:status 和 public_repo
確認後，就可以看到產生的 acccess tokens,
記得先存下來，不然關掉網頁後就再也看不到。

Secrets

接著到你想要自動發佈的 github repository

Settings / 左邊的 Secrets , 再點選 Add a new secret
Name：打個自己認得的名字
Value：貼上剛剛產生的 token

新增 Actions

點選 Actions 後，可以選取現成的樣版使用。
不過在這我是自己手動新增。

可以把檔案放在這個路徑：
.github/workflows/main.yml

name: deploy gh-pages
on:
  push:
    branches:
      - master
jobs:
  build:
    name: Build and deploy gh-pages
    env:
      MY_SECRET   : ${{secrets.commit_secret}}
      USER_NAME   : githubaction
      USER_EMAIL  : githubaction@fake.com
      PUBLISH_DIR : ./dist
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install
      run: |
        npm install
    - name: npm run build
      run: |
        npm run gulp m
        npm run build
    - name: Commit files
      run: |
        cd $PUBLISH_DIR
        git init
        git config --local user.name $USER_NAME
        git config --local user.email $USER_EMAIL
        git status
        git remote add origin https://$MY_SECRET@github.com/$GITHUB_REPOSITORY.git
        git checkout -b gh-pages
        git add --all
        git commit -m "deploy to Github pages"
        git push origin gh-pages -f
        echo 🤘 deploy gh-pages complete.

這樣就可以當 master 有新的 commit 時，自動跑 actions, 然後發佈到 gh-pages。

github 原始碼，祝大家學習愉快。
https://github.com/milkmidi/The-F2E---Rapid-Chat

參考文章：
https://medium.com/flutter-community/flutter-web-github-actions-github-pages-dec8f308542a