国内访问 Hexo 优化加速(CDN链接替换)
假设你刚搭建了个人博客,发现网站的访问速度实在堪忧,怎么办?解决方法无非以下几种方法:
- 有经济实力的,考虑提升硬件性能和带宽(购买高级服务器、增大带宽)
- 正确使用 CDN 加速源站和图片
- 如果你的个人博客网站是动态网站(如 Wordpress),但实在没有必要必须是动态网站时,可尝试改成静态框架 [1]
如果以上的方法你都尝试过,但博客网站可能遇到页面卡顿、显示不全、功能异常(图标、评论、搜索等各种异常)等情况,比如:
而使用魔法访问时却一切正常。这时候我们该考虑是不是 CDN 出现问题了。
本地调试自己的博客网站后,打开浏览器的开发者面板(F12)->禁用缓存 ->点击网络选项卡 ->刷新页面:
你会发现一些 js 文件或 css 文件无法被加载,这些文件大多来源于 jsdelivr 的 CDN 连接。
不熟悉 CDN 的小伙伴可以理解为,jsdelivr 里存放了大量的 js 文件或 css 文件,你的博客网站需要引入这些文件,但是由于某种原因,jsdelivr 结点的链接状况在国内时好时坏(使用魔法就好)。
这时我们可以考虑把获取这些 js 或 css 文件的链接替换掉。在你的主题配置上进行替换,这里以 Butterfly 主题为例,在主题配置文件下找到:
1 | CDN: |
建议你把涉及 jsdelivr 都替换掉吧,让中国宝宝访问你的博客网站更快更方便。
各种资源 CDN 链接参考:Butterfly CDN 链接更改指南,替换 jsdelivr 提升访问速度 | 张洪 Heo (zhheo.com)
也可以在下面的两个网站找:
也可以把文件放在自己的存储桶中(注意看好你的钱包)。
参考:
- Butterfly CDN 链接更改指南,替换 jsdelivr 提升访问速度 | 张洪 Heo (zhheo.com)
- jsdelivr 炸了如何解决|用这些免费 cdn_地域男孩的博客-CSDN 博客
- Butterfly 安裝文檔(四) 主題配置-2 | Butterfly
- fontawesome 图标问题 · Issue #1243 · jerryc127/hexo-theme-butterfly (github.com)
其他优化博客网站的好文(我没仔细看,但是他讲的好有道理):
详看我的这篇文章:部署 Hexo 个人博客框架到服务器 ↩︎
fontawesome 可以考虑更换图标库,请看我之前的文章 装点你的 Butterfly 博客 ↩︎
处理这个问题前请看我之前的文章:Hexo 框架 Btterfly 主题引入 Waline 评论系统及国内正常访问 ↩︎