celloworldNavigate back to the homepage

使用 CDN 优化 Gatsby 站点的访问速度

hidaris
March 14th, 2020 · 1 min read

互联网为人们提供了一个记录生活、分享见解的平台,从诞生发展至今日,吸引了无数人在上面留下自己的足迹,但是随着人们隐私意识的日益提高,越来越多的人希望可以有一个独立的、由自己掌控的平台,比如 GitHub Pages

在这样一个平台里你可以使用自己的域名;搭配自己中意的主题,如果你比较 Geek,也可以根据自己的喜好,任意 DIY。

目前常用的博客生成工具有Jekyll、Hexo、Hugo,以及本站在用的 Gatsby ,基本都可以简单粗暴的搭出一个性能尚可的博客,但是最近由于 GFW 的原因,导致静态资源请求速度慢,最终导致全站访问速度被拖慢(国内平均1600ms+的延迟)。最理想的解决方案是为所有的静态资源加上一个全球加速 CDN,比如 jsDelivr

jsDelivr

jsDelivr 是一个免费、开源、快速,稳定的 CDN, 它使用了独特的 Multi-CDN 架构,构建在 StackPath,Cloudflare,Fastly 和 Quantil 提供的 CDN 网络之上。另外,它在 CDN 很少或没有涉及的区域使用定制服务器,它的智能负载平衡系统可确保最佳的性能。不过, jsDelivr 最吸引我的地方在于,它在中国大陆也拥有超过数百个节点,是唯一具有中国政府颁发的有效 ICP 许可证的公共 CDN。

实现原理

Github 仓库做 CDN 存储,jsDelivr 做 CDN 服务器。

流程

  • 在本地写博客,推送到对应的 Github 仓库;

Gatsby 允许我们为所有的静态资源设置一个前缀,我们可以利用它快速的配置 CDN。 操作:打开 gatsby_config.js 填写 assetPrefix

config prefix

  • 手动发布博客到 Github Release,为最新的 commit 打一个 tag;

jsDelivr 有几种访问资源的方式,这里将介绍如何通过 releases 访问。 操作:在仓库首页找到 “releases”

blog release

选择 “Draft a new release”

draft release

输入版本号,要与 assetPrefix 中的 tag 值同步。输入完毕后点击下方绿色按钮。

release tag

发布之后,用户访问博客静态资源时将请求 jsDelivr 的 CDN 服务器,jsDelivr 会去对应的 Github Release 拉取对应版本的文件,返回给用户。

总结

加上 jsDelivr CDN 后,博客在国内的访问速度得到了质的提升,文中尚有一些手动的操作可以做进一步的优化,比如加上 TravisCI 来做自动 Release 等,感兴趣的人可以自己尝试。

More articles from hidaris

My first post using Novela by Narative

With the growing community interest in Gatsby, we hope to create more resources that make it easier for anyone to grasp the power of this incredible tool.

April 30th, 2019 · 2 min read

编译器设计:what is compiler?

Compilers are percieved to be magical artifacts, carefully crafted by the wizards, and unfathomable by the mere mortals.

March 26th, 2019 · 1 min read
© 2016–2020 hidaris
Link to $https://twitter.com/zuodadaLink to $https://github.com/hidarisLink to $https://instagram.com/hidaris128