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主題版更心得

參考資料

將你的網站加上 https — Cloudflare

Gitlab/Setting up GitLab Pages with CloudFlare Certificates