使用 jsDelivr CDN加速 GitHub Pages 博客的静态资源


CDN加速

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

放在Github的资源在国内加载速度比较慢,因此需要使用CDN加速来优化网站打开速度,jsDelivr + Github便是免费且好用的CDN,非常适合博客网站使用。

1.首先新建GitHub仓库

  • 仓库名称随便
  • 仓库属性Public,不然jsDelivr无法访问
  • 初始化Readme

2.克隆创建仓库到本地

  • 本地新建一个文件夹,文件夹名称自定义,然后进入文件夹
  • shift+右键打开Git Bash Here 克隆仓库到指定文件夹
git clone //加上仓库的链接

3.上传需要加速的文件

把要加速的文件复制到克隆的文件夹里

注意:JSDelivr不能加速超过50M的文件,如果文件超过50M,可以分次上传。

然后再依次执行下面的命令:

git config --global user.name "用户名"
git config --global user.email "邮箱"
git init             #表示在当前的项目目录中生成本地的git管理
git add .            #会把本地所有untrack的文件都加入暂存区
git commit -m “注释”	#命令将暂存区内容添加到本地仓库中。
git push             #用于从将本地的分支版本上传到远程并合并。

然后去GitHub仓库查看效果即可。

4.发布仓库

  • 进入仓库点击release,进行版本的发布。
  • 自定义发布版本号,添加标题和描述等。

版本便于我们区别就行,更新一次就更新一下版本。

5.jsDelivr加速并引用资源

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

格式:https://cdn.jsdelivr.net/gh/username/[email protected]/file

例如:

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

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

  • 加载任何 GitHub 版本、提交或分支

注意:我们建议对支持 npm 的项目使用 npm

https://cdn.jsdelivr.net/gh/user/[email protected]/file
  • 使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
  • 完全省略版本以获取最新版本,不应在生产环境中使用它
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
  • .min添加到任何JS / CSS文件以获得缩小版本,如果不存在,jsDelivr将为您生成
https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js
  • 在末尾添加 / 以获取目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/
  • 刷新 JsDelivr 缓存

你的 CDN 链接想手动刷新时,把链接前缀替换成

https://purge.jsdelivr.net/

文章作者: 因是
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 因是 !
评论
  目录