使用jsDelivr+github搭建免费的cdn

2020-06-12 22:22:31 编程学习干货jsDeliverCND

4 / 2751

前言: 国内加载 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 仓库

2. 克隆 Github 仓库到本地

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

然后再去 Github 仓库，复制仓库的 ssh 地址。 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 提交

提交右边有个向下的小箭头，可以点选提交并推送。直接完事，然后去github上创建新的版本就可以了。 成功后点击推送。这就提交到了 Github 接下来就是重复 4 发布版本了。