给自有域名的github-page上HTTPS（Cloudflare小绿锁）

[shaobeichen]

给自有域名的github-page上HTTPS

从Chrome56左右开始，对于没有HTTPS的网站，不符合要求的，都不会出现一把小绿锁。反之，有了小绿锁的网站，标志着这个网站是HTTPS安全的。
假如你没有自己的域名，而是使用着github的子域名（形如xxx.github.io）那么能够自动拥有github的https，无需操心。
但是如果有自己的域名，想要实现自己的域名通过CNAME指向github的page，并加上小绿锁的话，就比较麻烦了。首先我们需要将自己的域名通过CNAME指向github-page。在hexo的source文件夹里创建一个叫做CNAME的文件，内容只需要写上你自己的域名即可。对于我来说就是molunerfinn.com。
通过CNAME指向github-page的页面之后，我们发现，原本github自带的https已经不能再使用了。我们必须给自己的域名想办法弄上https。一开始并无头绪，不过好在我找到了Cloudflare这个解决方案。

注册Cloudflare

第一步当然是注册。Cloudflare是国外非常有名的一家网络服务提供商。它提供的其中一项免费服务就是给我们自有域名加上HTTPS。正好符合我们的需求。
注册成功后添加域名。
然后需要增加几个记录，其中A记录就是指向这192.30.252.153和192.30.252.154这两个IP地址，它们是github-page的ip地址。然后建一个CNAME将www的网址指向我们非www的网址

然后需要将我们的域名的DNS服务商的地址改成Cloudflare要求的两个DNS服务器地址。每个人分配的不一样，而且必须用分配的否则会失效。

这个操作需要在自己的域名服务提供那边修改。一般是48小时内生效。

开启HTTPS

找到Crypto选项，这里我们需要开启Flexible的HTTPS选项。

其实Cloudflare做的事就是，当访问我们的域名的时候，实际上走的是Cloudflare的服务器，这个时候这个阶段的访问是有HTTPS的。然后Cloudflare再去请求我们实际的内容，再将内容返回给用户。这一段是没有HTTPS的。也就是实际上是半HTTPS。不过对于我们静态博客来说，这种半HTTPS实际上已经够我们使用了。
可以看见开启HTTPS真的非常简单，基本不需要额外操作。

重定向

这个时候我们访问https://molunerfinn.com自然走的是HTTPS。但是如果有人访问了http://molunerfinn.com，那要如何跳转到HTTPS的页面呢？CloudFare另一个很棒的功能PageRules就派上用场了。我们可以指定我们的域名强制使用HTTPS，并且当访问是HTTP的时候重定向到HTTPS。这样就能保证用户访问我们的页面都是通过HTTPS的了。

附录

DNS解析

刚开始用CloudFare的DNS服务器，国内域名解析一开始会时断时续。我自己大概是过了24小时之后开始稳定的。所以一开始有可能访问不到自己的博客这是正常的。一开始我还以为是Cloudflare那边问题比较严重还提了一个issue。后来第三天就正常了。

加入HSTS的列表

上面说到，我们有可能访问自己的网站是走HTTP->304重定向->HTTPS。这个是浏览器跟服务器进行了一次通信之后才发生的跳转。那有没有可能做到，访问的是HTTP，但是浏览器识别之后自动转成HTTPS访问，而不经过重定向那一层操作呢？有的。通过HSTS的PreloadList。
可以参考这篇文章对HSTS进行更深入的了解。简单来说，HSTS能够使我们的网站安全性更上一层楼。
还是CloudFare，它家自有的HSTS功能，开启之后就能很好的满足我们的需要。（真是完美了）还是在Crypto选项下，开启HSTS

建议都使用默认的选项。
然后可以去HSTS Preload List的网站把我们的域名进行检查并收录（不能是子域名，必须是一级域名），如果没通过会给出修改建议，按照建议修改就行。如果通过了，就会放入审核列表。之后可以时不时回来看看自己的网站被收录了没有。我是等了快一周才被收录。网上的说法普遍是几周内。所以耐心等待收录。一旦被收录就会应用到主流浏览器上，这样你的网站就是更加安全的网站啦。

记录总结

至此，我的博客迁移工作就做完了。用的因为是Cloudflare的cdn加速，所以在国外访问速度很快，在国内访问的速度会稍慢一些。不过也无伤大雅。最关键的是通过上述的办法，让我的博客能够实现持久化构建，加上了HTTPS的小绿锁，并且成功加入HSTS的PreloadList，还是比较满意。

最后由衷感谢GitHub+Travis-CI+Cloudflare提供的这么优质的服务。

文章作者:Molunerfinn

文章链接:https://molunerfinn.com/hexo-travisci-https/

版权声明:本博客所有文章除特别声明外，均采用CC BY-NC-SA 4.0许可协议。转载请注明来自MARKSZのBlog