Update fetched posts.

_posts/zmediumtomarkdown/2021-02-23-d9a95d4224ea.md

@@ -2,7 +2,7 @@
 title: "Medium 自訂網域功能回歸"
 author: "ZhgChgLi"
 date: 2021-02-23T18:25:15.743+0000
-last_modified_at: 2024-09-13T09:32:51.213+0000
+last_modified_at: 2024-09-22T09:16:55.922+0000
 categories: "ZRealm Life."
 tags: ["medium","生活","domain-names","domain-authority","domain-registration"]
 description: "自己的 Domain Authority 自己養！"
@@ -132,6 +132,22 @@ Medium 官方部落格於 2021/02/17 發布最新消息，Medium 又能重新讓
 
 
 ### 開始設定
+
+
+> _⭐️⭐️⭐️ **購買的網域同時也能用在： [Github Pages](../483af5d93297/)**_ 
+ 
+
+> _**例如我的網域：**_ 
+ 
+
+> _**1\. [https://zhgchg\.li](https://zhgchg.li/){:target="_blank"} \-> 用在 Github Pages Jekyll Blog**_ 
+ 
+
+> _**2\. [https://blog\.zhgchg\.li](https://blog.zhgchg.li/){:target="_blank"} \-> 用在我的 Medium 頁面**_ 
+
+
+
+
 #### 1\. 購買＆取得域名 \(以 [Namecheap](https://namecheap.pxf.io/P0jdZQ){:target="_blank"} 為例\)
 
 首先到 [**Namecheap 官網首頁**](https://namecheap.pxf.io/P0jdZQ){:target="_blank"} 搜尋喜歡的域名：
@@ -309,7 +325,7 @@ Medium 官方部落格於 2021/02/17 發布最新消息，Medium 又能重新讓
 
 是說如果取消付費會員…那會？直接失效？
 ### 延伸閱讀
-- [\[生產力工具\] 拋棄 Chrome 投入 Sidekick 瀏覽器的懷抱](../118e924a1477/)
+- [Github Pages 自訂網域教學](../483af5d93297/)
 
 
 

_posts/zmediumtomarkdown/2024-09-22-483af5d93297.md

@@ -0,0 +1,351 @@
+---
+title: "Github Pages 自訂網域教學"
+author: "ZhgChgLi"
+date: 2024-09-22T09:14:16.987+0000
+last_modified_at: 2024-09-22T09:14:16.987+0000
+categories: "ZRealm Dev."
+tags: ["ios-app-development","github-pages","github","domain-names","namecheap"]
+description: "使用你的網域替代原本的 github.io 網址"
+image:
+  path: /assets/483af5d93297/1*_bBRBsmMwiXzqQcg5Yi3Xg.png
+render_with_liquid: false
+---
+
+### Github Pages 自訂網域教學
+
+使用你的網域替代原本的 github\.io 網址
+
+
+
+![](/assets/483af5d93297/1*_bBRBsmMwiXzqQcg5Yi3Xg.png)
+
+### 關於 Github Pages
+
+Github Pages 是由 Github 提供的免費靜態頁面寄存服務，所有 Github Free 帳號只要是 Public Repo 都能直接使用，如果是 Private Repo 則須先付費升級 Github 帳號。
+
+[**ZhgChgLi**](https://zhgchg.li/){:target="_blank"} 
+[_ZhgChgLi iOS Developer 求知若渴 教學相長 更愛電影/美劇/西音/運動/生活_ zhgchg\.li](https://zhgchg.li/){:target="_blank"}
+- [**我使用 Github Pages 部署的 Jekyll Blog。**](../a0c08d579ab1/)
+
+#### 限制
+- **只能寄存靜態檔案資源：** 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/](https://github.com/){:target="_blank"}
+
+
+![](/assets/483af5d93297/1*AWJjqtN7jWzU5uE7ai5e_w.png)
+
+- 登入 Github 後選擇右上角「\+」\->「New repository」
+
+
+**2\. 輸入 Repo 名稱、設定**
+
+
+![](/assets/483af5d93297/1*HikxROUiwY-unNTkko7wmg.png)
+
+- 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：**
+
+
+![](/assets/483af5d93297/1*1MS1TF_dBhIjbucdPtKeLQ.png)
+
+
+例如我的 Repo `zhgchgli0718/testgithubpage` 也想有 Github Pages 頁面。
+- Settings \-> Pages \-> Branch \-> 選擇 `main/root` \-> Save
+- 完成
+
+
+**3\. 建立你的首頁 \.html 檔案**
+
+
+![](/assets/483af5d93297/1*btn5FNExpGf6FiXUUCRlJw.png)
+
+- 在 Repo 首頁點擊右上角綠色按鈕「Code」
+- 選擇「\+ Create new file」
+
+
+**4\. 使用 ChatGPT 協助您產生頁面 \.html 檔案**
+
+
+![](/assets/483af5d93297/1*tvwd45V40bBPubjxlGjc0Q.png)
+
+- 這邊用最簡單的 Prompt： `產生一個賽博龐克風的 歡迎頁面 (.html)`
+
+
+**5\. 貼上 \.html 回 Github Repo File**
+
+
+![](/assets/483af5d93297/1*xo63qU5B2YaNLocUKYk6Tg.png)
+
+- 檔案名稱：輸入 `index.html`
+- Edit：貼上 ChatGPT 產生的 \.html 內容，可以使用 ChatGPT 調整你要的 html 或是直接在這邊編輯 HTML 內容
+- 點右上角「Commit changes…」
+
+
+
+![](/assets/483af5d93297/1*xFvZr53ya-ro5jGWMReetw.png)
+
+- 選擇「Commit directly to the main branch」
+
+
+—
+
+**上傳資源檔案\(例如：圖片\)：**
+
+
+![](/assets/483af5d93297/1*18jHExnTWsy9Ke6mRYnY3g.png)
+
+- 一樣點擊「Add file」選擇「Upload files」
+
+
+
+![](/assets/483af5d93297/1*2t3UqjiPF6ASCnkFDODARg.png)
+
+- 拖曳或選擇檔案，等待上傳完成
+- 點擊「Commit changes」
+- 完成
+
+
+**6\. 等待部署**
+
+
+![](/assets/483af5d93297/1*zvl-DsfQ6Cm1Q6RsmVT6Yg.png)
+
+
+如同前述，Github Pages 需要部署，不是存檔就會出現；我們可以點 Repo 上方的「Actions」查看部署進度，直到橘燈🟠變成綠色勾勾✅代表部署完成了。
+
+**7\. 查看成果**
+
+
+![[https://zhgchgli0718\.github\.io/](https://zhgchgli0718.github.io/){:target="_blank"}](/assets/483af5d93297/1*yw7Cxc2g1Vuu5LXeJtdiaQ.png)
+
+[https://zhgchgli0718\.github\.io/](https://zhgchgli0718.github.io/){:target="_blank"}
+- 前往： `https://你的帳號.github.io` 查看成果
+
+### Github Pages 自訂網域教學
+
+再來才是本篇重點，Github Page 自訂網域，如前述，預設我們只能使用 `你的帳號.github.io` 做為你的靜態網站主網域；如果是其他 Repo 還只能透過 `/路徑` 訪問，沒辦法創造第二個 `*.github.io` 。
+
+但 Github Pages 佛心的事是提供自訂網域功能。
+
+
+> _⭐️⭐️⭐️ **購買的網域同時也能用在： [Medium 自訂網域功能。](../d9a95d4224ea/)**_ 
+ 
+
+> _**例如我的網域：**_ 
+ 
+
+> _**1\. [https://zhgchg\.li](https://zhgchg.li){:target="_blank"} \-> 用在 Github Pages Jekyll Blog**_ 
+ 
+
+> _**2\. [https://blog\.zhgchg\.li](https://blog.zhgchg.li){:target="_blank"} \-> 用在我的 Medium 頁面**_ 
+
+
+
+
+#### 1\. 購買＆取得域名 by [Namecheap](https://namecheap.pxf.io/P0jdZQ){:target="_blank"} \(老牌網域大廠\)
+
+首先到 [**Namecheap 官網首頁**](https://namecheap.pxf.io/P0jdZQ){:target="_blank"} 搜尋喜歡的域名：
+
+
+![](/assets/483af5d93297/0*vld4-LhAOn_mUePY.png)
+
+
+得到搜尋結果：
+
+
+![](/assets/483af5d93297/0*UQWz2VtwT0rCm9hN.png)
+
+
+右邊按鈕顯示「 **Add To Cart** 」代表該域名還沒有人註冊，可以加入購物車購買。
+
+如果右邊按鈕顯示「 **Make offer** 」、「 **Taken** 」代表該域名已被註冊，請選擇其他後綴或換個域名：
+
+
+![](/assets/483af5d93297/0*jzCHxEtG2okTIdbD.png)
+
+
+加入購物車後點擊下方「 **Checkout** 」。
+
+
+![](/assets/483af5d93297/0*Tvb8fycvFDLvWmhT.png)
+
+
+進入訂單確認頁：
+
+
+![](/assets/483af5d93297/0*4eFcBpYLqu23fQRs.png)
+
+- **Domain Registration** ：這邊可以選擇 `AUTO-RENEW` 每年自動續費，也可以改要一次購買的年數。
+- **WhoisGuard** ：由於 [網域資料可以公開讓任何人自由查詢](https://www.namecheap.com/domains/whois/result?domain=google.com){:target="_blank"} （註冊時間、到期日、註冊人、聯繫方式）；此功能可以將註冊人及聯繫方式改為顯示 Namecheap，而非直接顯示你的個人資料，可以防止垃圾郵件訊息。
+（此功能部分後綴是要收費的，如果是免費的話就用吧！）
+
+
+
+![](/assets/483af5d93297/0*MQhqVKOO87jrZAwU.png)
+
+
+擷取一些 google\.com 的 whois 訊息結果，可 [由此查詢](https://www.namecheap.com/domains/whois/result?domain=google.com){:target="_blank"} 。
+- **PremiumDNS** ：我們知道域名等於門牌，也就是說看到門牌會去找位置在哪；這個功能就是提供更穩定安全的「找位置在哪」功能，我是覺得不必，除非是一點錯誤都不能出的高流量電商網站之類。
+
+
+輸入完信用卡資訊點「 **Confirm Order** 」
+
+
+![](/assets/483af5d93297/0*NnkfIWDI3cXAy3fb.png)
+
+
+之後就購買成功囉！
+
+
+![](/assets/483af5d93297/0*7b_k2vD6eq_sfzhL.png)
+
+
+會收到一封訂單明細信件。
+#### 2\. 網域設定by [Namecheap](https://namecheap.pxf.io/P0jdZQ){:target="_blank"}
+
+**前往 Account \-> Dashboard:**
+
+
+![](/assets/483af5d93297/1*-nRJD_NBNnZ8sKQ1seiN_g.png)
+
+
+**找到你要設定的網域 \-> 右邊點擊「Manage」:**
+
+
+![](/assets/483af5d93297/1*n21OVNYOLAmVo0IPQfd0Xw.png)
+
+
+**確定 Domain \-> NAMESERVERS \-> 選擇「Namecheap BasicDNS」：**
+
+
+![](/assets/483af5d93297/1*CrFnWTziy7dqN2oyKKJNJw.png)
+
+
+**切換到「Advanced DNS」\-> 加入 A Record：**
+
+
+![](/assets/483af5d93297/1*cNUi0umLgBok9iVUOq_aHg.png)
+
+- 點擊「ADD NEW RECORD」
+- Type 選擇「A Record」
+- Host 輸入「 `@` 」
+- Value 依序輸入：
+
+```typescript
+185.199.108.153
+185.199.109.153
+185.199.110.153
+185.199.111.153
+```
+
+四筆紀錄。
+- 每一筆輸入完就點「✔️」儲存設定。
+- 完成。
+
+#### **3\. 依照想設定的 Github Pages Repo 加入 CNAME Record：**
+
+
+![](/assets/483af5d93297/1*aAaTi1I4XTiBEFnCGTCROg.png)
+
+- 點擊「ADD NEW RECORD」
+- Type 選擇「CNAME Record」
+- Host 輸入，看你希望的 subdomain，如果希望是一級網域則輸入「 `www` 」
+- **Value 輸入：** `你的帳號.github.io`
+
+#### 4\. 回到 Github Repo 設定
+
+
+![](/assets/483af5d93297/1*xUobtPbk9ANjQe-lxkk9-A.png)
+
+- Github Repo \-> Settings \-> Pages
+- Custom domain：輸入 `你的網域` \(若為 `www.` 可省略\)
+- 點擊 Save
+
+
+
+![](/assets/483af5d93297/1*9gEaGg42dPF4Y_LLEV1OuQ.png)
+
+- 可以勾選強制使用 HTTPS 增加訪問安全性。
+
+
+**等待 DNS Check…**
+
+
+![](/assets/483af5d93297/1*83LhzPdw5Q_nNzwLN6uNJQ.png)
+
+
+
+> _通常在五分鐘內能確認，但依照 DNS 機制最長可能需要 72 小時設定才會生效， **如果確定步驟沒錯但一直確認失敗不妨過幾天再回來試試。**_ 
+
+
+
+
+
+**設定成功！**
+
+
+![](/assets/483af5d93297/1*a6UNks-WrsblHlKkrPDJBg.png)
+
+
+**前往你的網域驗證結果：**
+
+
+![](/assets/483af5d93297/1*4-K0Wu_c5klEVNuRGf4tqA.png)
+
+
+成功！🎉🎉🎉 現在我們不用在使用舊的 `https://你的帳號.github.io` 訪問你的 Github Pages，可以直接使用 `https://你的網域` 進行訪問囉！
+
+
+> _其他 Repo 的 Github Pages 也可以透過 `https://你的網域/Repo 名稱` 進行訪問。_ 
+
+
+
+
+#### 其他文章
+#### [Medium 自訂網域](../d9a95d4224ea/)
+
+
+![[Medium 自訂網域](../d9a95d4224ea/)](/assets/483af5d93297/0*lkT78NQx-lmpqIMi.png)
+
+[Medium 自訂網域](../d9a95d4224ea/)
+#### [無痛轉移 Medium 到 Github Pages](../a0c08d579ab1/)
+
+
+![[無痛轉移 Medium 到 Github Pages](../a0c08d579ab1/)](/assets/483af5d93297/0*Fz-6sSyGEazPXxDE.png)
+
+[無痛轉移 Medium 到 Github Pages](../a0c08d579ab1/)
+
+
+有任何問題及指教歡迎 [與我聯絡](https://www.zhgchg.li/contact){:target="_blank"} 。
+
+
+
+_[Post](https://medium.com/zrealm-ios-dev/github-pages-%E8%87%AA%E8%A8%82%E7%B6%B2%E5%9F%9F%E6%95%99%E5%AD%B8-483af5d93297){:target="_blank"} converted from Medium by [ZMediumToMarkdown](https://github.com/ZhgChgLi/ZMediumToMarkdown){:target="_blank"}._