前言

「沒辦法公開的東西終究只是自嗨而已。」

對，你至今練習製作到現在的專案，再好用也只是 localhost:5173，一個只有你的電腦認識的地址。

所以今天我要來介紹使用 GitHub Pages 的方式，讓你的專案可以被公開給外人觀看並使用。

為什麼選擇 GitHub Pages？

相信很多人會有第一個直覺是：「為什麼要選 GitHub Pages？」

其實很簡單，因為我們的專案是前端專案，沒有後端、沒有資料庫、沒有登入，所以只要能放靜態檔案的地方都可以。

而選擇 GitHub Pages 的理由有三個：

1. 只要有 GitHub 帳號就可以使用，不用再多開一個服務。
2. GitHub Pages 一個月大約有 100GB 的流量額度，對於小型專案來說已經足夠。
3. GitHub Actions 可以自動化部署，push 之後就會自動 build、上傳、部署，省掉手動上傳的麻煩。

整體來講你不用額外再花時間學習 Cloudflare Pages 或 Vercel，一套 GitHub 就能滿足我們的需求。

另外等一下你會一直看到一個字叫 build，簡單來講就是把我們的 App 打包成一包純靜態的檔案（HTML、CSS、JS），打包好的東西會放在 dist/ 這個資料夾裡，而所謂的部署，其實就只是把這個資料夾放到 GitHub Pages 上面而已。

所以我們後面跑起來的流程就會是這樣：

接著你就會取得一個專屬於這個專案的公開網址，像是 https://你的帳號.github.io/repo名/，這樣你就可以分享出去啦～

而這過程基本上只需要設定一次就可以了，之後只要 push 到 main 分支就會自動部署。

Note
GitHub 是一個第三方的程式碼託管平台，雖然它的 Pages 功能是免費的，但它不是專門給你放網站的，所以如果你的專案有商業用途或是流量很大，建議還是要找專門的服務，這邊文章僅適合用於練習或是個人專案。

等等，不是說不走 GitHub Pages？

如果你有點印象的話，在 Day 9 的時候並沒有特別指定要用 GitHub Pages，而這部份是給 AI 幫我們做決定的。

不相信嗎？以我這邊來講，打開 CLAUDE.md 裡面就有一段寫著：

## 部署

Build 產物是純靜態檔，目標是 Cloudflare Pages 或 Vercel，**不需要設 `vite.config.js` 的 `base`**。若改走 GitHub Pages 才需要（monorepo 子路徑），但已在 TECH_CHOICE.md 決定不走。

Note
每個人的 AI 寫出來的內容不一定一樣，如果你的 CLAUDE.md 跟 TECH_CHOICE.md 裡面沒有提到是正常的。

那這時候剛好我們就要來改變這個決定，畢竟實務上時常會突然需求變更，所以接下來請你一樣打開 Claude Code 並輸入 /clear 清空對話，接著輸入以下 Prompt：

部署改走 GitHub Pages，不走 Cloudflare Pages / Vercel。

請在 SPEC.md 第 10 節的決策紀錄補一列（日期、決策、理由）。

CLAUDE.md 跟 TECH_CHOICE.md 部署那一段也一起改成一致。

對，就這麼簡單，AI 會幫你把三個檔案都改好，這就是 Vibe Coding 的威力。

但到目前為止，我們都還沒有開始實作，因為我們要先把文件對齊，這樣之後才不會出現「文件寫得跟實作不一樣」的情況。

把專案推上 GitHub

接下來有件事情要請你先確認一下，如果你沒有 GitHub 帳號的話，請先去註冊一個唷。

註冊完畢後，會請你到 GitHub 首頁點選右上角的 + → New repository，接著輸入 Repository name（這邊我建議就叫 money-note，跟專案名稱一致），其他選項全部不要勾選，然後按下 Create repository。

接下來下方會有一大串指令：

git remote add origin git@github.com:hsiangfeng/money-note.git
git branch -M main
git push -u origin main

請你把這一串指令複製下來，並貼以下 Prompt 給 AI，讓 AI 幫你代勞（指令的部分記得換成 GitHub 給你的那一組，不要直接複製我的唷）：

我已經在 GitHub 上開好一個新的 repo，底下是 GitHub 給我的指令：

git remote add origin git@github.com:hsiangfeng/money-note.git
git branch -M main
git push -u origin main

新增完畢後請不要馬上 push，先幫我檢查一下目前的 commit 歷史跟檔案，有沒有不該公開的東西：金鑰、密碼、.env、個人資料，同時也要跑 `npm test`、`npm run build`、`git status`，確認都沒問題之後再幫我 push。

你可能會好奇為什麼我不乾脆一次就把整個專案推上去，這是因為我們要先檢查 commit 歷史裡有沒有不該公開的東西，同時也請 AI 做一下檢查：

到這邊為止把該修正的都修正後，你回到 GitHub 的 repo 頁面就可以看到專案上來啦～

GitHub Actions 自動部署

這樣就完了嗎？就結束了嗎？

不，其實我們只是把程式碼「託管」到 GitHub 上而已，還沒有真正部署到 GitHub Pages。

所以確認專案推上去之後，我們就要來請 AI 幫我們建立一個 GitHub Actions 的 workflow，讓它自動幫我們做部署。

正常的開發狀況下，我們會區分分支（Branch），像是開發分支、測試分支、正式分支等等，大多正式專案都是 Main 分支（或叫 Master 分支）才會部署到正式環境，其他分支都是測試環境。

那我們呢？需要嗎？先不用，除非你對這件事情很感興趣，所以我們這邊就以預設分支（Main）為主，push 到 Main 就會自動部署。

接下來你只要跟 AI 講以下即可：

幫我加 GitHub Pages 的自動部署，這一步只新增 .github/workflows/deploy.yml：

- push 到 main 時觸發
- Node 用最新的 LTS，先跑 npm ci、npm test、npm run build
- 用 GitHub 官方的 Pages actions 上傳 dist 並部署

正常來講，如果你的 AI 足夠聰明的話（笑），應該會發現一個雷點：

這個 base: '/money-note/' 的雷點算是新手最常見的雷點，因為 GitHub Pages 的網址通常是以下：

https://帳號.github.io/repo名/

所以如果你的 base 沒有設定的話，那麼就必定會出現白畫面的情況，因為程式碼中的 CSS、JS 以及圖片等，在編譯後的路徑都是從根目錄 / 開始找，然後就出現白畫面了。

因此如果你有發現這問題，往 vite.config.js 裡面加上 base: '/repo名/' 就可以解決這個問題。

不過在 push 之前還有一個地方要先調整，請到 GitHub repo → Settings → Pages → Build and deployment → Source 選擇 GitHub Actions，因為新的儲存庫預設是沒有開啟 Pages 的，沒調整的話等一下 Actions 就會出現錯誤。

到這邊如果沒太大問題，你就可以請 AI 將當前進度 commit 並 push 到 GitHub，然後就可以看到 Actions 開始跑了。

如果過程有出現 Actions 錯誤，基本上會是你儲存庫忘記調整 Pages Source，回頭把上面的設定調整好，然後再重新 push 一次就可以了。

到這邊為止，如果沒問題的話，你就可以看到你的專案正式對外公開啦～

底下我給參考示範網址： https://israynotarray.com/money-note/

Note
由於我有自訂網域，所以網域不會是 https://帳號.github.io/repo名/ 這種。

結語

時間也差不多了，這邊我也來幫你做一下最後總結：

• 部署其實就是把 App build 成靜態檔（dist/）再放到 GitHub Pages 上，而 GitHub Actions 會幫你把這件事自動化，設定一次之後 push 到 main 就會自動部署。
• 儘管一開始需求是不走 GitHub Pages，但變更決定時，也要將相關文件對齊修改，避免實作與文件不統一問題。
• 專案推上公開的 repo 之前，先請 AI 檢查 commit 歷史跟檔案有沒有不該公開的東西，同時也跑一次 npm test 跟 npm run build。
• GitHub Pages 的網址會多一層 /repo名/，所以 vite.config.js 要記得設定 base，沒設定就會出現白畫面。
• push 之前記得先到 Settings → Pages 把 Source 選成 GitHub Actions，不然 Actions 會出現錯誤。

那希望這一篇已經讓你成功取得你想要的對外專案公開網址啦～