Custom Domain - 從零到有，成功建置 viiisit.com!

OMG!!! 終於成功了！（灑花～
過程真的一波三折，但是看到成功的瞬間，內心真的灑下一百種花，先為自己鼓掌一下！！！

這裡分享以 Hexo + GitHub Pages + gandi + Cloudflare 上架！

before_action :mindset

一開始我只是單純使用 Hexo 來建置自己的部落格，再透過 GitHub Pages 將靜態網頁呈現。
但，單純使用 GitHub Pages 是指直接將靜態網站文件（例如 HTML、CSS、JavaScript 文件）部署到 GitHub 上，並使用 GitHub Pages 呈現。

GitHub Pages 提供一個簡單且免費的方式來部署和發佈靜態網站，但它主要針對單純的靜態網站內容。

因此，在這次的過程裡，了解到：將 GitHub Pages 與 Cloudflare 的代管服務結合使用時，可以獲得 CDN 加速、安全防護、SSL/TLS 加密和性能優化等額外的優勢。有助於提升網站的性能、安全性和可用性，並提供更好的用戶體驗。

其實 gandi 也有網頁代管服務，但是 cloudflare 在服務範圍、全球網絡、免費方案的特色下，比較符合我現階段的需求，且資源豐富也容易上手。

梳理完建置前的小知識，回歸正題！

要將 GitHub Pages 的部落格更改為自己購買的網域，需要完成以下步驟：

1. 綁定網域：首先要將所購買的網域與部落格網站綁定。這通常要在所選擇的網域註冊商或 DNS 服務提供商的管理界面進行設定，且需要創建兩個 DNS 紀錄（A 紀錄和 CNAME 紀錄），將自己的網域指向自己的部落格網站的 IP 地址或域名。

2. 更新 Hexo 配置：在 Hexo 的設置文件中更新網站的 URL。打開您的 Hexo 項目中的 _config.yml 文件，尋找 URL 選項，將其值修改為自己購買的網域名稱。

3. 重新生成網站：修改完 _config.yml 文件後，在 Terminal 裡，執行 hexo clean （清除緩存），然後執行 hexo generate （重新生成網站的靜態文件）。

4. 部署網站：最後，在 Terminal 裡，執行 hexo deploy （我是用 GitHub Pages 部署）

完成上述步驟後，部落格網址應該已成功更改為自己購買的網域。
但！DNS 設置需要一些時間生效（DNS 傳播時間），等待一段時間才能在全球範圍內看到更改後的結果。

萬事起頭難，最難真的是第一步綁定網域的部分!
因此，以下整理出我透過 gandi + Cloudflare 的設置流程：

gandi 購買網域

要先購買網域才有辦法綁定自己想要的網域！

透過龍哥的介紹，根本跳過前面爬文篩選可以買網域的關卡 ୧ʕ•̀ᴥ•́ʔ୨
直接使用 gandi 作為我購買人生第一個網域的地方！

• 進入 gandi 註冊帳號，如同常見的註冊方式，輸入資訊並驗證信箱，回到 gandi 就正式來買網域囉！
• 前往 gandi 首頁，在搜索欄輸入想要的單字或是網域名，進行搜索，如果沒有人使用過，就會顯示出數種可以用的網域名，其中包括 .me .com .tw，依據每個域名而有不同的價格，可以依照個人需求挑選。
• 選購且付款成功之後，gandi 會寄送相關信件。

接著搭配 cloudflare 來綁定自己的網域

cloudflare 綁定自己的網域

透過在 gandi 買完的網域名稱，要來使用 cloudflare 來管理。

我跟著 小豆說故事 的步驟，完成把自己購買好的網域交由 cloudflare 來管理！

• 進入 cloudflare 註冊帳號，如同常見的註冊方式，輸入資訊並驗證信箱。
• 接著就會需要輸入你想透過 cloudflare 保護的網域名稱，也就是先前購買好的網域。
• 選擇 cloudflare 免費方案 （對目前的我來說滿夠用），依照小豆說故事的步驟，
  會看到有兩個由 cloudflare 提供的 DNS Server 名稱，
  分別複製 Cloudflare 的兩個名稱伺服器，再另開分頁，進入 gandi。
• 點選域名 -> 名稱伺服器 -> 變更伺服器名稱，分別將兩個 cloudflare 提供的伺服器名稱貼上，成功更新名稱伺服器之後，回到 cloudflare。
• 點選完成檢查名稱伺服器按鈕，他會導向到快速設定畫面，先點稍後設定，
  跳轉到下一畫面之後，按下檢查名稱伺服器 Check nameservers，
  請求 Cloudflare 檢查名稱伺服器的變更。
• 接著就是等待 DNS 設置了！（可能需要 24 小時）
• DNS 設置完成後，coudfalre 綁好的網域應該會有 Active 或 使用中 字樣，這樣就綁定成功了！

等待 DNS 設置好之後，如果跟我一樣是用 GitHub Pages 來部署的話，可以在 cloudflare 的 DNS 紀錄頁面中，新增以下 DNS Records:

• 新增兩個 A Records，指向 GitHub IP
  • Type: A Name: 購買的網域名稱 IPv4 address: 192.30.252.153
  • Type: A Name: 購買的網域名稱 IPv4 address: 192.30.252.154
• 新增 CNAME
  • Type: CNAME Name: www IPv4 address: Github帳號名稱.github.io

另外，可以到 SSL/TLS 頁面加密模式勾選為 完整，再到邊緣憑證頁面，將一律使用 HTTPS 打開。

GitHub Settings

接著終於來到最後一部分了，設置自己的網域到 GitHub Pages 上！
GitHub Pages 要如何設定，可以透過 GitHub 提供的 Creating a GitHub Pages site 來設定

• 進入 GitHub Repository: Github帳號名稱.github.io
  (當初我是直接用 Github帳號名稱.github.io 來建立 GitHub Pages)
• 點擊 Settings，尋找左邊欄位的 Pages，並在 Custom domain 裡填入已經設置成功的網域名
• 等待 GitHub 檢查 DNS 就可以成功使用囉～～～！

♡˙︶˙♡（內心歡呼！）♡˙︶˙♡

---

參考資料：
➫ 小豆說故事
➫ 從無到有的 Blog 建置教學 (含 domain 購買轉址)
➫ 如何使用 Hexo + Github Page 用 Cloudflare 綁定個人網址
➫ [DNS 管理系統] 各種記錄的設定方式