Github Pages hexo博客加速

Posted on Edited on

使用 CDN

更新：新版 next 主题支持配置 CDN

首先考察了一些 CDN 服务商，还是以免费为原则，参考
https://www.cnblogs.com/wpjamer/articles/10925764.html
但试了几个我就放弃了，国内 CDN 都需要备案，Cloudfare 速度又太慢。。

jsDelivr

后来发现这个，即插即用的方式真是如获至宝，所有 github 资源都能直接用 cdn 访问

使用方法

1
2
3
4
5
6
// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

// load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

例子：https://cdn.jsdelivr.net/gh/marvinxu/marvinxu.github.io@master/images/favicon-32x32.png

Hexo - next 主题 CDN 配置

主题配置文件 config.yml：

  • vendors 下配置 library 使用 CDN
  • favicon\avatar 使用 CDN

源码修改：
main.css -> head.swig
js -> engine.js

直接看 commit 吧
https://github.com/MarvinXu/blog-hexo/commit/7fdf252e2d80d661b68471908615990f5bb892b8

HTML 瘦身

因为 index.html 不走 CDN，所以也要控制大小。next 主题默认首页会展示文章全文，导致 index.html 很大，可以进行如下设置

设置文章截断

语雀写文章的时候加入截断标志

1
<!-- more -->

减小首页 pagesize

config.yml

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ""
  per_page: 5
  order_by: -date

效果

之前加载 815s，加速后基本 12s

参考

https://theme-next.js.org/docs/advanced-settings.html
https://hexo.io/docs/helpers#url-for
https://theme-next.js.org/docs/theme-settings/posts.html