隨記

Week 12 · Day 02 — 部署到 GitHub Pages

學習目標

  • 用 angular-cli-ghpages 部署到 GitHub Pages
  • 了解 baseHref 對部署的重要性
  • 完成一次部署

重點

GitHub Pages：免費的靜態網站託管（綁定你的 GitHub 帳號/專案）

安裝與部署 

ng add angular-cli-ghpages
ng deploy

baseHref（重要） - 網頁參考資源（CSS/JS/路由）需要知道「專案所在的基礎路徑」 - GitHub Pages 沿用 /repoName/，若未設對，資源會 404 

ng deploy --base-href=https://youruser.github.io/repo-name/
- 或用 angular.json 設定 baseHref

部署流程 1. 推程式到 GitHub 儲存庫 2. ng add angular-cli-ghpages 3. ng deploy → 把 dist/ 推到 gh-pages 分支 4. 開啟 https://user.github.io/repo-name/

注意事項 - SPA 路由：GitHub Pages 直接訪問子路徑可能 404，可用 hash 路由或自訂 404.html - 確認 token / 權限能推 gh-pages

實作

  1. ng add angular-cli-ghpages
  2. 設定正確的 --base-href
  3. ng deploy 並開啟網址確認可訪問

作業

  • ng add angular-cli-ghpages
  • 了解並設定 baseHref
  • 成功 ng deploy 並在線上看到頁面