使用CDN(jsdelivr) 优化博客访问速度

使用CDN(jsdelivr) 优化博客访问速度

2020-02-17阅读 3180

PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

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

本地创建一个CDN 库

本地创建一个文件夹用来存放需要上传的文件

 

比如我这里直接把主题的source文件夹放在CDN上了.因为访问博客的时候,浏览器请求的时候,先去请求这些JS,CSS,图片等资源,然后才会显示博客里面的内容,这也是为什么很多同学访问我的博客会一直卡在最后一公里,一直进不去的原因.

Github上创建一个repo

需要先在Github上创建一个repo来存放我们需要CDN来分发的文件

 

 

创建完仓库后,记得初始化这个仓库让Github自动生成一个readme.md 即可 不然后面执行命令时候会报错的

在创建完仓库后,需要你操作的第一个操作里面,选择即可

将CDN仓库克隆到本地

1) 复制链接

 

 

 

 

2)初始化一个新的本地仓库

 

在第一步创建的文件夹右键,Git Bash here ( 前提是安装了Git )

git init
git remote add origin + 复制的链接
git pull origin master #将仓库拉取到本地文件夹

 

3)为仓库添加文件

 

git add .

其中,. 表示添加所有文件

4)提交更新

git commit -m 'first commit' 其中''中的内容可自定义.即描述内容

其实这步操作是可以不用滴 0,0

5)推送本地文件到Github仓库

git push origin master # 将本地仓库文件推送到Github 仓库

 

 

为repo设置一个release

 

 

 

从jsdelivr 引用资源

使用方法:

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

比如:

我这里引用资源的话,就是这样的

https://cdn.jsdelivr.net/gh/Ifonly-go2019/[email protected]/source/

引用成功后,会看到这样的界面:

 

需要修改的地方

然后在主题的配置文件下

找到关于CDN加速的配置,填上这个链接即可

完成了,现在清空一下缓存来看一下访问速度

 

如果遇到资源更新

因为之前定义了版本后,资源更新后,就更改下版本后,然后在本地CDN仓库添加或修改文件,然后执行以下命令

git pull origin master  #拉取远程仓库到本地
git add .
git commit -m '描述内容'
git push origin master  # 推送到GitHub仓库

enjoy~

博客原文链接: https://hack-for.fun/posts/20200213/