静态资源加速:jsDelivr+Github 使用方法

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

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

1.新建Github仓库

点击GitHub页面右上角”+“”New repository“新建仓库,设置仓库名
图片文字

2.克隆Github仓库到本地

如图点击Code ,复制仓库地址
图片文字

在本地目录(自选本地存储文件夹)右键 Git Bash Here,执行以下命令:

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

3.上传资源

复制需要上传的资源到本地git仓库(即克隆仓库的本地文件夹),在本地git仓库目录下右键 Git Bash Here,依次执行以下命令:
(注:jsDelivr不支持加载超过20M的资源,建议作为博客图床,美化引用js,css文件使用)

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

上传成功:
图片文字

4.发布仓库

点击release发布
图片文字

自定义发布版本号
图片文字

5.通过jsDelivr引用资源

引用格式链接为https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
例如:

1
2
https://cdn.jsdelivr.net/gh/coinshencc/cdn@1.0/img/huyun.jpg
https://cdn.jsdelivr.net/gh/coinshencc/cdn/img/chuyin.jpg #推荐此种格式

将链接复制到你需要引用的地方即可

6.注意

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 加载任何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/

使用vercel加速Hexo静态博客访问

Vercel 提供免费的 serverless 和全局 CDN 服务,使用者只需要通过几步简单的注册以及导入仓库即可完成部署

1.注册登录

访问Vercel官网,点击右上角的 sign up 进行注册
图片文字

极有可能遇到的 bug

若注册时提示 Error:This user account is blocked.Contact support@vercel.com for more information.
图片文字

这是由于 Vercel 不支持大部分国内邮箱。可以将 github 账号主邮箱改为 Gmail 邮箱。
但是根据群友反应,将 github 账号主邮箱切换为 Gmail 以后,Vercel 又会提示需要使用手机号码验证。然而 github 并没有提供手机号码绑定的内容。
综上,建议一开始注册 github 账号时就使用 Gmail 等国外邮箱进行注册。

国内访问 Gmail 的方案:直接使用 QQ 邮箱手机版,它提供 Gmail 的访问路线,可以直接注册并使用。

若是执着于当前 Github 账号,可以参考以下方案进行尝试:完成了 Gmail 等国外邮箱的注册,打开 github-> 头像 ->settings->Emails->Add email address

2.新建项目

注册完成后选择新建一个项目
图片文字
若无法自动识别,填入你在 Github 上部署静态页面的地址
例如我是 https://github.com/coinshencc/coinshencc.github.io

3.导入静态页面仓库

导入静态页面仓库之前,需要为你的 Github 安装 Vercel,此处建议选择 All repositories,意为为所有仓库安装,当然,你也可以选择只为当前仓库安装,也就是 Only select repositories。
图片文字

4.之后会识别出你的静态页面,单击 Continue

图片文字

Vercel 的 PROJECT NAME 可以自定义,不用太过在意,但是之后不支持修改,若要改名,只能删除 PROJECT 以后重建一个了。
下方三个选项保持默认就好,因为 username.github.io 的 master 分支内是本身就已经部署好的静态页面,所以没必要选择特定的框架去再次编译。
图片文字

5.部署完成

到此时,Vercel 的部署其实就已经完成了,可以使用 Vercel 提供的默认域名来访问静态页面,比 Github 的原网站要快许多。
图片文字

6.自定义域名配置

想必到了这步一定不会甘心于默认域名,所以可以在 project->settings->domains 里配置自定义域名,填入自定义域名
图片文字

根据 Vercel 提供的解析记录去自己的域名 DNS 解析处添加相应解析。以及替换域名解析的 DNS 服务器。
Vercel 的线路建议选择为电信。

持续更新中… …

More info: CoinShen