單元 6 · GitHub Pages

Pages 是什麼 · What is Pages

GitHub Pages 是 GitHub 內建的靜態網站託管服務—— 把 repo 裡的 HTML/CSS/JS（或 Markdown）直接變成網站，免費、附 HTTPS、綁 github.io 網域。

my-site/
├── index.html
├── about.html
└── assets/
    └── site.css

https://使用者.github.io/my-site/

# 專案網頁：/repo名/
# 個人/組織網頁：/（repo 名必須是 使用者.github.io）

啟用 Pages · 三種方式

方式一：從 main 分支（最簡單）

1. repo → Settings → Pages
2. Source: Deploy from a branch
3. Branch: main  /  (root)
4. Save → 等 1~2 分鐘建置
5. 出現網址：https://你.github.io/repo名/

方式二：GitHub Actions（自動化，單元 7 詳談）

- uses: actions/configure-pages@v5
- uses: actions/deploy-pages@v4

適合需要建置步驟的專案（如 Astro / Vite 編譯後再部署）。

方式三：gh CLI（命令列，單元 8 詳談）

gh repo create my-site --public --source=. --push
gh api --method POST \
  repos/USER/my-site/pages \
  -f "source[branch]=main" -f "source[path]=/"

自訂網域 · Custom Domain

想用自己的網域（如 blog.example.com）：

1. Pages 設定填 CNAME：blog.example.com。
2. 到你的 DNS 供應商加 CNAME 記錄指向 使用者.github.io。
3. 等 DNS 生效，即可用 https://blog.example.com 存取。

限制要知道 · Limits

動手做：部署你自己的教學站

把前面學的串成實作：

1. 建一個 repo（如 my-site），放 index.html 與 assets/site.css。
2. Push 到 GitHub，加 .nojekyll。
3. Settings → Pages → Deploy from branch → main。
4. 等 1–2 分鐘，https://你.github.io/my-site/ 上線。

想更深入，可回顧本站姊妹站的結構當範本。

延伸閱讀

• 下一篇：單元 7 · GitHub Actions——自動化部署。
• GitHub Docs: Pages