利用 jsDelivr 和 Cloudflare 免备案加速 Github Pages 网站
#

最近觉得学的东西不少，但是我从来没有记录过，最近正好因为新建了个博客，热乎劲还没过去，所以写点什么。

我比较穷，不想买个服务器，买了也浪费，同时又想写博客。还不想通过 CSDN，简书之类的“广告网站”来写东西（最近发现在手机上用 Chrome 浏览器看简书的内容的时候会有弹屏广告，而且关不掉，遂放弃了简书）。突然想起了好久之前看过的 Github Pages，于是照着网上的教程进行了梳理，最终创建了一个我还比较满意的博客。只是有一个很严重的缺陷，就是国内访问太慢了，查了很多教程，发现都是些接入国内 CDN 的教程，国内 CDN 不仅贵，而且你不备案是不能用的。对于我这样一个没啥需求的用户，还得做网站备案，太麻烦了。于是想能不能曲线救国，最终找到了一个比较有效，能提高 Github Pages 速度的方法，还不用花钱（可能要花点，但是不多）。

效果
#

先上效果（两个网页均是通过 清空缓存并硬性重新加载 方式来测试的）

对于速度，大家可以自行测试，本站和 blinkfox.github.io 使用的是同一套模板，对方 9.9s 时还没跳到主页，我站 8s 就已经全部加载完成。那我做了什么改动呢？

第一步——压缩图片
#

刚开始的时候没有头绪，因为不知道 Github Pages 能换域名。我一想，图片是显示的大头，先从压缩图片开始做起，刚好有一个公司 TinyPNG 提供了接口。首先我们需要打开它的官网，点击上面的 Developer API，输入你的名字和 Email 就可以获得每月 500 次的免费试用 API 的资格，你放心，这个量对于我们这种写小博客的人来说是非常够用的。申请完了之后要写个压缩的小程序。对于我来说，做个小程序还是轻而易举的，我在这里使用 python 来简单写写。根据官方文档说明，你首先需要下载它的库

pip install –upgrade tinify

然后就可以应用我这个遍历程序啦(突然发现被我删啦，重新写吧)


import tinify
import os
tinify.key = "YOUR_API_KEY"


def tinify_all_pic(rootdir):
    _files = []
    list = os.listdir(rootdir)
    for i in range(0, len(list)):
        path = os.path.join(rootdir, list[i])
        if os.path.isdir(path):
            tinify_all_pic(path)
        if os.path.isfile(path):
            suffix = os.path.splitext(path)[-1]
            if suffix == '.png' or suffix == '.jpg':
                print(path)
                source = tinify.from_file(path)
                source.to_file(path)

tinify_all_pic(r"themes\hexo-theme-matery\source")
# 这里是用我存放资源的一个文件夹做示范，根据你们的文件夹不同进行相应的更换

压缩率通常在 50%以上（特别是你用超过 1M 以上的图片的时候），这样你在加载的时候不就提高 50%的加载速度了嘛 😂（不是）。

这样操作之后你的加载速度可以提高至少 20%以上（一些模板资源也被压缩了，有些图片没法用网页 URL 来代替）。

第二步——使用 jsDelivr 对博客静态资源进行静态加速
#

jsDelivr 是一个很著名的 CDN 加速商，这个服务商只对你 GitHub 里的静态资源进行加速，但是不和 Cloudflare 一样免费提供全站加速，不过 Cf 在国内没有节点，这个公司在中国是依托网宿科技（QUANTIL）进行 CDN 加速。

但是这也够了，也是提升我们速度的一个大杀器（Cloudflare 只是起辅助作用）。首先你需要先传一个你网站编译完后的稳定版本放在你的 GitHub 里，这样就可以进行加速了。我们只需要通过这样来引用你的资源

https://cdn.jsdelivr.net/gh/user/repo@version/file

举个例子，如果我们直接引用网站的资源是这样引用的。

https://github.com/gaowanliang/gaowanliang.github.io/blob/master/js/matery.js

其中 gaowanliang 是我的用户名，gaowanliang.github.io 是我的仓库名，那这样就可以进行套进去，效果就是这样:

https://cdn.jsdelivr.net/gh/gaowanliang/gaowanliang.github.io/js/matery.js

甚至如果你是 js，css 文件，可以进行 min 化，哪怕你的仓库里没有 min 的文件

https://cdn.jsdelivr.net/gh/gaowanliang/gaowanliang.github.io/js/matery.min.js

简单来说，如果你的文件放在 master 分支里，点开文件复制链接把链接里的 https://github.com/ 换成 https://cdn.jsdelivr.net/gh/ ，然后把 blob/master/ 删掉即可，然后就可以对你网站里的 js，css，图片大换特换啦。你比如说这个模板的作者把用到的 js，css 都写在了 _config.yml 里，我们就可以进行全部替换