自動化部署到Github Pages

Jul 4, 2021

Github Pages是一個免費的空間讓你可以簡單地部署網站。雖然是免費，但他提供的功能可不少，例如CDN, TLS Cert, 自動導向HTTPS等等… 其架設簡單，你只需開設一個Github Repository後稍加設定即可。

而Github Action則是Github提供的CI/CD toolset。其功能強大，加上社群上很多開源資源可以利用，因此很簡單的就可以開發出一個自動交付的網站。

設定Github Action

假設網站以GatsbyJS/NextJS開發，我們就需要用到NodeJS的環境。而所需的Github Action也很簡單，概括以言流程如下：

取得網站源碼
設定NodeJS環境
yarn安裝項目依賴
yarn產出編譯後的網站
發布到gh-pages的分支上

首先我們建立一個yaml檔案，告之Github我們需要運行Github Action。

路徑如下: .github/workflows/deploy.yaml

這個是deploy.yaml檔的內容，簡單描述的話大概是 “當看到main有新commit時，觸發編譯，然後把結果上傳到gh-pages分支上”

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 14
      uses: actions/setup-node@v1
      with:
        node-version: 14
    - run: yarn install
    - run: yarn build
      env:
        NODE_ENV: production    
    - name: Deploy to Github Page
      uses: peaceiris/actions-gh-pages@v3
      with:      
        publish_dir: ./public
        keep_files: false
        github_token: ${{ secrets.GITHUB_TOKEN }}
        cname: blog.nandi.sh

on:
  push:
    branches:
      - master

這部份是Github Action的觸發條件。大部份的項目用push.branches已經足夠，只要有commit push到你提定的branch就會觸發。進階功能如PR, dispatch等，有興趣的朋友可以自行研究。

    - name: Deploy to Github Page
      uses: peaceiris/actions-gh-pages@v3
      with:      
        publish_dir: ./public
        keep_files: false
        cname: blog.nandi.sh
        github_token: ${{ secrets.GITHUB_TOKEN }}

而這段的作用就是把編譯好的源碼發佈到Github Pages上面， peaceiris/actions-gh-pages@v3則是一個第三方的Github Actions，有興趣的朋友可以到他們的repository 參考。當然你也可以自己寫shell script或者用一些nodejs的library去做類似的功能，但設定上會比較麻煩，尤其是Github的權限存取等問題。值得一提是該action預設把產出上傳到同一repository的gh-pages分支上，該分支亦是Github Pages預設的分支。

當成功設定後可以嘗試推送一個commit，然後到Actions 頁面看一下結果。 Action運行成功的話你會看到類似的✅號，另外gh-pages分支上也會有新的檔案。

設定Github Pages

成功把內容上傳到gh-pages之後就需要設定Github Pages了。到你的repository上，去Settings > Pages頁面，然後如下圖般在Source中選取gh-pages 分支。

這樣就等於告訴Github我們要把gh-pages分支中的內容發佈，而他則會自動地把該分支的檔案很快地上傳到他的CDN中。網址會是https://{用戶名}.github.io/{repo名}/，你亦可以在Settings > Pages中看到你已發佈的網址。

設定Domain

當你擁有自己的Domain後，你可以告訴Github你想把網址設定成你的Domain。回到剛剛的Github Action，把cname 改成自己的domain

    - name: Deploy to Github Page
      uses: peaceiris/actions-gh-pages@v3
      with:      
        publish_dir: ./public
        keep_files: false
        cname: blog.nandi.sh # <-- 改這個
        github_token: ${{ secrets.GITHUB_TOKEN }}

然後你就會看到在gh-pages分支上多了一個CNAME的檔案，內容就是你剛設定的domain。你亦可以在Settings > Pages > ‘Custom Domain’ 中填上的你domain。

設定原成後去到你的DNS Provider那裡，新增一個CNAME entry, 把value指去{用戶名}.github.io 例如你想把blog.nandi.sh指去 nandiheat.github.io/gatsby-blog的話，新增一個CNAME

HOST: blog
VALUE: nandiheath.github.io

大致原理是Github每當看到Github Pages內含CNAME時，會把該domain登記到他的路由上。當有人發送到nandiheath.github.io請求，而其中的HOST為blog.nandi.sh時，路由就會把請求轉址到nandiheat.github.io/gatsby-blog上。

總結

整個設定並不太困難，而且服務完全免費。配合進階的Github Action你可以做一些定時發佈的靜態網站，甚至一些爬蟲等等。免費的不香嗎 :D