Gitlab使用自訂域名搭配Cloud Flare免費升級成https

前言

Google chrome 在 2018/02 的更新中提到

針對http連線的的網站,將標記為不安全!

chrome_insecure_connection

若要繼續瀏覽,則需按到進階 > 繼續前往 XXXXXXX網站(不安全)

對於一般企業來說,就是乖乖花錢註冊一個憑證升級成 https 就好

但對於個人用的 blog,註冊域名已經是一筆錢,https 又要再一筆

若非營利為目的,每年這樣繳,說實在也是一筆經費

好在現在有免費的 https 讓個人用的 domain 升級成 https

讓連到自己 blog 的人,不會跳出這種不安全的警告

免費的 https 供應商

目前免費提供 https 的有兩家

https 供應商 介紹 主機是否必須安裝憑證?
Lets encrypt 每 90 天需更新憑證,有套件可以自動檢查更新。 需在主機上安裝 ssl 憑證
cloudFlare 每半年更新憑證。 將 domain 託管至 cloudFlare 後,可以不必安裝憑證(不完全安全,但至少可以避免掉 chrome 跳出的不安全連線問題),原理是 cloudflare 再包一層 https 至您的主機。另也可以在主機上安裝憑證做到真正的 https
  • 僅只是做為 blog 使用來講,不會輸入什麼敏感性的資訊,https 是非必要的
  • 但 chrome 的不安全警告,反而搞得自己的 blog 好像很危險一樣
  • 以 SEO 來說,Google 對於非 https 的排名也會放在後面

所以還是建議盡快升級成https

cloudFlare 說明

在開始作業之前,先針對 cloud flare 上的Flexible SSLFull SSLFull SSL(strict)做個說明

不論選擇哪一個,User端看到的都會是https的綠色鎖頭。chrome也不會跳出不安全的網站

cloudFlare_Flexible_SSL

不必安裝憑證、server 上不需要任何變動,最基本的 https 轉址。Server 與 cloudFlare 之間沒加密

cloudFlare_SSL

全程 SSL 加密連線。需安裝 SSL 憑證在 Server 上,SSL 憑證可以是自己簽的或是由第三方公正單位發下來的

cloudFlare_SSLstrict

全程 SSL 加密連線。需安裝 SSL 憑證在 Server 上,但 SSL 憑證需由第三方公正單位發下來,不可以是自簽的


若是跟著我的作法一路過來的話,blog 應該也是架在 Gitlab 上

Gitlab 本身已經弄好憑證,可以全程走 SSL(即 cloud flare 上的 Full SSL(strict)),做到真正完全安全的瀏灠!

只需要將 domain 託管到 cloudflare 後,在 Gitlab page 頁面設定完,就可以輕鬆升級成 https!

從 Gitlab 官方文件也可以看到:

It works fine with the encryption set to “Full” or “Full (strict)” on CloudFlare:

cloudFlare with gitlab

作法

部份圖片直接引用 cloudflare 或 gitLab

  1. 申請好自己的 domain (我是在 go daddy 申請的)
    1. go daddy 現在有繁體中文的頁面。要注意的是,註冊時填的資料仍需填英文(英文名字、地址),不然會註冊不了
  2. 註冊 cloud flare
  3. 登入後應該會看到 cloud flare 跳出 2 個網址,就是 Name Server(網域名稱伺服器),到域名申請商(go daddy)中,將這 2 個網址輸入進去
    1. 由於 GO DADDY 已經有繁體頁面,在託管頁面看到的會是 NS,就是指網域名稱服務器
    2. godaddy_ns
    3. 如果本來就有設定一些指向的話,回到 cloud flare,會看到將現有的設定匯到 cloud flare
  4. 到 cloud flare 的 DNS 頁面
    1. 新增一筆 A Record,name 是您的域名。value 則是指向 gitlab 的 Server。即52.167.214.135
    2. 新增一筆 CNAME,name 輸入blog,domain 輸入<<您的帳號>>.gitlab.io(即 page 的對外網址)
  5. 到 cloud flare 的 Crypto 頁面
    1. 產生憑證createCert
    2. 箭頭處輸入自己的域名。即https://blog.tyerart.cccreateCert2
  6. 接著到 Gitlab,blog project 的後台。點左方的SettingsPagesNew Domain
    1. domain輸入您的域名,以我為例則輸入https://blog.typeart.cc,記得是寫https
    2. gitlab_page_domain
    3. Cloudflare 頁面並沒有提供 root 憑證,但 gitlab 上需要輸入。可以到CloudFlare Origin CA — RSA Root這裡複製,直接加在 certificate (PEM)後面,中間要空一行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
-----BEGIN CERTIFICATE-----
MIID/DCCAuagAwIBAgIID+rOSdTGfGcwCwYJKoZIhvcNAQELMIGLMQswCQYDVQQG
EwJVUzEZMBcGA1UEChMQQ2xvdWRGbGFyZSwgSW5jLjE0MDIGA1UECxMrQ2xvdWRG
bGFyZSBPcmlnaW4gU1NMIENlcnRpZmljYXRlIEF1dGhvcml0eTEWMBQGA1UEBxMN
U2FuIEZyYW5jaXNjbzETMBEGA1UECBMKQ2FsaWZvcm5pYTAeFw0xNDExMTMyMDM4
NTBaFw0xOTExMTQwMTQzNTBaMIGLMQswCQYDVQQGEwJVUzEZMBcGA1UEChMQQ2xv
dWRGbGFyZSwgSW5jLjE0MDIGA1UECxMrQ2xvdWRGbGFyZSBPcmlnaW4gU1NMIENl
cnRpZmljYXRlIEF1dGhvcml0eTEWMBQGA1UEBxMNU2FuIEZyYW5jaXNjbzETMBEG
A1UECBMKQ2FsaWZvcm5pYTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB
AMBIlWf1KEKR5hbB75OYrAcUXobpD/AxvSYRXr91mbRu+lqE7YbyyRUShQh15lem
ef+umeEtPZoLFLhcLyczJxOhI+siLGDQm/a/UDkWvAXYa5DZ+pHU5ct5nZ8pGzqJ
p8G1Hy5RMVYDXZT9F6EaHjMG0OOffH6Ih25TtgfyyrjXycwDH0u6GXt+G/rywcqz
/9W4Aki3XNQMUHNQAtBLEEIYHMkyTYJxuL2tXO6ID5cCsoWw8meHufTeZW2DyUpl
yP3AHt4149RQSyWZMJ6AyntL9d8Xhfpxd9rJkh9Kge2iV9rQTFuE1rRT5s7OSJcK
xUsklgHcGHYMcNfNMilNHb8CAwEAAaNmMGQwDgYDVR0PAQH/BAQDAgAGMBIGA1Ud
EwEB/wQIMAYBAf8CAQIwHQYDVR0OBBYEFCToU1ddfDRAh6nrlNu64RZ4/CmkMB8G
A1UdIwQYMBaAFCToU1ddfDRAh6nrlNu64RZ4/CmkMAsGCSqGSIb3DQEBCwOCAQEA
cQDBVAoRrhhsGegsSFsv1w8v27zzHKaJNv6ffLGIRvXK8VKKK0gKXh2zQtN9SnaD
gYNe7Pr4C3I8ooYKRJJWLsmEHdGdnYYmj0OJfGrfQf6MLIc/11bQhLepZTxdhFYh
QGgDl6gRmb8aDwk7Q92BPvek5nMzaWlP82ixavvYI+okoSY8pwdcVKobx6rWzMWz
ZEC9M6H3F0dDYE23XcCFIdgNSAmmGyXPBstOe0aAJXwJTxOEPn36VWr0PKIQJy5Y
4o1wpMpqCOIwWc8J9REV/REzN6Z1LXImdUgXIXOwrz56gKUJzPejtBQyIGj0mveX
Fu6q54beR89jDc+oABmOgg==
-----END CERTIFICATE-----
  1. cloudflare_on_gitlab_rootCert
  2. 按下Create New Domain。至此算建立完成!
  3. 接著要驗證域名是否為您所擁有,在 pages 頁面下方新建立的域名,點detail
    verify_domain
  4. 需將Verification status的訊息,於 cloud flare 的 dns 頁面中新增一筆 TXT Record 作為驗證
    1. 回到 Cloud flare 的 dns 頁面
    2. 新建一筆 TXT Record,name輸入剛剛 gitlab 中Verification status裡的TXT前面;valueTXT的後面
    3. 驗證成功後,會看到頁面變成綠色的Verified
    4. 靜待 dns 生效!我大概不到 5 分鐘就生效了!
    5. 接著可以到Crypto頁面,設定成SSL(Strict),仍然正常運作!

出現重新導向次數過多(ERR_TOO_MANY_REDIRECTS)

都設定成功後,輸入自己的域名卻出現重新導向次數過多(ERR_TOO_MANY_REDIRECTS)而無法正常顯示頁面的話

  1. 到 cloud flare 的 Crypto 頁面
  2. 往下拉到Always use HTTPS,把他打開,就可以了

建議閱讀順序

  1. 為什麼我推薦hexo部署到Gitlab
  2. HEXO基礎配置教學
  3. Git基礎設定
  4. 部署HEXO到GitLab Page
  5. Gitlab使用自訂域名搭配Cloud Flare免費升級成https
  6. hexo NexT主題增加AdSense
  7. 在Hexo NexT增加like Button
  8. hexo NexT主題版更心得

參考資料

將你的網站加上 https — Cloudflare

Gitlab/Setting up GitLab Pages with CloudFlare Certificates