Github Pages 自訂網域教學

Github Pages 自訂網域教學

使用你的網域替代原本的 github.io 網址

關於 Github Pages

Github Pages 是由 Github 提供的免費靜態頁面寄存服務，所有 Github Free 帳號只要是 Public Repo 都能直接使用，如果是 Private Repo 則須先付費升級 Github 帳號。

ZhgChgLi ZhgChgLi iOS Developer 求知若渴 教學相長 更愛電影/美劇/西音/運動/生活 zhgchg.li

• 我使用 Github Pages 部署的 Jekyll Blog
• 無痛轉移 Medium 到 Github Pages ➡️➡️➡️

限制

• 只能寄存靜態檔案資源： 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.io Repo -> 你的帳號.github.io
• 你的帳號/mywebdemo Repo -> 你的帳號.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 自訂網域

無痛轉移 Medium 到 Github Pages

無痛轉移 Medium 到 Github Pages

有任何問題及指教歡迎 與我聯絡 。

===

View the English version of this article here.

本文首次發表於 Medium ➡️ 前往查看