0%

Hexo+Next使用CDN加速网站以及静态文件

此博客的域名:www.zhyong.cn 已经备案成功,于是就想着使用CDN(国内CDN都要求备案)来进行加速,使得网站速度更加快。于是选定老牌的CDN服务:又拍云 ,简单说一下遇到的CNAME的问题。

使用CDN时CNAME的设置

简单说下,CDN的全称是Content Delivery Network,即内容分发网络。详见百度百科,使用又拍云必须进行实名认证(上传身份证等)且域名必须备案,若网站为HTTPS访问,则必须上传证书且在CDN加速的HTTPS中设置。

添加加速域名时,会生成一个CNAME,需要在域名管理中进行配置,将加速域名的CNAME指向生成的CNAME。

然后在回源管理——源站设置中,设置服务器IP。

这样就由原来的域名直接指向服务器改为域名指向CDN,再指向服务器,实现CDN加速。

如何判断是否成功使用了CDN

在命令行中使用命令:ping www.zhyong.cn进行测试:

1
2
3
4
5
6
7
8
9
10
正在 Ping nm.aicdn.com [120.192.92.219] 具有 32 字节的数据:
来自 120.192.92.219 的回复: 字节=32 时间=35ms TTL=51
来自 120.192.92.219 的回复: 字节=32 时间=36ms TTL=51
来自 120.192.92.219 的回复: 字节=32 时间=34ms TTL=51
来自 120.192.92.219 的回复: 字节=32 时间=34ms TTL=51

120.192.92.219 的 Ping 统计信息:
数据包: 已发送 = 4,已接收 = 4,丢失 = 0 (0% 丢失),
往返行程的估计时间(以毫秒为单位):
最短 = 34ms,最长 = 36ms,平均 = 34ms

出现aicdn则说明成功加速。

为验证效果,使用站长ping工具:

效果非常明显!

Next主题中的文件改用CDN

网站使用Valine评论系统和不蒜子统计(若未使用则不需要更改),用浏览器的开发者工具(浏览器F12)发现这两个相关的静态文件加载速度很慢(以Time排序,且测试了多次)。

于是我们进行响应的调整,使用此CDN,在主题配置文件中搜索valine,找到下面部分:

theme\next\_config.yml
1
2
3
4
5
6
7
# valine
# See: https://github.com/xCss/Valine
# Example:
# valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.4/Valine.min.js
- valine:
+ valine: https://cdn.jsdelivr.net/npm/valine@1.3.9/dist/Valine.min.js

修改不蒜子,改用CDN加速:

themes\next\layout\_third-party\analytics\busuanzi-counter.swig
1
2
3
4
 {% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
- <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+ <script async src="https://cdn.busuanzi.ibruce.info/cdn/busuanzi/2.3/busuanzi.pure.mini.js"></script>

这样即可开启不蒜子CDN加速。

同样再次测试,按Time排序,现在二者都排在后面了,加载时间更是大大缩短,效果非常明显。

不蒜子js文件加载时间

Valine评论系统js加载时间