使用jsDelivr+github搭建免费的cdn

编程学习 干货jsDeliverCND
4 / 2028

前言: 国内加载 github 的资源比较慢,需要使用 CDN 加速来优化网站打开速度,于是使用 jsDelivr+github 搭建免费的 cdn。jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

CDN 维基百科解释

内容分发网络(英语:Content Delivery Network 或Content Distribution Network,缩写:CDN)是指一种透过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。

写给小白的, 懂的前面可以略过...

npm:

NPM 是 JavaScript 的包管理器,也是世界上最大的软件注册中心。发现可重用代码的包——并以强大的新方式组装它们。每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package(即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
所以 jsDeliver+npm 就是把 npm 上的包当做 cdn 的存储。

使用教程:

// load any project hosted on npm
// 加载以NPM为存储的任何项目
https://cdn.jsdelivr.net/npm/package@version/file
// load jQuery v3.2.1
// 比如加载Jquery3.2.1
https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
// use a version range instead of a specific version
//使用版本范围而不是特定版本
https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// omit the version completely to get the latest one
//完全忽略版本以获取最新版本,不建议使用
https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js

Github

gitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 git 作为唯一的版本库格式进行托管,故名 gitHub。

jsDeliver+Github 使用教程:

1. 首先创建一个 Github 仓库

22261017-b797b0c155a9c6df.webp

2. 克隆 Github 仓库到本地

先在本地创建一个文件夹,任意位置都可以(最好不要在 C 盘),然后进入到文件夹中。

然后再去 Github 仓库,复制仓库的 ssh 地址。 22261017-74988388bc17664f.webp cd 某个目录下, 在命令窗口中执行一下命令: git clone git@github.com:你的用户名/cdn.git

3. 上传文件到 Github 仓库

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

将你要上传的图片视频保存到刚才那个本地文件夹中(上传的单个文件不要大于 50M),然后在文件夹中右键 Git Bash Here, 执行一下命令: git status //查看状态 git add . //添加所有文件到暂存区 不要忘记后面那个. git commit -m '提交信息' //把文件提交到仓库 git push //推送至远程仓库 (注:jsDeliver 不支持加载超过 20M 的资源,所以一些视频最好压缩到 20M 以下)

4. 发布版本

QQ截图20200505122347.jpg 发布版本号1.0(自定义) 点击 release 发布,到现在就可以使用了。

5. 通过 jsDeliver 引用资源

文件网址位置:https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径 @发布的版本号 可以不写,默认就是最新版本。

//加载js
https://cdn.jsdelivr.net/gh/yremp/cdn@1.0/js/jquery.js
//加载图片
https://cdn.jsdelivr.net/gh/yremp/cdn@1.0/images/hb.png

重点:这个链接相当于一个外链,使用和直链一样.

更加具体的方法官网查看

https://www.jsdelivr.com/

6. 更新版本

方法一

可以跟上面 3、4 步骤一样去更新它。

方法二

还有更简便的,前提是已经安装了 TortoiseGit. 如果没有直接跳过此方法。 1、 首先右键 Git 提交

22261017-6603527b5df2f9d0.webp22261017-b235af8e103a6b13.webp 提交右边有个向下的小箭头,可以点选提交并推送。直接完事,然后去github上创建新的版本就可以了。22261017-e4fc582b0b300bf5.webp 成功后点击推送。 22261017-34a49f1f138c6340.webp 这就提交到了 Github 接下来就是重复 4 发布版本了。

百步小川
啊啊啊
Fordkey
维之初·老Designer
回复(4)