讓我的域名下GithubPage完美支持https

讓我的域名下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服務器那裏加上反向代理。

1. 註冊並登陸CloudFlare，並將本身域名下的 name server 修改成 CloudFlare 的 name server。
2. 在 CloudFlare 的 DNS 設置域名匹配到本身的GithubPage(啓用動態DNS加速)。
3. 在 CloudFlare 的 Crypto 設置 SSL 爲 Flexible(等待必定時間實現創建鏈接後，就能夠經過https來訪問本身的 GithubPage )。
4. 在 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 我的博客

• https://www.zggdczfr.cn/