Hexo+Github Pages个人博客CDN加速、优化博客的加载速度、提高用户体验


前言

都知道 Github Pages 搭建博客后,访问是非常慢,就连 Github 官网在大陆打开也是很慢,另外我们搭建的个人博客免不了在文章里添加图片,图片一多就会影响博客的加载速度,还有博客需要用到的 js 文件,每次都需要重 Github 博客仓库提取资源,总不能每张图片都要压缩内存大小后再上传吧?显然这不是我们想要的,我们要的是方便快捷。

优化加载速度

如何优化?选择什么优化方式?

  1. 使用 CDN 加速?
  2. 使用图床?
  3. 第三方托管在线 js 文件?
使用 JsDelivr

他提供 npm github wordpress 资源的加速,在中国也有很多节点,速度很快。

为什么使用 JsDelivr?

免费、稳定

不像某些图床网站,用了一段时间就跑路了,如何自己的图片也没了。

但是如果你使用的是JsDelivr,就算跑路(当然这是不纯在的),我们的图片依然有保留,因为我们图片等资源是保留再自己的Github仓库里的,所以无需担心

JsDelivr CDN 加速

1.New 一个新的 Github 仓库,取名为CDN(当然这是自定义的)

2.将建好的仓库克隆到本地(在自己喜欢的文件加右键选择 Git)

COPY
1
git clone https://github.com/lete114/CDN.git ### 这里是你的CDN仓库地址

3.把图片等资源都放进克隆下来的CDN文件夹下(分类,当人你也可以不分类,我习惯整理我的文件夹【强迫症 😊】)如图:

4.提交到 GitHub 仓库即可

COPY
1
2
3
4
5
6
7
8
# 添加全部内容文件到暂存区
git add .

# 添加说明
git commit -m'第一次提交'

# 提交到远程仓库
git push

注:由于我的仓库被 GitHub 官方人员禁用,导致失效

然后就可以访问:https://cdn.jsdelivr.net/gh/你的Github用户名/你的CDN仓库/文件文件夹/12.jpg
例如:https://cdn.jsdelivr.net/gh/lete114/CDN@3.0/BoBoPic/12.jpg

现在请你同时打开这两个地址做比较
GitHub:https://lete114.github.io/CDN/BoBoPic/01.jpg
JsDelivr:https://cdn.jsdelivr.net/gh/lete114/CDN@3.0/BoBoPic/12.jpg

这个就是本章开头的高清图片,加载速度是不是比 Github 的速度块?

细心的已经看到我的 CDN 后面怎么有个@3.0
解释一下:这是第 3.0 版本的图片,如果不写@3.0 版本号的或就会适应当前最新的图片

Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/2aa315b1.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !