欢迎访问完美 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/
- ---------------------
来源: http://www.bubuko.com/infodetail-3095588.html