雖然有點久了，但還是來玩一下Github Pages

前言

在小珍珠生日這天，志清哥找我討論一個案子，說教師部需要，大神都開口了當然是不能收錢拉，但我首先跟他提出一個最根本的問題，伺服器呢！！沒有伺服器我能怎麼辦呢？我還真的能怎麼辦，後來思考既然需求並不包含資料庫跟後端，那來玩一下出了很久一直沒機會碰的Github pages吧

使用Github pages很容易，開啟一個新repository，然後到setting > pages頁面 > 找到Branch這個欄位，然後選擇分支，在選擇資料夾即可（資料夾只支援/跟/docs兩個）

如果是一般前端專案，根目錄要放專案，所以可以把build出來的檔案放到docs，這邊我以vue及vite為範例

export default defineConfig({

 // 因為最後專案網址是https://{github_account}.github.io/{repository}, 不是在根目錄，所以base也要調整

base: "/{repository_name}",

build: {

target: "es6",

outDir: "docs", // <- 改這裡

},

plugins: [vue()],

resolve: {

alias: {

"@": fileURLToPath(new URL("./src", import.meta.url)),

},

},

})

這樣就每次更新，然後build完一起把檔案commit就好，一切就大功告成了。

But，把build完的檔案一起commit這看起來是件很愚蠢的事，所以我開始想看有沒有機會使用action解決，在奶綠茶大大多年前的文章中找到解法，有人已經把套件做了，我只要使用就好，但因為年代久遠，現在已經是疫情後的2024年，有些畫面已經不一樣了還是要摸索一下，要使用的是peaceiris/actions-gh-pages@v3這套

step1.
簡單說明一下首先你要到帳戶的settings(右上角頭貼) > Developer Setting > Person Access Token > Tokens(classic) > 產生一組token供action使用（產生完記得複製起來，不然頁面關掉就看不到了）

step2.
接著到repository的Settings > Secrets and variables > actions > secrets > 新增一個secrets(開頭不能是GITHUB_，其他可以隨便取，我這邊取ACTIONS_TOKEN)

step3.
最後在專案中新增/.github/workflows/main.yml，這裡也有許多參考範例

name: GitHub Pages

on:

push:

branches:

- main

jobs:

deploy:

runs-on: ubuntu-22.04

permissions:

contents: write

steps:

- uses: actions/checkout@v3

- name: Setup Node

uses: actions/setup-node@v3

with:

node-version: "20"

- name: build

run: |

yarn

yarn build

- name: Deploy

uses: peaceiris/actions-gh-pages@v3

if: github.ref == 'refs/heads/main'

with:

github_token: ${{ secrets.ACTIONS_TOKEN }}

publish_dir: ./docs

step4.
接著把所有改動都commit & push進去

你就會發現github actions開始動拉，deploy完就會發現一個新的分支gh-pages，裡面就會是編譯完的檔案，並且github actions也都幫你設定好了，等於上面那些步驟也不用自己來，可以說非常懶人及完美啊！

後記

我再到其他專案開啟pages頁面結果顯示這樣，點進去發現要付費，原來免費只讓你啟用一個，果然天下沒白吃的午餐啊～

幫女兒切完蛋糕接到大哥驗收完成電話，大哥的笑聲像中了樂透彩，應該是有免費的伺服器跟碼農內心竊喜吧～