為網頁加上 SSL 憑證 (Webpage with SSL)

為網頁加上 SSL 憑證 (Webpage with SSL)

由於 Github Pages 對自有域名不提供 SSL 證書,所以使用 CloudFlare 服務將網頁加上免費的 SSL 憑證。

SSL 原理

大致上來說 User 與 Server 進行溝通時會經過第三方 Cloudflare 進行加密認證,使機密資訊不再以明文來傳送。

Github Page 設定

新增 CNAME 檔案並填入自己購買的網域名稱,讓它自動導向所指定的網站。例如:Brain-Garden.tw。注意:前面不需要加 http://

CloudFlare 設定

首先要有 CloudFlare 的帳號,免費註冊。

  1. 新增網站域名

登入後,會出現 Add your site 頁面,輸入自己註冊的帳號,例如:Brain-Garden.tw。注意:前面不需要加 http://

Add-your-site

  1. 自動新增 DNS 紀錄

點擊 Add site 按鈕後,會出現 We’re querying your DNS records 頁面,點擊 Next 按鈕。

DNS-records

  1. 選擇方案

這裡我們選擇免費的方案,當然如果有更多經濟能力的人,可以升級成月費方案,功能更多。

Select-a-Plan

  1. 添加 Cloudflare Nameservers

Cloudflare 會提供給你兩組 Cloudflare Nameservers 來進行設定,每個人所獲得的名稱可能不一樣。

Cloudflare-Nameservers

“網路中文”網域註冊網站設定

到網域註冊網站(此例是”網路中文”)的 DNS 頁面添加 Cloudflare Nameservers。

備註:”網路中文”設定 Nameservers 時需要這兩個 server 的實際 IP 位址,而 Cloudflare 沒有給,所以自己去搜尋了一下,jeffmolly 這兩個 IP 位址分別是 173.245.59.124173.245.58.205

DNS-setting

回到 CloudFlare 設定 DNS

接著回到 Cloudflare 管理介面 -> DNS 頁面。

  • 加入 4 筆 Type 為 A,Name 為 @,IP 分別為 185.199.108.153185.199.109.153185.199.110.153185.199.111.153

  • 加入 1 筆 Type 為 CNAME,Name 為 www,IP 為 brain-garden.tw,功能是不論網址前面有無輸入 www 都會導向 brain-garden.tw。

CloudFlare-DNS-setting

回到 Cloudflare 管理介面 -> Crypto 頁面。

SSL 認證的形式選擇默認的 Flexible 即可。

Crypto-seeting

另外可將頁面滑至下方 Always Use HTTPS 設定開啟,可將連結強制導向 HTTPS,增加安全認證。

大功告成,靜待大約 30 分鐘等待網站解析生效。

可回到 Overview 頁面確認有無 Active、同時 Cloudflare 也會寄一封完成設定的通知信。

SSL 憑證確認

瀏覽個人網站,確認是否有綠色小鎖,即是完成 SSL 認證。

若無,可使用 Chrome 在個人網站頁面中按下 F12 進入管理人員介面,點選 Security,檢查是否認證成功,它會告訴你哪裡有外連且沒有 SSL 憑證的 http 網址,並嘗試修改它即可。

F12-Security

為網頁加上 SSL 憑證 (Webpage with SSL)

https://meowlucian.github.io/Webpage-with-SSL/

Author

Meow Lucian

Posted on

2018-11-26

Updated on

2022-07-04

Licensed under

Comments