为添加了自定义域名的GitHub Pages添加SSL,启用强制HTTPS(小绿锁)
直奔主题
为什么要使用https协议?
提高网站访问安全性,网络连接都是加密的 (PS:虽然
SSL
并不是无懈可击的,但是我们应该尽可能提高窃听成本)。目前越来越多的浏览器会判断当前站点支不支持https协议,提高用户信任度,体验好.
例如:据外媒报道,从2017年1月份正式发布的Chrome 56开始,Google将把某些包含敏感内容的HTTP页面标记为
“不安全”
,比如含有密码或支付表单信息。Google最终目标是将所有打破了https连接的HTTP页面,用特定的红色图标
给标记出来… 此举旨在唤起用户有关HTTP连接不安全、容易受到中间人攻击等危险的意识。通过HTTP连接发送的数据(比如密码和支付细节),会被通网络下别有用心的人轻易拦截。Mozilla也在做着同样的事情——其中就有通过提供免费的TSL证书,以便其为网站服务部署https连接的
Let's Encrypt项目
。根据Chrome的遥测数据,在该浏览器每天加载的网页中,有近一半是通过https连接的。福利:使用了https之后,如果网站的访客是从其他已经使用了https的网站上跳转过来,你就能在
Google Analytics
中获取更完整的来源信息。(说到这,不得不吐槽一下”墙”,它导致Google Analytics
的信息延迟长达一天以上,最后我不得不再将Baidu Analytics
纳入我的选择。)使用https之后,谷歌、百度等搜索排名权值(PR等)也会有相对提升。
And 个人原因,作为一个有个性并略有强迫症的耿直Boy,终于在前一阵子给自己的博客弄了个人域名zhouie.cn(阿里云),怎么可以没有一把小小的
绿锁头
?!
默认情况下使用GitHub Pages的给定域名则支持http和https两种协议,但是如果使用自定义域名的话,则只能通过http://
访问,也就是说我们在Github上搭建 Hexo 或Jekyll 主题博客
后,通过CNAME
绑定个人域名后,我们只能通过http://
域名来访问。如果访问https://XXX.github.io/
(即原来的GitHub Pages域名)将会被重定向到我们的自定义域名
。但若直接访问https://我们的自定义域名
,浏览器会报SSL_DOMAIN_NOT_MATCHED
警告。
附:
在Github上搭建 Hexo 或Jekyll 主题博客
,这个网上教程很多,提供一篇我之前有写过的一篇教程Jekyll 搭建个人博客。
那么怎么给自己的域名加上https
呢?这个时候就需要使用第三方网站的证书了。而GitHub Pages并不支持上传SSL证书。
我在Google、Bbaidu上找相关解决办法时,又看到这样一个帖子:GitHub Pages 自定义域名启用 SSL,各位有什么建议?。
从网上提供的信息来看,目前方案主要有两种:
自己购买证书,部署到一台机器,机器部署
nginx
,stunnel
等代理软件,反向代理到GitHub pages站点,域名指向代理机器IP(收费的SSL服务肯定是比免费的更加周到,一般收费的SSL都会提供端到端的加密,但是价格不菲,不推荐);使用CloudFlare提供方案1类似的设置(推荐)
借用CloudFlare 给自己的域名加个 s
CloudFlare 是一家CDN提供商,它提供了免费的https服务
(但不是应用SSL证书)。实现模式就是,用户到CDN服务器的连接为https
,而CDN服务器到GithubPage服务器的连接为http
,就是在CDN服务器那里加上反向代理。
在网上还找到这样一种解释
Cloudflare 提供一种被他们称之为Universal SSL
的服务,可以让任意HTTP
站点支持HTTPS
。它的原理是当访客使用HTTPS
访问站点的时候,从访客到 Cloudflare 这段是加密的,然后从 Cloudflare 到站点这段是明文的。虽然不是全程加密,但是也能很大程度上解决中间人,如果从 Cloudflare 到站点的信道相对可靠的话
- 注册并登录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强制跳转)。
还有其他的一些,例如Cloudflare还提供免费的CDN
和缓存技术
,让浏览者有更好的体验~~
详细步骤
创建CloudFlare帐户,并添加网站
首先你已经有自己的
自定义域名
的GitHub Pages ,我的 GitHub Pages CNAME文件写的是zhouie.cn
明确一下我们的实现目标: 当访客输入
zhouie.cn
强制跳转使用https,访问wwww.zhouie.cn
也会跳转到https://www.zhouie.cn
如果你还没有Cloudflare账号,点击注册
登陆后,点击这里 增加你的域名,如下图,输入你的域名,例如
zhouie.cn
并点击Begin Scan
注意不要写
WWW
前缀,大约60秒即可完成域名解析扫描。完成后点击Continue Setup
继续下一步你看到
DNS记录(包括子域)列表
之后,按照下图提示设置后,其中cname
是为了重定向www
备的,点击Continue
下一步选择免费计划,然后下一步~
到你域名控制面板修改
cloudflare
给出的域名服务器,我这里以阿里云
为例在
域名管理台
点击管理
注:虽然官方说明,域名服务器修改最长需要72小时生效,但我用域名做了自己测试,大约只需要 5~10 分钟,看到 Status: Active 即可
设置SSL
点击crypto
菜单 , 然后设置Flexible SSL
,如下图
添加www重定向到https://yicodes.com
添加自动重定向到 SSL页面
添加SSL的教程就此完成,一般需要5~30分钟生效!!!
小绿锁出现了,哈哈
补充[转载]
为什么Github Pages不支持为自定义域名添加SSL证书呢?
当我们访问自定义域名,DNS指向的地址(Github Pages
的IP
)会在我们的仓库中寻找cname
文件,判断目标文件和请求来源地址的域名一致后,Github Pages
会将errorlife.github.io
的内容返回给用户。
Ok,这是一个比较完整的过程,但是在解析的途中,看上面两张图(tracert一下这个”裸奔”站好了 :P),你会发现请求的地址是“美国Fastly公司CDN网络节点”,很明显这是Github的CDN,而且它只支持80端口,不支持443端口,免费的CDN一般不支持,而https默认就是使用443端口。
所以我们就知道Github Pages在解析域名和原生地址所分配的是不同的CDN,前者是不支持https的,而后者恰恰相反。
思考我们牺牲了什么
天下没有免费的午餐,不劳而获始终都是泡沫。所以在这个过程中我们究竟牺牲了什么?
- 我们必须
修改域名的DNS服务器
为Cloudflare提供的地址才能使用这项服务; - 无法进行
coding+github双线部署
,除非你使用Cloudflare的收费服务
,或者反向代理
,更多思路详见v2ex
提问的一个帖子。
检查是否引用外部资源
这个问题在我这儿并没有出现过,可是从网上教程来看,因为以往(一两年前)引用的某些外部资源还是http
的,会出现一些问题,比如:
生效后我发现我的网站是不太安全的状态,而且当我点击加载脚本之后,从不太安全的状态变成了不安全的状态。
v友的解决办法:
按下
F12
,尴尬的事情发生了,原来是配置文件和palceholder
在作怪,由于多说
的头像用的还是http
,巧的是,没多久,多说
就下线关门了。
这就要求我们对https协议理解通透,之后google了一下,发现https并不支持这种第三方引入资源…
参考资料
- cloudflare官方使用指南
- keanulee Blog
- sheharyar Blog
- Pages 博客 HTTPS 化尝试与 Universal SSL
- 为自定义域名的GitHub Pages添加SSL 完整方案
- Hexo支持https访问
- github pages绑定了个人域名,怎么使用https访问而证书不报错呢?-知乎
- 为绑定域名的 GitHub Pages 启用 HTTPS>>>>没有测试过,不过似乎已经不能用了。
【附:一文一图】
为添加了自定义域名的GitHub Pages添加SSL,启用强制HTTPS(小绿锁)的更多相关文章
- 为Jekyll+GitHub Pages添加全文搜索功能
动态演示如下: [上传失败, 请自行搜索原文] 源码库: program-in-chinese/team_website 找到此JS工具: christian-fei/Simple-Jekyll-Se ...
- github pages 添加godaddy的dns解析
转自: http://andrewsturges.com/blog/jekyll/tutorial/2014/11/06/github-and-godaddy.html I own a custom ...
- 用GitHub Pages搭建博客(五)
本篇介绍GitHub Pages自定义域名 在用GitHub Pages搭建博客(二)中介绍到,默认的GitHub Pages域名就是仓库地址,即: 账号名.github.io 如果我们要使用自定义域 ...
- 如何搭建一个独立博客——简明Github Pages与Hexo教程
摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DNS设置.github和Hexo设置等过程,这是我写得最长的一篇教程.我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后 ...
- Github Pages+Gridea搭建个人博客
1 概述 Github Pages可以用来托管个人网站,静态的,便于用来实现博客,可以在一个仓库的settings中开启: Gridea是一个静态博客写作客户端,所有文件都在本地,没有数据库,实现简单 ...
- github pages绑定域名
网上很多人问 github 绑定域名要不要备案,很多人的回答是: 国内主机需要备案,国外主机不用 这个说法是没错的,但是却没有直接回答出 github pages 是否需要备案! 首先声明 githu ...
- 使用Travis CI自动部署博客到github pages和coding pages
每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...
- 利用Github Pages建立仓库“门面”
嘛是Github Pages? Github Pages 是一个静态网站托管服务,用来从你的Github仓库中直接发布 个人.组织或项目的网站页面 Github Pages发布的页面统一使用githu ...
- Jekyll+GitHub Pages部署自己的静态Blog
混了这么久,一直想拥有自己的博客,通过jekyll和GitHub Pages捣腾出了自己的博客(https://www.ichochy.com) 一.安装jekyll 首先有安装Ruby的开发环境 运 ...
随机推荐
- lshw
https://linux.die.net/man/1/lshw lshw(Hardware Lister)是另外一个可以查看硬件信息的工具,不仅如此,它还可以用来做一些硬件的benchmark. 这 ...
- jquery实现京东淘宝首页的轮番效果图
主要是绑定事件以及实现自动滚轮 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HDU 3577 Fast Arrangement ( 线段树 成段更新 区间最值 区间最大覆盖次数 )
线段树成段更新+区间最值. 注意某人的乘车区间是[a, b-1],因为他在b站就下车了. #include <cstdio> #include <cstring> #inclu ...
- A公司 推荐算法大赛 总结
一.介绍 ♦通过用户前四个月(04.15~08.15)的用户行为预测用户第五个月(08.15~09.15)将会购买的品牌.用户共有四种行为(type)分别是:点击(0).购买(1).购物车(2).收藏 ...
- [bzoj1033] [ZJOI2008]杀蚂蚁antbuster
Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的任 ...
- [poj] 3907 Build Your Home || 求多边形面积
原题 多组数据,到0为止. 每次给出按顺序的n个点(可能逆时针,可能顺时针),求多边形面积(保留整数) 多边形面积为依次每条边(向量)叉积/2的和 \(S=\sum _{i=1}^{n-1}p[i]* ...
- POJ 1523 SPF 求割点的好(板子)题!
题意: 给个无向图,问有多少个割点,对于每个割点求删除这个点之后会产生多少新的点双联通分量 题还是很果的 怎么求割点请参考tarjan无向图 关于能产生几个新的双联通分量,对于每个节点u来说,我们判断 ...
- HDU 4910 HDOJ Problem about GCD BestCoder #3 第四题
首先 m = 1 时 ans = 0对于 m > 1 的 情况 由于 1 到 m-1 中所有和m互质的数字,在 对m的乘法取模 运算上形成了群 ai = ( 1<=a<m & ...
- ngrepeat 时注意的地方和一些little tricks
angularjs的一些使用经验总结,此篇文章单谈ng指令之一ngrepeat 1. ngrepeat 时报错 Duplicates in a repeater are not allowed, 正常 ...
- bzoj 1111 - 四进制的天平
Description 给定 1000的十进制数, 求 最小的 四幂拆分 方案 有多少种 Solution 先大除法 \(n\log_4(n)\)次取余转化为 四进制数. 然后从 低位 往 高位 \( ...