让个人域名下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 个人博客

https://www.zggdczfr.cn/