博客迁移至GitHub-Pages并提升访问速度

相信国内体验过GitHub-Pages服务的看到这个标题肯定一脸黑人问号🤨

没错,放在前几天我会毫不犹豫的质疑,毕竟按照以往的经验,GitHub-Pages从国内访问的速度惨不忍睹🤦‍♂️

同时,最近由于某些不可说的原因,导致阿里云国际(包括但不仅限于)特价VPS迎来了一波大卖,随之而来的就是线路的调整和国内回程网络体验变差。之前一直放在上面的博客也受到了牵连,但是直到前几天发现了jsDelivr这家提供的CDN服务,这是它官网上的宣传标语:

Big network in China

jsDelivr is the only public CDN with a valid ICP license issued by the Chinese government, and hundreds of locations directly in Mainland China.

换句话说就是jsDelivr提供被中国大陆认可的公共CDN服务,总结一下就是:

  • 无需备案
  • 速度极快
  • 免费

想想以往如果想使用支持国内加速的CDN服务,你需要有已经备案的域名;如果你的需求再加上一个“免费”,那么可能需要你把CDN提供商的公司招牌挂在网站的可见位置,这样人家才会给你提供小额的CDN带宽。

现在,你有了不一样的选择:jsDelivr

图片取自jsDelivr官网

它支持npm,GitHub和Wordpress资源的CDN加速。如果你想加速自己网站,那么毫无疑问,GitHub-Pages是一个不错的选择。

这让我有了转静态博客的冲动,用Hexo、Hugo还有JekyII这样的静态网站生成工具和“jsDelivr”的关键词查找了一下午,能够实现使用jsDelivr进行资源加速的找到了飞鸿踏雪写的适用于Hexo的JS脚本,根据ta网站的加载速度来看,的确有显著的效果。可能当时并没有意识到GitHub Actions这个神奇的存在,所以就没有用这套方案。

反而是在接下来的探索当中发现了熊猫小A的这篇《完全使用 GitHub 写博客》,知道了这位大佬自己写了一个静态网站生成器Maverick,并且在此基础上借助GitHub Actions的持续集成功能,实现了在每次将新的Markdown格式文章Push到GitHub的时候,自动构建网站代码到GitHub-Pages的这一套操作。讲了这么多之外,为了让大家能够切身体验到这套流程的便捷,大佬还创建了一个示例仓库,跟着保姆级别的手把手README进行操作,几分钟就能上线自己的博客页面,而且访问速度不俗!

正是这个小白一样的示例打动了我这个小白,而且这个主题看上去也十分的简约,于是立即搬家。

博客首页截图


国内访问速度

先是随便找了一个由jsDelivr加速的JS文件,测速如下:

https://cdn.jsdelivr.net/gh/Muxq99/muxq99.github.io@master/assets/ExSearch/jquery.min.js

JS文件测速

看到这结果的时候,我都没注意到当时的嘴角是不是已经咧到了后脑勺。。

哪个男孩不想拥有一个速度奇快的博客。

就在我满心欢喜的准备迎接博客首页速度测试传来胜利的号角声时,好像当头一棒似的,这结果实在是出人意料。

博客首页测速

我心想怎么肥四……转头打开了Dev Tools,按照时间从长到短排序,仿佛找到了凶手。

瀑布流图寻真凶

耗时排名第一的3.0.0是用于页面预加载的instant.page,由于使用的时候直接复制粘贴官网上的代码,但官网提供的脚本貌似是由AWS提供的CDN服务,目测国内速度不大行。

instant.page测速

总体还是不错的,但是良莠不齐,看了一下intant.page在GitHub开源,这不是正合我意嘛!有jsDelivr为啥不用呢😈

喏,更换之后,绝大部分地区在有DNS缓存的情况下可以2秒之内加载完毕,这样的结果对于我来说已经十分满意了,更何况是完全免费的!

网站首页最终测速


总结

自建博客的工具,例如Wordpress、Typecho、Ghost还有那些静态博客之前都尝试过,后来一直用的是Typecho,看在它原生支持Markdown(Wordpress当时还没有原生支持)。

但是一直存在一个痛点,就是“在不使用图床的情况下,配合自带的图片上传工具着实有些麻烦”。如果一篇文章就三五张图还好,拖拽上传然后逐个添加。若是图片更多些,就十分头疼了。

而且自建博客还很依赖于所选服务器的线路,商家时不时的线路调整之后,导致可能访问自己的博客都困难。

这也是迁移到GitHub-Pages的原因之一,一来数据相对稳定些,不会因为忘记续费造成大问题;二来虽然加载速度方面依赖于jsDelivr,但它毕竟有些历史了,和自己购买的VPS相比,还是相对稳定些。

在更换了这一套之后,需要水一水文章的时候,只需要打开Typora(已设置好图片保存路径等)随着灵感的迸发,思绪的指引,开始码字就好了。需要图片的时候,简单压缩之后拖拽进来,最后add,commit,push一气呵成,GitHub Actions负责帮你打点剩下的事情,你只要负责全身心的投入到文章中去就好了。

这样的流程,难道不让人身心愉悦嘛。

(当然了,实现这样的方法有很多的,不必拘泥于我说的这个,不过还是感谢熊猫小A的付出!)

在解决了文章中图片上传的痛点,有了相对稳定且免费的CDN加速之后,应该做的是把更多的精力放在高效输入和优质产出上。

This is the way.

this-is-the-way