自架一個具有 SSL 認證的靜態網站
💻

自架一個具有 SSL 認證的靜態網站

Tags
Web
2021
Published
Published October 27, 2021

手把手教學

GitHub 申請帳號 & 建立一個 Repository

  1. 首先,先到 GitHub 去申請一個個個人帳號
    1. notion image
  1. 登入 GitHub 後,在頂部功能列上找到 + 並點選它,接著再點選 New repository,開啟一個新的專案
    1. notion image
  1. 在 Repository name 輸入 <username>.github.io,之後再將 Add a README file 打後,完成後直接滑到最下面按下 Create repository 即可
    1. notion image
  1. 完成後,找到 Settings 並點選
    1. notion image
  1. 在左欄功能欄位找到 Pages 並點選
    1. notion image
  1. 完成上述 5 個步驟後,我們會發現你已經使用 github.io 的網域成功生成你的網站了,好但事情還沒結束,我們要嘗試著去購買一個自己的網域,並且透過 GitHub 的 Custom domain 服務將 github.io 的網域改成自己購買的網域
    1. notion image

購買網域

  1. 接下來是購買網域的部分,購買網域其實很簡單,網路上也有滿多平台在販售網域的,這邊的話我推薦 2 家不錯的平台,一個是 GoDaddy,另一個是 Gandi,我自己是使用後者,所以等一下主要會以後者來做介紹
  1. 首先,先進入 Gandi 的網頁,進入後可以先註冊一下帳號,註冊的部分很簡單,我這邊就先直接略過了
  1. 註冊完成後應該會出現以下的畫面,接著我們點選域名,再接著點選購買
    1. notion image
  1. 之後可以輸入自己喜歡的域名,如果下面出現紅色的 ❌,代表該域名已經被其他人註冊過了,這樣的話只能再想一個更特別一些的域名了;如果出現購物籃則代表該域名可以被購買,那我們就按下購物籃的按鈕
      • 已被註冊
        • notion image
      • 尚未註冊,可購買
        • notion image
  1. 購買完後大約等待 5 - 10 分鐘,然後回到剛剛的域名介面,如果下面出現了你剛剛申請的域名,代表 Gandi 已經幫你開通完成,到這邊購買域名的部分就完成了
    1. notion image
網域申請技巧:該如何選擇網域名稱?7 個最佳域名申請技巧、費用與域名註冊商

將 Gandi 的名稱伺服器改設定到 Cloudflare 外部名稱伺服器

  1. 首先,不知道 SSL/TLS 是什麼的可以先到 NordVPN 提供的介紹看一下,不想知道的,這裡也可以簡單地告訴你,就是網址列那邊會看起來像安全的
      • 安全
        • notion image
      • 不安全
        • notion image
  1. 正式開始,先到 Cloudflare 官網,一樣需要先註冊帳號,註冊帳號的部分一樣略過
  1. 註冊完後登入,在頁面上點選新增網頁
    1. notion image
  1. 輸入你剛剛在 Gandi 申請的網域名稱,輸入完成點擊新增網站
    1. notion image
  1. 選擇方案,我們選擇免費 (真香),接著點選繼續
    1. notion image
  1. 接下來應該會到檢視您的 DNS 紀錄,這邊我們直接滑到最下面點選繼續即可
    1. notion image
  1. 複製兩個 Cloudflare 提供的名稱伺服器,然後回到 Gandi 域名介面後點選名稱伺服器,接著點選變更
    1. notion image
  1. 點選外部,然後把剛剛複製的兩個名稱伺服器分別貼到名稱伺服器 1 & 名稱伺服器 2,完成後點選儲存即可
    1. notion image
  1. 回到 Cloudflare,點選完成,請檢查名稱伺服器
  1. 進行快速入門手冊設定
      • 提高安全性
        • 自動改寫 HTTPS:打開
        • 一律使用 HTTPS:打開
      • 最佳化效能
        • 自動縮製:全部選項打勾
        • Brotli:打開
  1. 接著在概觀的介面按下 F5 直到出現以下畫面,代表 Cloudflare 設定完成
    1. notion image

<username>.github.io 改成自己的網域

  1. 回到 GitHub,開啟前面剛剛建立的專案,進入 Settings,並點選 Pages。接著在 Custom domain 的位置輸入自己購買的網域名稱,輸入完畢點選 Save
    1. notion image
  1. 這時我們會發現跑出配置不正確的訊息,不緊張,因為我們剛剛還沒有在 Cloudflare 那邊設定 DNS
    1. notion image
  1. 回到 Cloudflare,點選 DNS,選擇新增紀錄,然後將以下表格內容依序儲存到 Cloudflare 的 DNS 設定中,完成後可在下方列表中確認是否都有設定成功
    1. 類型
      名稱
      Ipv4 位址
      A
      @
      185.199.108.153
      A
      @
      185.199.109.153
      A
      @
      185.199.110.153
      A
      @
      185.199.111.153
  1. 接著點選 SSL/TLS,可以將預設的彈性選項改為完整選項
    1. notion image
  1. 最後再回到 GitHub,點擊 Check again,然後就會發現你自訂的域名旁邊就會出現綠色的 ✔ 啦
    1. notion image
      • 設定成功
        • notion image

後記

步驟看似複雜,但其實設定過程應該是滿快且不會有太多問題,如果有想要自己架網站打造個人品牌的你,不妨可以跟著手把手教學自己試試看。
除了網域的部分要付錢之外,其他簡直是免費仔的天堂 (其實真的滿便宜的,以我自己的例子來說,我買了一個 .tw 域名的網域一年含稅只要台幣 709 元,一天含稅只要台幣 1.94 大概台幣 2 元左右真香),相關費用及平台功能如下:
平台
費用
功能
GitHub
免費,學生黨還可以用學校信箱申請免費 Pro 帳號
當作網站資料庫使用
Gandi
依網域名稱以及使用年限付費
購買網域使用
Cloudflare
免費,如果只是想要讓網頁看起來像安全的話 (SSL/TLS)
網站可以免費獲得 SSL/TLS 憑證
好,我知道接下來應該會有人想問,那如果我想要在自己購買的網域下面分很多不同的子網域,那要如何設定?期待之後的文章吧!