GitHub Pages 自訂網域完整教學：DNS 設定、HTTPS 啟用與常見問題解決
username.github.io 這個網址雖然免費好用，但如果你想要更專業的形象，用自己的網域會更好。好消息是，GitHub Pages 完整支援自訂網域，而且 HTTPS 憑證也是免費的。
這篇文章會從頭到尾帶你完成自訂網域的設定。不管你是用 Namecheap、GoDaddy 還是其他註冊商，只要跟著步驟做，就能把你的專屬網域指向 GitHub Pages。
自訂網域的運作原理
在開始設定之前，先了解一下背後的運作原理，這樣遇到問題時比較容易排查。
DNS 是什麼？
DNS（Domain Name System）是網域名稱系統，它的功能是把網域名稱（像是 example.com）轉換成 IP 位址（像是 185.199.108.153）。當使用者輸入網址時，瀏覽器會先查詢 DNS 來找到對應的伺服器位址。
GitHub Pages 的網域解析流程
當你設定自訂網域後，流程變成：
- 使用者輸入
www.example.com - DNS 查詢，發現指向 GitHub 的 IP
- 瀏覽器連到 GitHub 伺服器
- GitHub 檢查這個網域對應哪個 Repository
- 回傳對應的網站內容
GitHub 會透過你 Repository 裡的 CNAME 檔案來識別網域屬於哪個網站。
CNAME 檔案的作用
CNAME 檔案放在 Repository 的根目錄，裡面只有一行：你的自訂網域。
www.example.com
這個檔案告訴 GitHub：「如果有人透過 www.example.com 來存取，就顯示這個 Repository 的內容。」
步驟一：購買與準備網域
首先你需要一個網域。如果還沒有，先去註冊商購買一個。
推薦的網域註冊商
| 註冊商 | 特色 | .com 價格（年） |
|---|---|---|
| Namecheap | 便宜、介面簡單 | ~$10-15 |
| Cloudflare | 成本價、附帶 CDN | ~$9-10 |
| Google Domains | 介面清楚、整合 Google 服務 | ~$12 |
| GoDaddy | 知名度高、行銷多 | ~$12-20 |
| Gandi | 隱私保護、法國公司 | ~$15-18 |
選擇建議：
- 預算考量：Cloudflare（幾乎是成本價）
- 新手友善：Namecheap 或 Google Domains
- 已有 Cloudflare 帳號：直接在 Cloudflare 註冊
網域選擇建議
- 選擇好記的名稱
- 優先選擇
.com，除非有特殊需求 - 避免太長或難拼的網域
- 確認沒有商標問題
步驟二：設定 DNS 記錄
買好網域後，最重要的就是設定 DNS 記錄，讓網域指向 GitHub Pages。
A 記錄 vs CNAME 記錄
A 記錄：直接把網域指向 IP 位址
- 用於 apex domain（example.com，沒有 www）
- 需要設定多個 IP 位址
CNAME 記錄：把網域指向另一個網域
- 用於子網域（www.example.com）
- 比較簡單，只需要設定一筆記錄
設定 Apex Domain（example.com）
如果你想用沒有 www 的網域（像是 example.com），需要設定 A 記錄。
GitHub Pages 的 IP 位址：
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
在你的 DNS 設定中，新增 4 筆 A 記錄：
| 類型 | 名稱 | 內容 |
|---|---|---|
| A | @ | 185.199.108.153 |
| A | @ | 185.199.109.153 |
| A | @ | 185.199.110.153 |
| A | @ | 185.199.111.153 |
@ 代表 apex domain（根網域）。
設定 www 子網域
如果你想用 www.example.com，設定 CNAME 記錄：
| 類型 | 名稱 | 內容 |
|---|---|---|
| CNAME | www | username.github.io |
把 username 換成你的 GitHub 帳號名稱。
各註冊商設定範例
Namecheap：
1. 登入 Namecheap
2. 進入 Domain List → 找到你的網域 → Manage
3. 選擇 Advanced DNS
4. 新增記錄
Cloudflare：
1. 登入 Cloudflare
2. 選擇你的網域
3. 進入 DNS → Records
4. 新增記錄
5. 注意：Proxy 狀態建議先設為 DNS only（灰色雲朵）
GoDaddy：
1. 登入 GoDaddy
2. 進入 My Products → DNS
3. 新增或編輯記錄
DNS 設定很複雜？VibeFix 幫你搞定網域指向問題
DNS 設定錯誤可能導致網站無法連線，而且問題排查很花時間。如果你不確定怎麼設定，或是設定後網站還是連不上，VibeFix 的專家可以幫你從頭到尾搞定。
步驟三：GitHub 端設定
DNS 設定完成後，接下來要在 GitHub 這邊做設定。
在 Repository Settings 設定
- 進入你的 Repository
- 點擊 Settings → Pages
- 在「Custom domain」欄位輸入你的網域
- 點擊 Save
GitHub 會自動在你的 Repository 建立一個 CNAME 檔案。
手動建立 CNAME 檔案
如果你想手動建立，在 Repository 根目錄新增一個名為 CNAME 的檔案（沒有副檔名），內容只有一行：
www.example.com
或是如果你用 apex domain：
example.com
注意：如果你用框架（React、Vue 等），要把 CNAME 檔案放在 public/ 資料夾，這樣 build 時才會複製到輸出目錄。
驗證網域（可選但建議）
GitHub 提供網域驗證功能，可以防止其他人用你的網域指向他們的 GitHub Pages。
- 到 GitHub Settings（帳號設定，不是 Repository）
- 選擇 Pages
- 點擊「Add a domain」
- 輸入你的網域
- GitHub 會給你一個 TXT 記錄
- 到 DNS 設定新增這個 TXT 記錄
- 回到 GitHub 點擊驗證
步驟四：啟用 HTTPS
設定好自訂網域後，一定要啟用 HTTPS。
Enforce HTTPS 設定
- 進入 Repository → Settings → Pages
- 在「Custom domain」下方找到「Enforce HTTPS」
- 勾選啟用
如果這個選項是灰色的，表示 HTTPS 憑證還沒準備好，等一下再試。
憑證等待時間
GitHub 使用 Let's Encrypt 自動產生 SSL 憑證，這個過程可能需要：
- 快的話：幾分鐘
- 慢的話：最多 24 小時
如果超過 24 小時還沒好，可能是 DNS 設定有問題。
Let's Encrypt 整合說明
GitHub Pages 的 HTTPS 憑證是透過 Let's Encrypt 自動取得和更新的，你不需要：
- 自己購買 SSL 憑證
- 手動更新憑證
- 設定 SSL 配置
www vs apex domain：該選哪個？
這是很多人糾結的問題。
兩者差異
| 項目 | apex domain | www |
|---|---|---|
| 範例 | example.com | www.example.com |
| DNS 記錄 | A 記錄（4 筆） | CNAME 記錄（1 筆） |
| CDN 相容性 | 較差 | 較好 |
| 設定複雜度 | 中等 | 簡單 |
SEO 考量
從 SEO 角度來說，兩者沒有明顯差異，但要注意：
- 選擇一個作為主要網址
- 設定另一個重定向到主要網址
- 避免兩個網址都可以存取（會被搜尋引擎視為重複內容）
重定向設定
最佳做法是同時設定兩個，然後讓其中一個重定向到另一個。
如果主要用 www.example.com：
1. 在 GitHub 設定 www.example.com
2. 設定 apex domain 重定向到 www
如果主要用 example.com：
1. 在 GitHub 設定 example.com
2. 設定 www 重定向到 apex
GitHub Pages 會自動處理重定向，但需要確保兩邊的 DNS 都有設定正確。
推薦做法
- 兩種 DNS 記錄都設定
- 在 GitHub 的 Custom domain 只輸入一個（你想要的主要網址）
- GitHub 會自動處理重定向
常見問題與錯誤排除
設定過程中可能遇到的問題和解決方式。
DNS 生效延遲
問題：設定好 DNS 了，但網站還是連不上。
原因：DNS 記錄需要時間「傳播」到全球的 DNS 伺服器。
解決方式：
- 等待 24-48 小時
- 用 DNS 查詢工具檢查設定是否正確
- 清除本機 DNS 快取
檢查 DNS 是否生效：
# macOS / Linux
dig example.com
# 或使用線上工具
# https://dnschecker.org
HTTPS 無法啟用
問題：Enforce HTTPS 選項是灰色的，無法勾選。
可能原因：
1. DNS 設定不正確
2. 憑證還在產生中
3. 網域驗證失敗
解決方式：
1. 確認 DNS A 記錄或 CNAME 記錄正確
2. 等待 24 小時
3. 嘗試移除 Custom domain 設定，再重新加入
網域衝突問題
問題：設定網域時顯示「Domain already taken」。
原因：這個網域已經被其他 Repository 使用。
解決方式：
1. 如果是你自己的其他 Repository，先移除那邊的設定
2. 如果是別人的 Repository，你可能需要驗證網域所有權
網域設定遇到問題？讓專家幫你診斷
DNS 問題排查很花時間，而且錯誤原因千百種。如果你嘗試了各種方法還是搞不定，讓 VibeFix 的專家幫你快速找出問題並解決。
進階：多個網域指向同一網站
如果你有多個網域，想要都指向同一個網站怎麼辦？
多網域設定
GitHub Pages 只支援設定一個自訂網域，但你可以：
- 選擇一個作為主要網域，在 GitHub 設定
- 其他網域用 301 重定向指向主要網域
301 重定向配置
在你的網域註冊商設定 301 重定向：
Namecheap 設定：
1. 進入 Domain List → 選擇要重定向的網域 → Manage
2. 選擇 Redirect Domain
3. 設定目標網址
Cloudflare 設定：
1. 進入要重定向的網域
2. 選擇 Rules → Redirect Rules
3. 新增規則
為什麼要用 301 重定向？
- 避免重複內容問題（SEO）
- 確保使用者輸入任一網址都能到達你的網站
- 保留 SEO 權重（301 會傳遞 PageRank）
總結與延伸閱讀
自訂網域讓你的 GitHub Pages 網站看起來更專業，設定流程主要是：
重點回顧
- 購買網域：選擇可靠的註冊商
- 設定 DNS：A 記錄（apex）或 CNAME（www）
- GitHub 設定：輸入網域、確認 CNAME 檔案
- 啟用 HTTPS：勾選 Enforce HTTPS
延伸閱讀
- 想了解免費版和 Pro 版的差異？→ 了解 GitHub Pages 免費版與 Pro 版網域功能差異
- 想回顧 GitHub Pages 基礎？→ 返回 GitHub Pages 完整教學
準備讓你的網站用自己的網域了嗎？VibeFix 提供完整網域設定服務
從 DNS 設定到 HTTPS 啟用，VibeFix 可以幫你處理所有細節，讓你的網站順利用上專屬網域。
FAQ
GitHub Pages 可以用自己的網域嗎？
可以，而且完全免費。你只需要購買一個網域，然後設定 DNS 記錄指向 GitHub Pages，再到 Repository 的 Settings → Pages 輸入你的網域即可。GitHub 還會自動幫你申請免費的 HTTPS 憑證。
GitHub Pages 自訂網域要多久生效？
DNS 設定後通常需要幾分鐘到 48 小時不等。這是因為 DNS 記錄需要時間傳播到全球的 DNS 伺服器。HTTPS 憑證的產生可能需要額外的時間，通常在幾分鐘到 24 小時內完成。如果超過 48 小時還沒生效，建議檢查 DNS 設定是否正確。
GitHub Pages 自訂網域支援 HTTPS 嗎？
支援，而且是免費的。GitHub 使用 Let's Encrypt 自動為你的自訂網域申請 SSL 憑證，你只需要在設定完成後勾選「Enforce HTTPS」選項即可。憑證會自動更新，你不需要手動處理任何事情。
www 和沒有 www 的網域有什麼不同？
www.example.com 是子網域，example.com 是 apex domain（根網域）。技術上最大的差異是 DNS 設定方式：www 用 CNAME 記錄，apex 用 A 記錄。從使用者角度來說沒有差異，但建議選擇一個作為主要網址，另一個設定重定向，避免 SEO 問題。