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

时间 2020-09-09

标签我的域名 githubpage 完美支持 https 繁體版

原文原文链接

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

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

前言

最近笔记本挂了送去维修，耽误了个人学习计划，就先把月初的一点小技巧发出来充充数……话说，没了笔记本的日子，看书反而更加认真了~
听从我2016年10月时，定下的目标：于2017年开始要坚持写博客。因而，我在GithubPage上搞了个静态博客网站 https://zggdczfr.cn/ 。做为一个有个性并略有强迫症的程序猿，确定要给本身的博客弄个我的域名，再配上一把小小的绿锁头。
腾讯云专门为大学生推出了服务器和我的域名的优惠政策，鉴于这个域名是去年申请的，虽然不是颇有我的特点也只能勉强用着先。git

准备

仓库：Github
Hexo 博客主题：icarus
评论系统：多说
SSL证书：CloudFlare
我的域名(腾讯云)：https://zggdczfr.cn/

（一）为何要使用 HTTPS 协议？

虽然SSL并非无懈可击的，可是咱们应该尽量提升窃听成本
加密通信不该心存侥幸，全部链接都应被加密
福利：使用了HTTPS以后，若是网站的访客是从其余已经使用了HTTPS的网站上跳转过来，你就能在Google Analytics中获取更完整的来源信息。

不过关于最后一点，我不得不吐槽一下”墙”，它致使 Google Analytics 的信息延迟长达一天以上，最后我不得不退而选择 Baidu Analytics。github

（二）在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但能够进行改造)。hexo

对”多说”进行了解

使用”多说”有一个缺点，他们的服务器不知道为什么会偶尔性挂掉。async

多说的评论框虽然提供了https连接，可是其中的一些头像和表情仍是http的。经过F12，咱们能够发现多说的embed.js请求头像和表情的时候用的是http协。可是，这两个连接自己也支持https协议。
先给个embed.js的官方下载连接 : https://static.duoshuo.com/embed.js

下载后的JS文件是通过压缩的，因此咱们须要用 Sublime Text 来进行格式话，以方便咱们阅读。

修改头像连接

通过漫长的Debug，我终于找到了头像连接的相应位置。
搜索avatar_url找到头像连接(展现其中部分代码)，：post

      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/