前言

在 《手把手打造你的專屬部落格之二 — 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/

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