Github Pages 自訂網域教學
使用你的網域替代原本的 github.io 網址
關於 Github Pages
Github Pages 是由 Github 提供的免費靜態頁面寄存服務，所有 Github Free 帳號只要是 Public Repo 都能直接使用，如果是 Private Repo 則須先付費升級 Github 帳號。
限制
- 只能寄存靜態檔案資源： HTML, CSS, JavaScript, 字體檔案, 圖片檔案, PDF, 音訊檔案, 文字檔案…等等
- 網站(Repo)大小不得超過： 1 GB 這猜測也是軟限制，因為我的 Github Pages Jekyll Repo 已經快 5 GB 了。
- 部署工作時間最長： 10 分鐘
- 每小時最多部署： 10 次 (軟限制)
- 每月流量限制 ：100 GB (軟限制)
- 請求過於頻繁可能會響應 HTTP 429
⭐️⭐️⭐️若只想了解 Github Pages 自訂網域教學 請繼續往下閱讀。
Github Pages 教學，搭配 ChatGPT 不會程式也能打造個人網站
以下以程式小白、不會 Git 為範例。
1.註冊、登入 Github： https://github.com/
- 登入 Github 後選擇右上角「+」->「New repository」
2. 輸入 Repo 名稱、設定
- Repository name：
輸入你的帳號.github.io - Public：公開的專案
- Add a README file：方便建立後可直接使用 Github Web 新增檔案
- Create repository
Respository name 的部分每個帳號或組織(Organization) 只能建立一個 你的帳號.github.io 的主 Github Pages Repo，其他 Repo 若也想要部署到 Github Pages 網址會是 你的帳號.github.io/Reop名稱 ，例如：
你的帳號/你的帳號.github.ioRepo ->你的帳號.github.io你的帳號/mywebdemoRepo ->你的帳號.github.io/mywebdemo
如為非 你的帳號.github.io 的主 Github Pages Repo，需要再去 Settings 設定 Pages 才能啟用 GitHub Pages：
例如我的 Repo zhgchgli0718/testgithubpage 也想有 Github Pages 頁面。
- Settings -> Pages -> Branch -> 選擇
main/root-> Save - 完成
3. 建立你的首頁 .html 檔案
- 在 Repo 首頁點擊右上角綠色按鈕「Code」
- 選擇「+ Create new file」
4. 使用 ChatGPT 協助您產生頁面 .html 檔案
- 這邊用最簡單的 Prompt：
產生一個賽博龐克風的 歡迎頁面 (.html)
5. 貼上 .html 回 Github Repo File
- 檔案名稱：輸入
index.html - Edit：貼上 ChatGPT 產生的 .html 內容，可以使用 ChatGPT 調整你要的 html 或是直接在這邊編輯 HTML 內容
- 點右上角「Commit changes…」
- 選擇「Commit directly to the main branch」
—
上傳資源檔案(例如：圖片)：
- 一樣點擊「Add file」選擇「Upload files」
- 拖曳或選擇檔案，等待上傳完成
- 點擊「Commit changes」
- 完成
6. 等待部署
如同前述，Github Pages 需要部署，不是存檔就會出現；我們可以點 Repo 上方的「Actions」查看部署進度，直到橘燈🟠變成綠色勾勾✅代表部署完成了。
7. 查看成果
https://zhgchgli0718.github.io/
- 前往：
https://你的帳號.github.io查看成果
Github Pages 自訂網域教學
再來才是本篇重點，Github Page 自訂網域，如前述，預設我們只能使用 你的帳號.github.io 做為你的靜態網站主網域；如果是其他 Repo 還只能透過 /路徑 訪問，沒辦法創造第二個 *.github.io 。
但 Github Pages 佛心的事是提供自訂網域功能。
⭐️⭐️⭐️ 購買的網域同時也能用在： Medium 自訂網域功能。
例如我的網域：
1. https://zhgchg.li -> 用在 Github Pages Jekyll Blog
2. https://blog.zhgchg.li -> 用在我的 Medium 頁面
1. 購買＆取得域名 by Namecheap (老牌網域大廠)
首先到 Namecheap 官網首頁 搜尋喜歡的域名：
得到搜尋結果：
右邊按鈕顯示「 Add To Cart 」代表該域名還沒有人註冊，可以加入購物車購買。
如果右邊按鈕顯示「 Make offer 」、「 Taken 」代表該域名已被註冊，請選擇其他後綴或換個域名：
加入購物車後點擊下方「 Checkout 」。
進入訂單確認頁：
- Domain Registration ：這邊可以選擇
AUTO-RENEW每年自動續費，也可以改要一次購買的年數。 - WhoisGuard ：由於 網域資料可以公開讓任何人自由查詢 （註冊時間、到期日、註冊人、聯繫方式）；此功能可以將註冊人及聯繫方式改為顯示 Namecheap，而非直接顯示你的個人資料，可以防止垃圾郵件訊息。 （此功能部分後綴是要收費的，如果是免費的話就用吧！）
擷取一些 google.com 的 whois 訊息結果，可 由此查詢 。
- PremiumDNS ：我們知道域名等於門牌，也就是說看到門牌會去找位置在哪；這個功能就是提供更穩定安全的「找位置在哪」功能，我是覺得不必，除非是一點錯誤都不能出的高流量電商網站之類。
輸入完信用卡資訊點「 Confirm Order 」
之後就購買成功囉！
會收到一封訂單明細信件。
2. 網域設定by Namecheap
前往 Account -> Dashboard:
找到你要設定的網域 -> 右邊點擊「Manage」:
確定 Domain -> NAMESERVERS -> 選擇「Namecheap BasicDNS」：
切換到「Advanced DNS」-> 加入 A Record：
- 點擊「ADD NEW RECORD」
- Type 選擇「A Record」
- Host 輸入「
@」 - Value 依序輸入：
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
四筆紀錄。
- 每一筆輸入完就點「✔️」儲存設定。
- 完成。
3. 依照想設定的 Github Pages Repo 加入 CNAME Record：
- 點擊「ADD NEW RECORD」
- Type 選擇「CNAME Record」
- Host 輸入，看你希望的 subdomain，如果希望是一級網域則輸入「
www」 - Value 輸入：
你的帳號.github.io
4. 回到 Github Repo 設定
- Github Repo -> Settings -> Pages
- Custom domain：輸入
你的網域(若為www.可省略) - 點擊 Save
- 可以勾選強制使用 HTTPS 增加訪問安全性。
等待 DNS Check…
通常在五分鐘內能確認，但依照 DNS 機制最長可能需要 72 小時設定才會生效， 如果確定步驟沒錯但一直確認失敗不妨過幾天再回來試試。
設定成功！
前往你的網域驗證結果：
成功！🎉🎉🎉 現在我們不用在使用舊的 https://你的帳號.github.io 訪問你的 Github Pages，可以直接使用 https://你的網域 進行訪問囉！
其他 Repo 的 Github Pages 也可以透過
https://你的網域/Repo 名稱進行訪問。
其他文章
Medium 自訂網域
無痛轉移 Medium 到 Github Pages
留言 · Comments