近期博客站点的更新

最近再次对博客站点进行了一番比较大的更新升级,主要是成功解决了几个历史性遗留问题,例如访问的速度、图片没有缩略图预览、自定义样式代码不太清楚等等。经过这一次的改造,感觉未来短期内大规模的更新变动应该不会有了,毕竟主要的需求都已经实现。

1. 部署到对象存储

这其中主要的变动是更新了主题,以及从 Netlify 迁移到了阿里云对象存储(OSS),并且把部分的静态文件(css,js 和图像文件)放到了腾讯云对象存储(COS),还在腾讯云的对象存储上套了一层国内的 CDN 加速。

之所以这样区分是因为:腾讯云有每月对象存储免费额度和 CDN 免费流量额度,但是自定义域名绑定存储桶且开启 https 一定要通过 CDN 托管证书(不论境内外存储桶),而因为 CDN 要走国内节点所以一定要备案,故不能单独用腾讯云;阿里云对象存储可以解决上述问题,但是免费额度比较少,而且没有备案的域名虽然可以开启 https 但是一定要绑定非中国大陆节点的存储桶(如中国香港),因此将部分不需要自定义域名但是常常需要访问的资源放到腾讯云的存储桶加上国内 CDN 是非常有用的。我还使用腾讯云的云函数功能,每当存储桶有变动时候就让云函数去自动触发刷新各个节点缓存。

2. 持续集成与缩略图

这样,随之而来的问题就是部署站点,因为现在需要同时传输到两个地方。之前我采用的持续集成方案是 Travis CI,不过有一个问题是开始构建前的环境准备要比较长的时间。相比较而言,新出的 GitHub Actions 不仅启动比较快,而且集成在 GitHub 的代码仓库中,使用起来十分方便。另外,我还利用 GitHub Actions 拓展了一个新功能,也即每一次成功执行构建任务都会通过 Telegram bot 向我推送一条消息提醒(比邮件提醒方式方便多了)。

最后,因为 NexT 主题的 Fancybox 图片插件处理时没有提供缩略图的选项,使得每次加载图片都会载入原图。这样使得对象存储外网流出流量变大,而且会让访客浏览网页时加载速度偏慢。针对这一问题,我选择了一种对主题文件无损的修改方式来完成这个需求:在 GitHub Actions 工作流中利用 sed 的替换命令来实现对主题文件的临时性修改,从而实现图片默认显示缩略图、点击放大加载原图的效果。

3. 重构自定义样式

通过重构自定义样式,规范化了样式的格式,加入了每个样式的注释,还利用了 mixins.styl 样式文件。另外,因为 NexT 主题添加了黑暗模式和更新图标到 Font Awesome 5,所以也进行了色彩和图标调整适配。同时响应全国哀悼日对新冠肺炎疫情中逝世同胞和牺牲烈士的哀悼,加入了一个全站黑白样式,可以通过配置文件来打开关闭。

以上这些变动,都可以查阅我的 GitHub Actions 脚本 以及博客的 代码仓库 了解。最后,放上博客的测速结果地图。

网站测速结果