在去年的时候分享了几篇文章如何通过 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>/<repository-name>@<tag-name>/<file-path>
如我的 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
配置中即可替换掉样式文件访问路径。