讓個人域名下GithubPage完美支持https
歡迎訪問完美HTTPS支持的GithubPage個人博客 : https://zggdczfr.cn/
前言
最近筆記本掛了送去維修，耽誤了我的學習計划，就先把月初的一點小技巧發出來充充數……話說，沒了筆記本的日子，看書反而更加認真了~
遵從我2016年10月時，定下的目標：於2017年開始要堅持寫博客。於是，我在GithubPage上搞了個靜態博客網站 https://zggdczfr.cn/ 。作為一個有個性並略有強迫症的程序猿，肯定要給自己的博客弄個個人域名，再配上一把小小的綠鎖頭。
騰訊雲專門為大學生推出了服務器和個人域名的優惠政策，鑒於這個域名是去年申請的，雖然不是很有個人特色也只能勉強用着先。
准備
- 倉庫：Github
- Hexo 博客主題：icarus
- 評論系統：多說
- SSL證書：CloudFlare
- 個人域名(騰訊雲)：https://zggdczfr.cn/
（一）為什么要使用 HTTPS 協議？
- 雖然SSL並不是無懈可擊的，但是我們應該盡可能提高竊聽成本
- 加密通訊不應心存僥幸，所有連接都應被加密
- 福利： 使用了HTTPS之后，如果網站的訪客是從其他已經使用了HTTPS的網站上跳轉過來，你就能在Google Analytics中獲取更完整的來源信息。
不過關於最后一點，我不得不吐槽一下”牆”，它導致 Google Analytics 的信息延遲長達一天以上，最后我不得不退而選擇 Baidu Analytics。
（二）在Github上搭建 Hexo 主題博客
關於這個我就不羅嗦了，網上一大堆教程，分享一篇非常詳細的博客(里面包括了GithubPage應用自定義域名) : https://xuanwo.org/2015/03/26/hexo-intor/
不過，綁定后我們只能通過http://域名來訪問。如果訪問https://XXX.github.io/(即原來的域名)將會被重定向(302)到我們的自定義域名。若直接訪問https://域名，瀏覽器會報SSL_DOMAIN_NOT_MATCHED警告。
（三）CloudFlare 給自己的域名加個 s
首先，GitHub Pages不支持上傳SSL證書。
CloudFlare 是一家CDN提供商，它提供了免費的https服務(但不是應用SSL證書)。實現模式就是，用戶到CDN服務器的連接為https，而CDN服務器到GithubPage服務器的連接為http，就是在CDN服務器那里加上反向代理。
- 注冊並登錄CloudFlare，並將自己域名下的 name server 修改為 CloudFlare 的 name server。
- 在 CloudFlare 的 DNS 設置域名匹配到自己的GithubPage(啟用動態DNS加速)。
- 在 CloudFlare 的 Crypto 設置 SSL 為 Flexible(等待一定時間實現建立連接后，就可以通過
https來訪問自己的 GithubPage )。 - 在 CloudFlare 的 Page Rules 中設置路由規則。一般情況下，利用
Always use https設置兩條規則，規則鏈接分別為http://域名/*與http://域名/(開啟https強制跳轉)。
（四）關於評論系統
如果使用國外的評論系統disqus，這個的確完美支持 https。但，所限於用戶限制，也只能舍棄。
對於國內的評論系統，主要就是友言(有JS文件支持不了HTTPS引用)，多說(這個默認屬性並不支持HTTPS但可以進行改造)。
對”多說”進行了解
使用”多說”有一個缺點，他們的服務器不知道為何會偶爾性掛掉。
多說的評論框雖然提供了https鏈接，但是其中的一些頭像和表情還是http的。通過F12，我們可以發現多說的embed.js請求頭像和表情的時候用的是http協。但是，這兩個鏈接本身也支持https協議。 先給個embed.js的官方下載鏈接 : https://static.duoshuo.com/embed.js
- 下載后的JS文件是經過壓縮的，所以我們需要用 Sublime Text 來進行格式話，以方便我們閱讀。
修改頭像鏈接
經過漫長的Debug，我終於找到了頭像鏈接的相應位置。
搜索avatar_url找到頭像鏈接(展示其中部分代碼)，：
var Z = { userUrl: function(e) {
return e.url }, avatarUrl: function(e) {
return e.avatar_url || rt.data.default_avatar_url
}, loginUrl: function(e, t) {
簡單的字符串替換為”https”，將其修改為：
var Z = { userUrl: function(e) {
return e.url }, avatarUrl: function(e) {
var s = e.avatar_url || rt.data.default_avatar_url
s=s.replace(/http:/g,'https:');
return s
}, loginUrl: function(e, t) {
修改表情鏈接
經過Debug，發現傳送的屬性是meaasge，它的上一個屬性是s。最終查了好久之后終於發現了它的位置(這個沒有上一個明顯)，搜索s = e.post就可以找到它的位置(注意等號旁邊的空格)。
var t = "",
s = e.post,
i = e.options,
r = s.author;
簡單的字符串替換為”https”，將其修改為：
var t = "",
s = e.post,
i = e.options,
r = s.author;
s.message = s.message.replace(/http:/g,"https:");
修改表情按鈕鏈接
這個最簡單了，Debug發現按鈕鏈接為”http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/” ，在JS文件中將其修改為 https 即可。
替換embed.js的路徑
以Hexo主題icarus為例，在themes\icarus\layout\comment文件夾下找到多說的調用ejs文件。我將上面修改過的JS文件放到了主題的資源JS文件夾，然后在相應的ejs文件中修改調用路徑即可。
ds.async = true;
ds.src = '/js/embed.js';
ds.charset = 'UTF-8';
完美應用
利用hexo命令hexo g && hexo d，重新將靜態資源pull到Github上。歡迎大家去訪問一下我的個人博客 https://www.zggdczfr.cn/ 。
（五）關於圖床的問題
https引用的圖片一直是略微麻煩的事情。
-
第一種，是將圖片放到Github上。但是，使用相對路徑引用的話，會出現跳轉頁面時一些圖片路徑會錯誤；使用絕對路徑引用的話，會出現重定向的問題，瀏覽器報
302異常，使瀏覽器上的綠色小鎖頭不見了(不能容忍……)。 -
第二種，是將圖片放到七牛雲上面，不過注冊用戶每個月有流量限制，我擔心若訪問人數太多(雖然不大可能)會使圖片失效。
-
第三種，從知乎上找到了支持 https 的圖床，雖然不知道能使用多久(我現在也就是使用這種)。給個鏈接 : https://www.tuchuang001.com/
-
第四種，在自己的私人服務器上搭一個(因為自己的騰訊雲服務器要經常做一些測試，就不選擇放到上面了)。
（六）Github Page 個人博客