前言

《手把手打造你的專屬部落格之二 — Hugo 網站上雲伺服器 CloudFlare Pages》 中,我們已經把網站上架到 Cloudflare Pages 了,接下來我們要來把網站網域名稱改成你專屬的名字。

1. 買網域

兩個選擇:

  1. CloudFlare 直接買,這應該最快最方便

    1. Account Home > Domains > + Add a domain

      cloudflare-add-a-domain.png

    2. 我們選底下 Register Domain

      cloudflare-register-domain.png

    3. 可以看到 domain names 列表

      cloudflare-list-domain-names.png

    4. 選定以後點 Confirm 就會進入付錢階段,後面我就省略,相信你可以靠自己!(其實是因為我沒有在 Cloudflare 買 XD

  2. 我選擇在 GoDaddy 買,因為我貪小便宜,阿不是,就是比價之後覺得直接在 GoDaddy 買比較便宜,然後就自找麻煩了,真的麻煩,如果你也想要便宜一點請三思。

    決定好想便宜一點就…

    先到 GoDaddy 選一個你喜歡的,然後買下去!這是我原本想用的名字,但好貴,買不下去。

    godaddy-buy-domain-price.png

    於是後來是買了 skyaching.com

    godaddy-buy-domain-2.png

    提到這兒就來講講部落格中各種名稱的意義吧!

    Sky + Ya + Ching

    天空 + 雅 + 青

    星星在這裡也是青青在這裡的諧音

    CyanSky 是青色的天空

    在你看完的同時我也買好惹,一共台幣 7215 元 10 年 XD

    godaddy-buy-domain-success.png

2. CloudFlare 加網域

  1. 登入 Cloudflare 控制台,Account Home > Domains > Add a domain (沒錯我們回到熟悉的這張圖)

    cloudflare-add-a-domain.png

  2. 這次在紅框框輸入你在 GoDaddy 購買的網域名稱

    cloudflare-add-a-domain-2.png

  3. 選擇「Free Plan」方案(免費版就足夠),點擊「Continue」。

    cloudflare-add-a-domain-choose-free-plan.png

  4. Cloudflare 會提供兩組名稱伺服器 (NS),等等會用到

    cloudflare-add-a-domain-nameservers.png

3. 修改 GoDaddy 的 DNS 設定

  1. 回到 GoDaddy 選擇「我的產品」

    godaddy-my-products.png

  2. 下拉點擊「網域」旁的「DNS」,進入 DNS 設定頁面。

    godaddy-dns-setting.png

  3. 在「名稱伺服器 (Nameservers)」區域中,點擊「變更名稱伺服器」。

    godaddy-change-nameservers.png

  4. 把上面 Cloudflare 提供的兩組名稱伺服器 (NS) 輸進去 > 儲存

    godaddy-change-nameservers-2.png

4. 在 Cloudflare Pages 綁定自訂網域

  1. 進入 Cloudflare Pages 控制台,選擇你已部署的網站。

    cloudflare-pages-select-site.png

  2. 選單點擊「自訂網域 (Custom Domains)」> Set up a custom domain

    cloudflare-pages-set-up-custom-domain.png

  3. 輸入你的網域 > continue > activate

    cloudflare-pages-set-up-custom-domain-2.png

    cloudflare-pages-set-up-custom-domain-3.png

  4. Cloudflare 會自動檢查 DNS 設定,約莫 48 小時的時間,確認網域已正確指向。但我大概只等了 1 分鐘,請忽略我匡的 Complete DNS setup,不用點進去設定,等就好惹。

    cloudflare-pages-set-up-custom-domain-4.png

  5. Active 後 Cloudflare 會自動配置 SSL/TLS。

    cloudflare-pages-set-up-custom-domain-5.png

5. 更改你的網站 config.yaml 的 baseURL

  1. 打開 config.yaml 找到 baseURL 這行,把原本的 https://examplesite.com/ 改成 https://skyaching.com/

    hugo-config-yaml-baseurl.png

  2. 儲存後重新部署網站

登愣~恭喜完成! 🎉

https://skyaching.com/

恭喜你擁有自定義網域名稱的部落格囉!