在去年的时候分享了几篇文章如何通过 Hexo 部署个人博客,当时提供了 Github 和个人服务器两种选项。后者虽稳定但成本相对较高,而 Github Page 虽然免费但访问速度有时实现感人。
今天就介绍如何通过 Jsdelivr 实现 Github Page 静态资源 CDN 加速,从而实现更快的响应速度。
1. 仓库创建Jsdelivr 需要搭配 Github 进行使用,需要先在 Github 上新建一个公开仓库。
仓库名称根据的你偏好自定义,需要注意仓库要设置为公开。
2. 资源上传完成仓库创建之后将你所需要加速的静态资源文件推送到此仓库下,如我将 Hexo 主题目录下的静态样式文件上传到仓库中。
这里需要注意一点经测试图片等资源加速效果不明显,有时更出现无法加载的情况,因此推荐只加速静态样式等文件。若需要实现图片等资源访问加速,建议通过图床等服务,市面上存在不少免费的图床服务可供选择。
3. 资源发布上传资源到仓库之后,需要通过 Github 自带的发布功能将文件打包才能利用 Jsdelivr 实现 CDN 加速。
点击仓库最右侧的 Release 选择新建 Create a new release 。
在打开的页面中填写相应的信息创建即可,记住这里创建的 Tag 名称,后续将会用到,
创建完 Release 再次进入该页面即可看见如下内容,最左侧是你创建的 Tag 标签名称。
4. 测试访问完成上述步骤之后即可通过 jsdelivr 访问仓库文件,访问地址模板如下:
https://cdn.jsdelivr.net/gh/
如我的 Github ID 为 great-jin ,新建的资源仓库名称为 hexo-cdn ,发布的资源标签为 v-1.0 ,并在仓库中上传了 /js/text.js 文件,那么我的访问地址则为如下:
https://cdn.jsdelivr.net/gh/great-jin/hexo-cdn@v-1.0/js/text.js
在浏览器中输入上述文件,能显示对应的文件内容则表明配置成功。
当上述的访问地址中不添加 tag 版本时,默认读取最新的版本,需要注意的是每次修改文件之后若需要读到最新的配置都需要发布最新的 release 。
5. CDN替换在测试文件可以正常访问之后即可将 Hexo 工程的的样式等文件进行替换。
如我使用的 Matery 主题在 _config.yml 配置中即可替换掉样式文件访问路径。