GitHub静态资源访问免费CDN提速

JSDelivr 是一个免费开源的 CDN 解决方案，用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。我们来到其官网，可以看到它的介绍 Open Source CDN free, fast, and reliable。（免费、快速、可靠，不过据说可能会投毒广告，表示目前还没见过广告）

用 Github Pages 部署 Hexo，用户体验一直不是很好。为了提高用户体验，不妨结合 JSDelivr 来搭建我的个人博客。下面我就来看看 JSDeliver + Github 如何是实现静态资源加速。

新建 Github 仓库

新建 Github 仓库。

接着在本地电脑克隆上图仓库。

1 2	cd your file https://github.com/shifpeng/jsDelivr.git

上传需要的资源

复制需要的静态资源到本地git仓库中，提交到 Github 仓库上。

cd 到 git 仓库目录下
git status
git add .
git commit -m 'first commit'
git push

注：JSDelivr 不支持加载超过 20M 的资源，所以一些视频最好压缩到 20M 以下。

发布仓库

其实不发布也可以，可根据实际情况自行决定。

发布版本号为v1.0（自定义）。

通过 JSDelivr 引用资源

官网给的使用方法：

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

// load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

结合我创建的 jsDeliver 项目：

1	https://cdn.jsdelivr.net/gh/shifpeng/jsDelivr/blog/system/header_img/archive_bg.jpg

Hexo +Hexo-theme-livemylife主题开启jsdelivr

因为这个主题是直接在主题中集成了jsdelivr,比如：

因此不需要再创建单独的仓库来管理这些文件

所以只需要在外层目录的_config.yml文件中增加以下

# CDN Setting
# Docs: https://www.jsdelivr.com/?docs=gh
# If Github Pages deploy，you can ues jsdelivr settings
#
jsdelivr:
  jsdelivr_url: https://cdn.jsdelivr.net/gh/
  github_username: V-Vincen

hexo d之后，我们访问博客就会发现，资源文件已经是通过CDN了

注意： 这个配置仅适用于，你是以 Github Page 方式来部署博客的。其实说的在简单点，hexo-theme-livemylife 主题，将博客 Github Page 整个仓库做了 CDN 的加速。如下图这是博主本人自己的博客。

最后还有一点需要注意： 如果你在本地调试自己写的博客时，切记先将该配置先注释掉，再 hexo s。因为如果你不注释掉的话，localhost:4000 启动后的静态资源路径，全部是指向你的 Github 博客仓库的，会导致你无法实时读取到本地静态资源。所以切记先注释掉该配置，再启动，等调试完成后再开启配置，然后生成静态页面，最后推送到远程仓库。

JsDelivr CDN 缓存刷新

博主在使用 JsDelivr CDN 时，曾遇到了这样一个问题。在一次调整 hexo-theme-livemylife 主题 css 样式时，我修改了某个 css 文件，然后提交到了 Github 仓库，当我部署完成了自己的博客后。在游览器中预览自己的博客时，发现刚才修改的样式并没有生效。进过一系类的排查，终于找到了问题所在 JsDelivr CDN 缓存是有时效性的。

在网上看到谋篇文章里是这样说的：JsDelivr 提供的全球 CDN 加速，CDN 的分流作用不仅减少了用户的访问延时，也减少的源站的负载。但其缺点也很明显：当网站更新时，如果 CDN 节点上数据没有及时更新，即便用户再浏览器使用 Ctrl +F5 的方式使浏览器端的缓存失效，也会因为 CDN 边缘节点没有同步最新数据而导致用户端未能及时更新。

CDN 边缘节点对开发者是透明的，相比于浏览器 Ctrl+F5 的强制刷新来使浏览器本地缓存失效，开发者可以通过 CDN 服务商提供的“刷新缓存”接口来达到清理 CDN 边缘节点缓存的目的。这样开发者在更新数据后，可以使用“刷新缓存”功能来强制 CDN 节点上的数据缓存过期，保证客户端在访问时，拉取到最新的数据。

对于 JsDelivr，缓存刷新的方式也很简单，只需将想刷新的链接的开头，如下：

1	https://cdn.jsdelivr.net/...

替换成：

1	https://purge.jsdelivr.net/...

即可实时刷新。

比如我的：

1	https://purge.jsdelivr.net/gh/shifpeng/shifpeng.github.io

所以当你更新了自己博客到 Github 仓库后，记得及时更新 JsDelivr CDN 缓存。

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！