使用 GitHub Actions 自動部署靜態網頁 – GitHub Pages

最近因為要幫人家製作網頁需要有地方可以放靜態網頁，所以就使用 GitHub Pages 來當靜態網頁的 Host。

靜態網頁直接在 GitHub Pages 發布

而在 GitHub Pages 通常是把網頁發布到 gh-pages 這個 Branch 就算是部署成功了。

發布需要 Build 的靜態網頁

不過我們的網頁需要 Build 因此沒辦法直接這樣發布，所以我們就可以使用 Deploy to GitHub Pages 這樣套件來完成這個功能，以下的範例是如我們今天的網頁使用 npm run build 就會把網頁放到 build 這個資料夾，就可以使用以下的腳本來完成部署。而這個檔案我們只要把它放到 .github/workflows/deploy.yml 就可以了。

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected]

      - name: Install and Build 🔧 
        run: |
          npm install
          npm run build

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

參考資料

• https://pages.github.com/