前言

在我們使用 Github Pages 架設靜態網站時，常常都會看到 (github.io) 這種攏長的網址，那要如何擁有一個像平常一樣簡短又方便的域名呢，本篇文章將一步一步帶你了解如何從 Freenom 開始註冊並將域名套用到 Github Pages 上。

Freenom

Freenom官網：https://www.freenom.com

Freenom 註冊

Freenom 提供的免費網域有
- tk
- ml
- ga
- cf
- cq

進到 Freenom 官網後，於上方搜索欄輸入

1	`你想註冊的網域名稱.(tk/ml/ga/cf/cq)`

並點擊檢查可用性按鈕，本範例將以 weakcat.tk 作為示範。

確認可用後，點擊右上角付款，
接著選取 12 Months @ FREE 的選項。

並點選 Continue 繼續，
接著下方會出現註冊的選項，填選完後便會跑到下方頁面。

盡量使用英文填寫

完成後勾選 I have read and agree to the Terms & Conditions 並點擊 Complete Order，便註冊完成。

Cloudflare

Cloudflare官網：https://www.cloudflare.com/zh-tw

Cloudflare 註冊

進入官網後，點擊右上角註冊按鈕，並輸入郵件與信箱即可完成註冊。

Cloudflare 設置

點選左側 Website，並點選中央的 Add Site 按鈕。

輸入剛剛於 Freenom 註冊的網域，範例為 : weakcat.tk。並點選 Add Site。

選擇方案

選擇下方的 Free 方案，並點擊 Continue。

我們先不設定 DNS Records 因此點擊 Continue 和 Confirm。

Nameservers

複製上方兩段的 Nameservers，並回到 Freenom 域名頁面。

於 Management Tools 選單中，點選 Nameservers 選項。

選擇 Use custom nameservers 選項，並於下方輸入兩個 Cloudflare 指定的 Nameservers。
保存後回到 Cloudflare 頁面，點擊 Done, check nameservers。

接著點擊 Configuration recommendations。

點選右側的兩個 Apply recommendation 按鈕，並回到主畫面。

檢查 Nameservers 需要一些時間，不過我大概 5 分鐘就好了。
下圖為已驗證成功的範例。

Github Pages

接下來我們便要設置靜態網頁的部分，首先你會需要一個寫好的網頁。
以下為我使用的範例。

網頁 Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./style.css" />
    <title>WeakCat | 測試網站</title>
  </head>
  <body>
    <div class="wrapper">
      <h1 class="text">Hello World!</h1>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  text-align: center;
  font-size: 100px;
}

Github 倉庫

首先我們要創建一個新的倉庫來放我們網頁的檔案，名稱隨意，一定要設 Public。

接著依據指示在網頁資料夾中操作，並將檔案上傳到 Github 倉庫中。

git init
git add .
git commit -m "Basic Files"
git branch -M main
git remote add origin (https://github.com/CuteWhiteCat/test-website.git)
git push -u origin main

上傳完畢後，重新載入頁面，即可看到上傳完成的檔案。

Github Pages

接著點選頁面上方的 Settings，並點選左欄的 Pages。

在 Branch 欄位選擇 main 並點下 Save 按鈕。
等待幾分鐘後，刷新頁面，即可看到網頁成功部屬的信息。

Custom Domain

現在我們要設置自訂義域名的部分
首先回到 Cloudflare 頁面，並點選左欄的 DNS。

點擊 Add record 按鈕，並新增下列的 Records。

A - 185.199.108.153
A - 185.199.109.153
A - 185.199.110.153
A - 185.199.111.153
AAAA - 2606:50c0:8000::153
AAAA - 2606:50c0:8001::153
AAAA - 2606:50c0:8002::153
AAAA - 2606:50c0:8003::153
CNAME - www 用戶名.github.io.
[子域名新增 : (CNAME - 子域名名稱 用戶名.github.io.)]

如下圖。

接著回到 Github 倉庫 -> Settings -> Pages。
在 Custom domain 處，填上你的自訂義域名，範例為 : weakcat.tk。
點擊 Save 後，耐心等待一段時間。

等到網頁出現 ✔ DNS check successful 後，便能使用自訂義域名連上你的網站了!