Learning Man's Blog

Github Page 加速

字数统计: 721阅读时长: 2 min
2020/08/02 Share

今天实在被 github page 的加载速度恶心到了,测试了几个CDN效果,虽然有免费流量等活动,总感觉被收割了什么

中间测试了 netlify,开始对它速度不是很满意,但之后测试了几个还是回到了它,Orz

最终配合利用各种手段还算是达到了收费 CDN 的效果(有项目体量限制)🤣

建议jsdelivr只做 JS、CSS 加速就好,毕竟好用的公共库用一个少一个

  1. netlify - 资源托管、cdn 加速
  2. cloudflare - cdn 加速
  3. lazyload - 图片异步延迟加载
  4. jsdelivr - 静态资源加速

1. Netlify

  1. 选择访问 github 仓库

    -w1241

  2. 选择 github page 项目

    -w1246

  3. 因为上传至github page为静态页面不需要编译,这里选择直接部署即可

    -w1238

  4. 配置 netlify 域名解析

    这里正常情况 primary domain 应为绿色表示正常状态,但由于开启了 cloudflare cdn 导致 DNS 检测异常,检测能正常访问忽略此警告

    -w1222

  5. 配置SSL/TLS证书

    由于我在 Netlify 前面使用 CloudFlare CDN,所以需要配合 CF 进行证书认证,非 CF 可以尝试右边的Let's Encrypt证书(这里我已经添加了证书,所以选择更新自定义内容证书)

    -w957

    i. 先在 CF 创建源证书

    -w1086

    -w825

    ii. 之后生成 PEM 格式密钥,记录源证书为 1,私钥为 2

    -w819

    iii. 访问此页面(管理 Cloudflare Origin CA 证书),记录根证书为 3

    -w894

    iv. 回到 Netlify,按上面对应序号填写证书内容后保存

    -w638

2. CloudFlare

  1. 配置 CNAME 指向 Netlify 自定义域名,并开启 CDN 加速

    -w1038

  2. 选择加密模式为完全完全(严格)

    -w1065

  3. 开启Always HTTPSHSTS

    -w1047

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

-w1171

  1. 由于我配置了 hexo-lazyload-image,所以直接粗暴的修改源码(这里只对应 posts 文章内的静态资源),代价就是本地测试没法加载图片,有能力的可以写个测试和发布分别加载不同地址即可

    位置:<blog_path>/node_modules/hexo-asset-image/index.js

    -w1087

  2. 对应其他静态文件,如头像、二维码等,直接修改成绝对地址即可(不利于长期维护)

    -w692

P.S. 其实可以自定义在 config 中自定义一个开关和加载路径方便未来维护,这里有插件hexo-cdn-jsdelivr实现,本地测试没有问题但是generate时总会出错,可能和其他插件有冲突,我暂时没有去仔细研究

参考资料

  1. https://blog.ops-coffee.cn/s/11-yhyohtdsbl9ffnvcs6w
CATALOG
  1. 1. Netlify
  2. 2. CloudFlare
  3. 3. lazy load
  4. 4. jsdelivr
  5. 参考资料