让个人域名下GithubPage完美支持https

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011244202/article/details/57106544

让个人域名下GithubPage完美支持https


欢迎访问完美HTTPS支持的GithubPage个人博客 : https://zggdczfr.cn/

前言

最近笔记本挂了送去维修,耽误了我的学习计划,就先把月初的一点小技巧发出来充充数……话说,没了笔记本的日子,看书反而更加认真了~
遵从我2016年10月时,定下的目标:于2017年开始要坚持写博客。于是,我在GithubPage上搞了个静态博客网站 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 个人博客

没有更多推荐了,返回首页