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

￡神魔★判官ぃ 2024-03-22 15:55 61阅读 0赞

### 1 cdn简介 ###

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

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

### 2 cdn请求分发原理 ###

![cdn分发原理图][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地址][jsDelivr] 。目前，它提供了针对npm、Github和WordPress的加速服务，只需要一行代码就可以获得加速效果。只要我们的项目中用到了第三方的静态资源，譬如JavaScript脚本，css样式表，图片，图标，Flash等静态资源文件都应该考虑接入到CDN中

### 4.jsDelivr 的简单使用 ###

我们以加载jQuery和Bootstrap 为例

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

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

### 5 jsDelivr + Github 的具体实现 ###

#### 5.1 新建Github仓库 ####

![f1f3cbacc54eb4abff0ed4af56cfb7d1.png][]

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

![ad0914e5f5a709797254ca7bcd631006.png][]

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

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

$ git clone https://github.com/xiezhr/mycdn.git
    Cloning 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 0
    Receiving objects: 100% (3/3), done.

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

需要用到的命令如下

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

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

git 窗口输入如上命令之后，文件都上传到了github仓库  
![e73807875384b87487c9a6e729f11ba1.png][]

#### 5.4 点击release 发布版本 ####

![975fe19ae2d850fa9f45938053c5b9fe.png][]  
自定义发布版  
![fcf15cb10546ee3672eea6235a80fa42.png][]

#### 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.1
    https://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.xxx
    libs:
      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][http_localhost_4000] 访问博客，你会发下博客访问速度快了很多。到此大功告成！！！

[cdn]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7dadd775a2d6488480e73d057b01b532.png
[jsDelivr]: https://github.com/jsdelivr/jsdelivr
[f1f3cbacc54eb4abff0ed4af56cfb7d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b3cf05c564cf45d1bc501c6566fac5d7.png
[ad0914e5f5a709797254ca7bcd631006.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/defa7709d13344c0996cbf22d7927f5b.png
[b5b3417df6d4692ce5e42aee36934a7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/67e7a0a0dc9b451fab95421a97b4d9e0.png
[e73807875384b87487c9a6e729f11ba1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d926efad41084a9e8f0d28a65ef78c9f.png
[975fe19ae2d850fa9f45938053c5b9fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/65c8d1afe0634ff28b82028c6af846a8.png
[fcf15cb10546ee3672eea6235a80fa42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ab4cc55c74c44a63a7194986859f64a1.png
[http_localhost_4000]: http://localhost:4000/