GitHub Pages 多倉庫自訂子網域教學

如何為你的多個 GitHub 專案設定專屬子網域 (例如: `project.yourdomain.com`)

前言

當你在 GitHub 上擁有多個專案，並都使用 GitHub Pages 部署成靜態網站時，你可能會希望為每一個專案網站設定一個獨立且好記的子網域，而不是使用預設的 `your-username.github.io/repository-name` 格式。

本教學將引導你如何使用 Cloudflare 來管理你的 DNS，並成功將你的根網域 (`yourdomain.com`) 下的多個子網域，分別指向不同的 GitHub Pages 倉庫。

我們將以以下通用範例進行操作：

  • 將 `project-a.yourdomain.com` 指向 `your-username/project-a` 倉庫。
  • 將 `project-b.yourdomain.com` 指向 `your-username/project-b` 倉庫。

第一步：設定 GitHub Repository

這個步驟需要在你 **每一個** 想要設定自訂網域的 GitHub 倉庫中重複進行。

  1. 進入倉庫設定
    前往你的 GitHub 倉庫，點擊頂部的 Settings 標籤。
  2. 前往 Pages 頁面
    在左側選單中，點擊 Pages。
  3. 輸入自訂網域
    在 "Custom domain" 的輸入框中，填寫你為這個專案規劃的完整子網域。例如，在 `project-a` 倉庫中，我們填寫：
    project-a.yourdomain.com
    填寫完成後，點擊 Save。 GitHub Custom Domain Setting
  4. 重複操作
    對你的第二個倉庫 `project-b` 也進行相同操作，但在輸入框中填寫：
    project-b.yourdomain.com

提示：儲存後，GitHub 可能會顯示網域尚未正確設定的警告。這是正常的，因為我們還沒去 Cloudflare 設定 DNS。請繼續下一步。

第二步：設定 Cloudflare DNS

現在，我們需要登入 Cloudflare，告訴它如何將這些子網域指向 GitHub。

  1. 登入並選擇網域
    登入你的 Cloudflare 帳戶，並選擇你的根網域（例如：`yourdomain.com`）。
  2. 進入 DNS 設定
    點擊左側選單的 DNS 圖示。
  3. 新增 CNAME 記錄
    點擊 Add record 按鈕來新增 DNS 記錄。你需要為每一個子網域新增一筆 `CNAME` 記錄。

    為 `project-a.yourdomain.com` 新增記錄：

    • Type (類型): `CNAME`
    • Name (名稱): `project-a` (Cloudflare 會自動補完為 project-a.yourdomain.com)
    • Target (目標): `your-username.github.io` (你的 GitHub 使用者名稱.github.io)
    • Proxy status (代理狀態): 先暫時設為 "DNS only" (灰色雲朵)

    為 `project-b.yourdomain.com` 新增記錄：

    • Type (類型): `CNAME`
    • Name (名稱): `project-b`
    • Target (目標): `your-username.github.io` (注意：目標和上面那筆完全相同)
    • Proxy status (代理狀態): 同樣設為 "DNS only" (灰色雲朵)
  4. 儲存記錄
    新增完成後，你的 DNS 記錄頁面看起來會像這樣： Cloudflare DNS CNAME Settings

為什麼所有 Target 都一樣？
所有子網域的 CNAME 記錄都指向你的主 GitHub Pages 地址 (`your-username.github.io`)。GitHub 會根據訪問請求中的網域名稱（例如 `project-a.yourdomain.com`），自動將流量路由到正確的倉庫。

為什麼要先關閉 Proxy (代理)？
先設定為 "DNS only" 可以讓 GitHub 順利驗證你的網域所有權並為其簽發 SSL/TLS 憑證。等一切就緒後，我們再將其開啟以享受 Cloudflare 的加速和安全功能。

第三步：驗證與完成

  1. 等待 DNS 生效
    DNS 記錄的更新通常在幾分鐘內完成，但有時可能需要更長的時間。請耐心等候。
  2. 檢查 GitHub 狀態
    回到你每一個倉庫的 GitHub Pages 設定頁面。如果 DNS 設定成功，你會看到 "Custom domain" 區塊出現綠色勾號，並顯示 "Your site is ready to be published at..."。
  3. 強制 HTTPS
    確認網域驗證成功後，務必勾選下方的 Enforce HTTPS 選項。這會確保你的網站流量全程加密。 GitHub Enforce HTTPS Option
  4. 重新開啟 Cloudflare 代理 (重要！)
    當 GitHub 顯示一切就緒後，回到 Cloudflare 的 DNS 設定頁面，將你剛剛新增的那幾筆 CNAME 記錄的 Proxy status 從 "DNS only" (灰色雲朵) 點擊改回 "Proxied" (橘色雲朵)。

大功告成！

完成以上所有步驟後，你現在應該可以透過 `project-a.yourdomain.com` 和 `project-b.yourdomain.com` 來訪問你對應的專案網站了。未來若有新的專案，只需重複上述流程即可！