今天实在被 github page 的加载速度恶心到了,测试了几个CDN效果,虽然有免费流量等活动,总感觉被收割了什么
中间测试了 netlify,开始对它速度不是很满意,但之后测试了几个还是回到了它,Orz
最终配合利用各种手段还算是达到了收费 CDN 的效果(有项目体量限制)🤣
建议jsdelivr只做 JS、CSS 加速就好,毕竟好用的公共库用一个少一个
- netlify - 资源托管、cdn 加速
- cloudflare - cdn 加速
- lazyload - 图片异步延迟加载
- jsdelivr - 静态资源加速
1. Netlify
选择访问 github 仓库
选择 github page 项目
因为上传至github page为静态页面不需要编译,这里选择直接部署即可
配置 netlify 域名解析
这里正常情况 primary domain 应为绿色表示
正常状态
,但由于开启了 cloudflare cdn 导致 DNS 检测异常,检测能正常访问忽略此警告配置SSL/TLS证书
由于我在 Netlify 前面使用 CloudFlare CDN,所以需要配合 CF 进行证书认证,非 CF 可以尝试右边的
Let's Encrypt
证书(这里我已经添加了证书,所以选择更新自定义内容证书)i. 先在 CF 创建
源证书
ii. 之后生成 PEM 格式密钥,记录源证书为 1,私钥为 2
iii. 访问此页面(管理 Cloudflare Origin CA 证书),记录根证书为 3
iv. 回到 Netlify,按上面对应序号填写证书内容后保存
2. CloudFlare
配置 CNAME 指向 Netlify 自定义域名,并开启 CDN 加速
选择加密模式为
完全
或完全(严格)
开启
Always HTTPS
和HSTS
3. lazy load
项目地址:https://github.com/Troy-Yang/hexo-lazyload-image
按文档安装、配置即可
$ npm install hexo-lazyload-image --save
4. jsdelivr
由于jsdelivr自带 50M 项目限制,所以全局加速是不现实的(此处项目较小的可以全局使用),建议只加速 JS、CSS 即可,下面只做理论介绍
官网:https://www.jsdelivr.com/?docs=gh
由于我配置了 hexo-lazyload-image,所以直接粗暴的修改源码(这里只对应 posts 文章内的静态资源),代价就是本地测试没法加载图片,有能力的可以写个测试和发布分别加载不同地址即可
位置:
<blog_path>/node_modules/hexo-asset-image/index.js
对应其他静态文件,如头像、二维码等,直接修改成绝对地址即可(不利于长期维护)
P.S. 其实可以自定义在 config 中自定义一个开关和加载路径方便未来维护,这里有插件hexo-cdn-jsdelivr实现,本地测试没有问题但是generate时总会出错,可能和其他插件有冲突,我暂时没有去仔细研究