转自 https://zhuanlan.zhihu.com/p/76951130

本文在CSDN上的链接:https://blog.csdn.net/qq_36759224/article/details/86936453
本文在我博客上的链接:https://www.itrhx.com/2019/02/10/A18-free-cdn/
PS:移步到我博客可查看到最新文章!

本文有参考《jsDelivr+github使用教程,免费好用的cdn》—— By hojun

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

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

1、新建Github仓库

2、克隆Github仓库到本地

点击 Clone or download,一键复制仓库地址

在本地目录右键 Git Bash Here,执行以下命令:

git  git clone 一键复制的仓库地址

3、上传资源

复制需要上传的资源到本地git仓库(注:jsDelivr不支持加载超过20M的资源),在本地git仓库目录下右键 Git Bash Here,执行以下命令:

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

4、发布仓库

点击release发布

自定义发布版本号

5、通过jsDelivr引用资源

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

例如:

https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@1.0/images/trhx.png
https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.0.1/css/style.css
https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.3//The%20Pet%20Girl%20of%20Sakurasou.mp4

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

// 加载任何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/

免费CDN:jsDelivr+Github 使用方法的更多相关文章

  1. cdn jsdelivr + github releases 以wordpress sakura主题manifest为例

    1 创建github repository 在本地创建文件,这里为文件夹 /manifest 在github创建库wordpresscdn,上传 /manifest到库中 2 github relea ...

  2. 利用jsDeliver+github实现免费CDN

    title: 利用jsDeliver+github实现免费CDN jsDeliver jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长.包含 JavaScript 库.jQu ...

  3. 使用jsdelivr + GitHub + PicGo搭建免费图床

    前言 之前一直有开通有道云笔记会员,主要是为了会员markdown图片可以在线保存的功能,前一阵子会员到期,考虑这个功能可不可以自己单独实现,从而替代使用有道云会员. 通过网上搜索的方式,查询到了几种 ...

  4. PicGo+jsDelivr+GitHub搭建免费图床,Typora使用图床

    Github配置 首先,创建一个GitHub账号 然后添加一个仓库 创建完后点头像,Setting 然后点击Developer settings 然后点击Personal access tokens ...

  5. 利用服务器+jsDelivr+GitHub搭建咱的免费图床

    前言 有人就问了你这个标题写错了?不应该是PicGo+jsDelivr+GitHub搭建咱的免费图床吗? 2333,是一个上传程序啊,不系写错了. 程序介绍 目前程序已实现两种模式上传到GitHub或 ...

  6. 最全免费CDN公共库——网站提速

    开源静态文件 CDN 我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境.同时,我们也提供开源库源接入的入口,让所有人都可 ...

  7. 免费 CDN 玩法 —— 将整个网站打包成一个图片文件

    资源合并 前端开发者都知道,过多的请求对性能影响很大.而且有些 CDN 不仅按流量收费,请求数也收费,如果网页里有大量小文件,显然不划算. 为此不少开发者将零碎的小文件进行合并优化,例如 JS/CSS ...

  8. 免费 CDN 玩法 —— 文件一键上传到 NPM

    前言 unpkg.jsdelivr 等站点可加速 NPM 包文件,适合作为个人网站或演示案例的免费 CDN. 虽然上传文件到 NPM 很简单,创建 package.json 然后 npm publis ...

  9. 利用免费cdn加速webpack单页应用

    回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了:   1 2 3 4 5 6 MacBook-Pro:output ba ...

随机推荐

  1. jsp+servlet上传excel并将数据导入到数据库表的实现方法

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. js获取异步方法里面的数据

    这里介绍  五种方法(说白了本质 就三种) 1.callback回调函数  function getData(callback){ setTimeout(()=>{ let name = '哈哈 ...

  3. video踩坑

    查看以及修改video控件样式,原文地址:https://blog.csdn.net/z2181745/article/details/82531686 chrome浏览器,F12调出控制台左上角三点 ...

  4. 体验了一把最近很火的开源项目-MASA Blazor

    前言 很惭愧直到去年底才接触到Blazor.那什么是Blazor呢?相信大家都看过官方文档的详细说明,另外MASA团队也有不错的说明介绍 .用官方的话说Blazor是一个交互式客户端Web UI的框架 ...

  5. HTML5有哪些更新(部分)

    1. 语义化标签 header:定义文档的页眉(头部): nav:定义导航链接的部分: footer:定义文档或节的页脚(底部): article:定义文章内容: section:定义文档中的节(se ...

  6. drf中的请求与响应

    请求与响应(3星) 请求:Request REST framework 传入视图的request对象不再是Django默认的HttpRequest对象,而是REST framework提供的扩展了Ht ...

  7. vue学习day02

    vue 指令 1. 内容渲染指令 v-text 指令的缺点:会覆盖元素内部原有的内容! {{ }} 插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容! v-html 指令的作用: ...

  8. 配置docker阿里加速器

    阿里云会根据账号生成一个账号加速器地址,例如: https://jywd41dg.mirror.aliyuncs.com 将加速器地址配置到docker的daemon.json文件中:# 编辑daem ...

  9. git 在 pull 或者合并分支的时候会遇到下图这个界面

      可以不管(直接进入 3, 4 步), 如果要输入解释的话就需要 按键盘字母 i 进入 insert 模式 修改最上面那行黄色合并信息,可以不修改 // 黄色内容为默认的合并信息; 按键盘左上角 & ...

  10. 最新MATLAB R2021b超详细安装教程(附完整安装文件)

    摘要:本文详细介绍Matlab R2021b的安装步骤,为方便安装这里提供了完整安装文件的百度网盘下载链接供大家使用.从文件下载到证书安装本文都给出了每个步骤的截图,按照图示进行即可轻松完成安装使用. ...