使用 jsDeliver+Github 作为免费的 CDN

使用 jsDeliver+Github 作为免费的 CDN

前言

CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。

在国内访问并加载 Github 的资源是很慢的,jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长,包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。我们可以将博客内一些经常访问的资源比如图片、js文件、css文件放到 Github,然后使用 jsDeliver + Github 搭建免费的 CDN,那么通过加速后的 CDN 访问并加载资源的速度是非常可观的😎 !

jsDeliver官网主页

通过下图的官网首页可以看到 jsDeliver 同时支持 npm、Github 和 WORDPRESS 的,不过我们下面只谈 Github 上的使用。

由于某些原因,很多公用免费的 CDN 资源在中国大陆并不很好用,就算是付费的,也有一定的限制,例如每天的刷新次数有限之类的。那么 jsDeliver 也是在中国大陆唯一有 license 的公有 CDN,而且实际使用中的访问速度也是极快的, Wow,it's Awesome ❗

有些地方没有数据,这是美中不足的地方,但是毕竟是公用免费

使用 Github + jsDeliver 搭建 CDN

jsDeliver 可以直接集成 Github,只要通过符合 jsDliver 访问规则的 URL 进行访问,就可以加速访问到 Github 上的静态资源。例如本站的表情包可以通过 jsDeliver 访问:https://cdn.jsdelivr.net/gh/Sanarous/files@1.0/emojis/huaji.gif

Github 上传资源

在自己的 Github 上 new 一个新的 repository,仓库名字可以任意,然后直接创建就可以。

接下来就是把静态资源导入到这个仓库中,如果资源较少,可以直接在网页端拖到仓库中,方便快捷;如果资源较多的话,比如导入表情包,那么建议使用 Git 把仓库 clone 到本地,然后在本地整合好文件夹后,再使用 Git Bash 等工具上传到仓库中,命令依次如下:

git add .

git pull 

git commit -m "上传表情包资源到仓库中"

git push origin master

jsDeliver 访问

根据官方文档,jsDeliver 访问 Github 资源的要求 URL 规则如下:

https://cdn.jsdelivr.net/gh/user/repo@version/file

其中:
https://cdn.jsdelivr.net/gh      这是前缀
/user      user 是你的 Github 用户名
/repo@version     repo 是仓库名,version是版本号,见下
/file      就是文件名啦

一般而言,不创建版本号也可以直接访问,如访问 jquery 的 CDN 资源时:

https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

但是上述不推荐用于生产环境👊 ,直接请求最新版本在资源堆积过多后很容易出问题,尤其是在发布版本较多并且改动较大时。不过个人博客倒是无所谓,一般而言还是推荐使用以确切版本名进行访问,如下所示访问 jquery3.2.1 版本的 CDN 资源:

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

那么根据版本号,我们只需要在创建好的 Github 仓库中发布版本就可以了。

第一步:在建立的仓库中找到 Release 版本发布按钮,点击进入。

第二步:点击 Draft a release,准备发布

第三步: 填写版本发布信息,并完成发布

按照上面的方法发布版本后,我们就可以根据版本号直接访问资源了,比如可以直接访问:https://cdn.jsdelivr.net/gh/Sanarous/files@1.0/emojis/huaji.gif 就可以获取 CDN 加速访问!

本文由 Sanarous 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
本文链接:https://bestzuo.cn/posts/jsdliver-github.html
最后更新于:2020-07-08 20:23:27

切换主题 | SCHEME TOOL