← Writing

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

OMG!!! 終於成功了!(灑花~ _過程真的一波三折,但是看到成功的瞬間,內心真的灑下一百種花,先為自己鼓掌一下!!!_ 這裡分享以 Hexo + GitHub Pages + gandi + Cloudflare 上架! before_action :mindset 一開始我只是單純使用 Hex...

dnshexogithub pages

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 管理系統] 各種記錄的設定方式