如何使用 jsDelivr+Github 实现免费 CDN 加速?

xiezhr

关注

发布于: 2021 年 03 月 10 日

序言

个人采用 hexo 搭建了博客，博客也刚上线不久，博客地址：https://www.xiezhrspace.cn 。欢迎小伙伴访问，疯狂暗示来关注来访问（‐＾▽＾‐）。

虽然放到了云服务器上，但是由于博客上传的图片等资源越来越多，请求的资源也越来越多，博客访问速度越来越慢，简直不忍直视。

愁了好久，一直在想办法优化，自己在网上也找资料，在和博客交流群的小伙伴交流后便有了解决方案，【使用 cdn 加速】。

但是呢问题又来了，很多云服务提供商的 cdn 加速都是要根据流量花钱的。虽然网站访问量不多，但是呢能白嫖当然是最好的了。

在小伙伴推荐后有了两种白嫖方案 1、jsDelivr+Github 2、又拍云（需要申请账号加入又拍云联盟，个人的申请还未下来）。都说又拍云加速会更好一些，但是自己的申请还没办好，而博客访问优化又迫在眉睫，固先采用了第一个方案：jsDelivr+Github 的方案。

下面就以 jsDelivr+Github 实现免费 cdn 加速为例，记录自己优化过程。

1 cdn 简介

cdn 全称 Content Delivery Network 即内容分发网络。

CDN 是一组分布在多个不同地方的 WEB 服务器，可以更加有效的向用户提供资源，会根据距离的远近来选择。使用户能就近的获取请求数据，解决网络拥堵，提高访问速度，解决由于网络带宽小，用户访问量大，网点分布不均等原因导致的访问速度慢的问题。

2 cdn 请求分发原理

（1）用户向浏览器提供需要访问的域名；

（2）浏览器调用域名解析库对域名进行解析，由于 CDN 对域名解析过程进行了调整，所以解析函数库一般得到的是该域名对应的 CNAME 记录，为了得到实际的 IP 地址，浏览器需要再次对获得的 CNAME 域名进行解析以得到实际的 IP 地址；在此过程中，使用的全局负载均衡 DNS 解析。如根据地理位置信息解析对应的 IP 地址，使得用户能就近访问；

（3）此次解析得到 CDN 缓存服务器的 IP 地址，浏览器在得到实际的 ip 地址之后，向缓存服务器发出访问请求；

（4）缓存服务器根据浏览器提供的要访问的域名，通过 Cache 内部专用 DNS 解析得到此域名的实际 IP 地址，再由缓存服务器向此实际 IP 地址提交访问请求；

（5）缓存服务器从实际 IP 地址得到内容以后，一方面在本地进行保存，以备以后使用，二方面把获取的数据放回给客户端，完成数据服务过程；

（6）客户端得到由缓存服务器返回的数据以后显示出来并完成整个浏览的数据请求过程。

3 jsDelivr 简介

是一个免费、快速和可信赖的 CDN 加速服务，声称它每个月可以支撑 680 亿次的请求。服务在 Github 上是开源的，jsDelivr地址。目前，它提供了针对 npm、Github 和 WordPress 的加速服务，只需要一行代码就可以获得加速效果。只要我们的项目中用到了第三方的静态资源，譬如 JavaScript 脚本，css 样式表，图片，图标，Flash 等静态资源文件都应该考虑接入到 CDN 中

4.jsDelivr 的简单使用

我们以加载 jQuery 和 Bootstrap 为例

// load jQuery v3.2.1https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js// load bootstrap v4.4.1https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.js

复制代码

jsDelivr + Github 便是免费且好用的 CDN，非常适合博客网站使用

5 jsDelivr + Github 的具体实现

5.1 新建 Github 仓库

5.2 使用 git clone 命令将仓库克隆到本地

在要放仓库的本地目录右键 Git Bash Here（如果没有安装 git 的需要提前安装下，都是默认安装即可），并输入以下命令

git clone https://github.com/xiezhr/mycdn.git

复制代码

$ git clone https://github.com/xiezhr/mycdn.gitCloning into 'mycdn'...remote: Enumerating objects: 3, done.remote: Counting objects: 100% (3/3), done.remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0Receiving objects: 100% (3/3), done.

复制代码

5.3 将需要 cdn 加速的资源上传到 github 仓库

需要用到的命令如下

git add .                     //添加所有文件到暂存区git status                    //查看状态git commit -m '第一次提交'      //把文件提交到仓库 -m 后面的是备注信息git push                      //推送至远程仓库

复制代码

个人采用的是 hexo 博客框架，该框架的静态资源（css、js、图片等）都是放在 source 目录下面，所以呢我是将 source 目录真个上传上去，这样的好处是路径跟原来的保持一致，后面在调用的时候比较方便。

git 窗口输入如上命令之后，文件都上传到了 github 仓库

5.4 点击 release 发布版本

自定义发布版

5.5 通过 jsDelivr 引用资源

通过如下地址应用资源

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

复制代码

举个栗子,获取 source/bgimg 路径下的 back-rain.png

https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png       ## 获取最新资源https://cdn.jsdelivr.net/gh/xiezhr/mycdn@1.0/source/bgimg/back-rain.png   ## 获取1.0版本的资源

复制代码

注意： 版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源，除此之外还可以使用某个范围内的版本，查看所有资源等，具体使用方法如下：

// 加载任何Github发布、提交或分支https://cdn.jsdelivr.net/gh/user/repo@version/file
// 加载 jQuery v3.2.1https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
// 使用版本范围而不是特定版本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 // 完全省略该版本以获取最新版本https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js // 将“.min”添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js // 在末尾添加 / 以获取资源目录列表https://cdn.jsdelivr.net/gh/jquery/jquery/

复制代码

6 将 hexo 中用到静态资源的地方换成 cdn 加速

# 使用到的前端库，可按需替换成对应的CDN地址，如果下面未指定具体的版本号，使用最新的版本即可.# 注：jsdelivr可以自动帮你生成.min版的js和css，所以你在设置js及css路径中可以直接写.min.xxxlibs:  css:    matery: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/matery.css    mycss: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/my.css    fontAwesome: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/awesome/css/all.css # V5.11.1    materialize: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/materialize/materialize.min.css # 1.0.0    aos: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/aos/aos.css

复制代码

都换好之后，执行如下命令

hexo cl & hexo g & hexo s

复制代码

浏览器地址栏输入 http://localhost:4000 访问博客，你会发下博客访问速度快了很多。到此大功告成！！！

发布于: 2021 年 03 月 10 日阅读数: 12

原文链接:【http://xie.infoq.cn/article/39e6360892edf0ee71c957972】。文章转载请联系作者。

xiezhr

关注

把分享变成一种习惯，再小的帆也能远航 2021.03.01 加入

还未添加个人简介

发布

暂无评论

创作场景

如何使用 jsDelivr+Github 实现免费 CDN 加速?

序言

1 cdn 简介

2 cdn 请求分发原理

3 jsDelivr 简介

4.jsDelivr 的简单使用

5 jsDelivr + Github 的具体实现

5.1 新建 Github 仓库

5.2 使用 git clone 命令将仓库克隆到本地

5.3 将需要 cdn 加速的资源上传到 github 仓库

5.4 点击 release 发布版本

5.5 通过 jsDelivr 引用资源

6 将 hexo 中用到静态资源的地方换成 cdn 加速

xiezhr

评论