记一次博客优化

之前,使用 Netlify 做全球加速,以提高访问速度。后来效果不是很明显,切换到了 Vercel,加速效果很好,结果前几天网站突然就不能在国内访问了~排查了一下发现需要科学上网才能正常访问,抽时间又把网站托管到 GitHub Pages 上了。

虽然能访问 GitHub Pages 页面,但是在国内访问的速度慢到让你怀疑人生。都已经要狠心买 CDN 了,突然想到了 jsDelivr——这货是为开发者提供的开源免费的 CDN,许多 npm 包都是通过 jsDelivr 来加速的,还有 GitHub 仓库也能加速访问。

用户在访问托管到 GitHub Pages 上的页面时,需要加载许多静态资源,像一些 js、css 和图像都是从 GitHub 仓库中加载的,如果把这部分资源使用 jsDelivr 加速的话,网站的访问速度就快的多了,这样用户只需要从 GitHub Pages 加载 html 文件,其他资源统统走 jsDelivr,就能解决访问慢的问题。

本站使用 Hexo + NexT 主题搭建,要在 NexT 主题下配置 jsDelivr 也非常简单——改一下配置文件就能实现。不过在修改配置文件之前,还是先看看 NexT 是怎么引入静态资源的吧。

打开项目的 node_modules 文件夹,找到 Next 主题 hexo-theme-next 文件夹。这个文件夹就是用到的主题,在主题文件夹下找到 layout -> _partials -> head 文件夹下的 head.njk 文件,打开。

这个文件就是 HTML 文件中的 head 部分,所有的 js 和 css 资源都是在这个文件中引入的。看看其中有没有关于主题的样式,像这样:

1
<link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css">

很显然,这个 main.css 样式文件的路径是在配置文件中配置的,找一下配置文件中的 css 属性,你会看到这样一段代码(通常在配置文件的最后位置):

1
2
3
4
5
# Assets
# Accelerate delivery of static files using a CDN
css: css
js: js
images: images

结合上面引入 css 的路径,就明白了:main.css 文件是在根目录下的 css 文件夹下引入的。所以,我们只需要把配置文件中的 css、js 和 images 属性值设置为 jsDelivr 提供的地址就可以了。

以下面我的配置为例:

1
2
3
4
5
# Assets
# Accelerate delivery of static files using a CDN
css: https://cdn.jsdelivr.net/gh/smpower/smpower.github.io/css # css
js: https://cdn.jsdelivr.net/gh/smpower/smpower.github.io/js # js
images: https://cdn.jsdelivr.net/gh/smpower/smpower.github.io/images # images

打开本站的控制台,刷新一下页面你会发现所有的静态资源都是从上面的 cdn 中加载的,并且访问速度相当给力,整个页面的加载用时在 3s 以内,这速度简直完爆 GitHub Pages。

还在等什么,在你的网站上也搞一哈吧!Happy Coding!