还没给你的博客加个小绿锁吗？

https.jpeg

终于要更新了，刷了好久牛客...

关键字：GitHub Pages Jekyll SSL https

前言

小绿锁是啥？HTTPS链接的网页是比较安全的网页，遂发一个小绿锁。HTTPS是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，https的安全基础是SSL。SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层对网络连接进行加密。虽然我们博客里面没啥东西需要传输加密的，但是有个小绿锁好看啊！总之好看最重要。

背景

本文只针对使用自定义域名的博客，主要介绍了GitHub Pages + Cloudflare、Coding Pages两种实现方案，我个人是使用GitHub Pages托管的博客，而且习惯把东西放在一起，不喜欢东西东一块西一块，所以我个人是使用A方案。

Plan A - GitHub Pages + Cloudflare

1. 首先你得有个自定义域名，然后再在 GitHub Page 的设置中custom domain填入,万网相关的跳转设置就不说了。

• 创建CloudFlare帐户，并且添加自己的网站域名,等待1分钟，完成后点击Continue Setup。
  

  A-2.png

• 看到DNS Records后，按下图设置（仅供参考），点击 Continue 下一步。

  
  A-3.png

• 选择免费服务，当然你土豪的话我也不拦你使用收费项目，选好点击 Continue 。

  
  A-4.png

• 更换DNS服务器，我本人的域名是在万网买的，所以需要到阿里云修改DNS,根据cloudflare网站提示将下图左边的设置改成右边的即可，请替换为您打开网页实际显示域名服务器,然后点击 Continue 。

  
  A-5.png

• 设置完成后状态应该会变成Active。

  
  A-6.png

• 接来下开启SSL，将SSL选项改为Flexible，这一步生效需要比较长的时间，我是睡了一觉，第二天早上才OK的。

  
  A-7.png

• 将http请求重新定向至https，还有记得加通配符*，或者在 开启Cyypto中将Automatic HTTPS Rewrites 开启。

  
  A-8-1.png
  A-8-2.png

• 至此Plan A就完成了，由于设置生效比较慢，需要耐心等待；Cloudflare还提供免费的CDN和缓存技术，也可以设置开发模式关闭缓存使数据实时变更。

Plan B - Coding Pages

Coding国内访问速度比较快，还有设置SSL也更简单，不过我还是习惯放GitHub上，一般需求用Coding更方便快捷。

1. 在 Coding Page 的设置中自定义域名填入域名，万网相关的跳转设置就不说了。

• Coding设置（开启HTTPS加密）

  
  B-1.png
  B-2.png

• 然后...就没有然后了，PlanB就这么简单😂,如果不能实现不要来打我，毕竟这条路我没自己走过，实在不行看看我的小绿锁解解馋👉大帅比的博客。

总结

程序员为了装逼啥事情都干得出来，赶紧开启你的装逼之旅吧。
呃，还有正经的，如果在博客当前页面里有非https链接的图片，那小绿锁会变成小黄锁,强迫症的话把图片也换成https的。

参考

CloudFlare官方指南
GitHub Pages + CloudFlare
Coding Pages + SSL