本人打算爲部落格部署SSL證書,但又不想糜費,在網路搜索後,發現Cloudflare提供免費SSL證書服務,使用的是TLS 1.2

Configure Cloudflare

Sign UP

需要有Cloudflare的帳號,如果沒有,先註冊。其註冊方式比較特別,郵箱和密碼都需要輸入兩次,校驗通過即可進行下一步。

Add Websites

Create and manage your websites on CloudFlare.

在輸入框內輸入想要配置的域名,點擊Scan DNS Records,下方會出現Scan status進度條,耐心等待,完成後出現按鈕Continue Setup,點擊進入下一步。

Add DNS Records

顯示該域名當前的DNS記錄,自行更改,添加2個CNAME記錄即可。

以下是本人的DNS Records

Type Name Value TTL Status
CNAME lempstacker.com lempstacker.github.io Automatic On CloudFlare
CNAME www lempstacker.github.io Automatic On CloudFlare

操作完成後,點擊按鈕Continue進入下一步。

Select a CloudFlare Plan

此處是選擇Cloudflare的套餐

type price
Free Website $0/mon
Pro Website $20/mon
Business Website $200/mon

建議有經濟能力的選擇ProBusiness套餐,一是功能更多,二也算支持Cloudflare發展。此處,選擇Free Website,點擊按鈕Continue進入下一步。

Change Your Nameservers

去域名註冊商網站,將域名的Domain Name Servers修改爲Cloudflare提供的Nameservers

本人之前使用Namecheap做DNS域名解析,域名在Godaddy購買。

頁面出現如下信息

Current Nameservers Change Nameservers to
freedns1.registrar-servers.com brianna.ns.cloudflare.com
freedns2.registrar-servers.com kurt.ns.cloudflare.com
freedns3.registrar-servers.com Remove this nameserver
freedns4.registrar-servers.com Remove this nameserver
freedns5.registrar-servers.com Remove this nameserver

其中的freedns*.registrar-servers.comNamecheap提供的Nameservers,須要去Godaddy將自己域名的Domain Name Servers修改爲

  • brianna.ns.cloudflare.com
  • kurt.ns.cloudflare.com

多餘的記錄移除,點擊按鈕Continue進入下一步。

Update Nameservers

會出現如下信息

Status: Pending

Please ensure your website is using the nameservers provided:

  • brianna.ns.cloudflare.com
  • kurt.ns.cloudflare.com

Allow up to 24 hours for this change to be processed. There will be no downtime when you switch your name servers. Traffic will gracefully roll from your old name servers to the new name servers without interruption. Your site will remain available throughout the switch

當在域名提供商處修改好Nameservers後,可點擊右側的Recheck Nameservers檢測是否生效,每分鐘只能檢測一次。此處請耐心等待,域名解析需要等一段時間才能生效。

如果檢測通過,則 Status: Pending 會變成 Status: Active,並提示This website is active on CloudFlare.

Crypto

Manage Cryptography settings for your website.

返回頁面頂部,有Cryptos圖標點擊進入。

SSL 選項有四種選擇OffFlexibleFullStrict,點擊下方的Help,可查看相關解釋說明。

查閱的參考教程大都推薦Flexible,而本人則參考Set up cloudflare,選擇了Full

接下來設置HTTP Strict Transport Security (HSTS),點擊其右側的Enable HSTS進入,勾選I understand,點擊Nest step,開啓如下兩項

  • Apply HSTS policy to subdomains (includeSubDomains)
  • No-Sniff Header

點擊Save保存退出。

其餘的功能,可自行設置。


Configure Hexo

_config.yml

修改Hexo的配置文件_config.yml

1
2
3
4
5
# with the https protocol
url: https://lempstacker.com
# without any protocol
enforce_ssl: lempstacker.com

Redirect To https

除了上一步操作,還需進行如下設置:當用戶訪問頁面時,判斷網址是否使用https協議,如果不是強制重定向至https

此處是一個大,我能找到的參考資寫的都是在主題的header文件中添加如下代碼

1
2
3
4
5
<script type="text/javascript">
var host = "yoursite.com";
if ((host == window.location.host) && (window.location.protocol != "https:"))
window.location.protocol = "https";
</script>

而本人使用的主題文件,是jade格式的,直接複製進去,報錯,研究了2個多小時也沒能搞定。找了做前端的朋友幫忙,也沒能檢查出問題。後請他用jade格式改寫上面的代碼,才解決該問題。

以下是改寫後的代碼(script後有點.

1
2
3
4
5
script.
var host = "yoursite.com";
if ((host == window.location.host) && (window.location.protocol != "https:")){
window.location.protocol = "https";
}

Test in Browser

在瀏覽器中測試,能正常跳轉到https,並顯示綠色小鎖。在Google ChromeMozilla Firefox上測試通過。

整個過程耗費了5個多小時,幸結果是喜人的。

References


Change Log

  • 2016.01.26 14:40 Tue Asia/Beijing
    • 初稿完成

  • Note Time: 2016.01.26 14:40 Tue
  • Note Location: Asia/Beijing
  • Writer: lempstacker