使用jsdelivr加速静态资源

某天，发现了一点问题

在给 Hugo 加一点好玩的功能中给博客放了一个音乐播放器，感觉不错😚！资源其实都在 File 里。某天晚上忽然想打开博客看看忽然发现音乐封面加载不出来了！ 而且音乐也不会响，我的博客不应该这么安静诶！

感觉应该是文件在国外服务器上的原因😯？晚上访问的时候因为国际线堵塞访问速度变慢。（可恶的 GFW。

随即想一个办法可以加速静态资源的部署。

推荐 2022 年 07 月 08 日更新

NPM + 国内 CDN 加速静态资源

jsDelivr 怎么样？

因为某些强迫症原因，比较喜欢打开网页后打开开发者调试工具查看别人家网页的请求，所以经常会发现这个玩意儿出镜率极高，所以理所当然的要查一下这是个什么登西🤔。

jsdelivr 是一个免费、快速和可信赖的 CDN 加速服务，可以加速 npm，GitHub，Javascript，and 和 ESM。

而且文档有讲到 jsDelivr 已与多家中国公司合作，在中国大陆和整个亚洲大陆提供快速可靠的文件交付。在中国境内拥有服务器，可显著提高交付速度和延迟。还拥有 ICP 许可证，可保护 jsDelivr 免受禁令和下载缓慢的影响。

看见没，Github？！国内还可访问！说起这个可就不困了，Github 上传自己的文件，然后 jsDelivr 加速，岂不美哉。为什么还要部署什么国内超贵的 CDN？拥抱开源！

怎么做嘞

• 首先，需要一个 Github 账号
• 然后没了

打字到这里的时候发现 Obsidian 在插入链接后光标会向上面乱飞！ 这什么奇葩问题哦喂？版本是 V0.13.23，希望官方之后会解决😶。

新建仓库

点 new 输入仓库名后点 Create repository 创建完成。

如果选择下面三个单选框添加文件的话下面需要先把仓库 git pull 下来。

本地设置

如果在上一步没有添加文件的话就是一个空仓库。在本地新建文件夹后进入输入

1
2
3
4
5

git init
git commit -m "first commit"
git branch -M master
git remote add origin [email protected]:你的用户名/mycdn.git
git push -u origin master

Copy

空仓库构建完成。

存放资源

将需要使用的静态资源放在文件夹中

之后可以使用这些命令

1
2
3

git add -all                  //添加所有文件到暂存区
git commit -m 'update'        //把更改文件提交到仓库 -m 后面的是备注信息
git push origin master        //推送至远程仓库

Copy

或者也可以使用 Github Deskop

可以自动检测到修改。在添加完毕资源后点左下角 Commit to master 然后点 push origin 上传 Github。

发布版本

打开自己 Github 上的仓库，右侧点击 Create a new release 按钮，点击后点开这个界面

先点击 Choose a tag 输入 TAG 名字之后写版本标题与介绍之类的，大概随便写。。。叭？然后点击 Pulish release 发布版本

通过 jsDelivr 引用资源

上文介绍过 jsDelivr 可以直接加速 Github 资源，连接内容是

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

比如我部署的一张图片的路径是

https://cdn.jsdelivr.net/gh/irithys/[email protected]/music/cover/1.webp

就是这张

而且最棒的功能是可以通过版本号区分资源，比如说如果有两个版本，你可以自由的选择使用 [email protected] 还是 [email protected]，如果不使用版本号，默认为使用最新的资源。

可以将博客中使用所有静态资源全部替换为 jsDelivr 加速😋

注意

❗ 国外服务器都不允许版权音频存在于服务器之上

还想把自己的音乐放在 Github 上的，但是查资料之后发现这会构成侵权行为，Github 查到会发警告邮件的🙄。

❗ 静态资源不要太大，尽量小于 50MB

不是，放个图片用用也就大概不过 1MB 叭？（你不会不优化图片大小直接用个大几 MB 的图片叭？）虽然服务免费但是这样子也太过分了。

推荐

尽量使用 Webp 图片，下面是维基的内容

WebP 的优势在于它具有更优的图像数据压缩算法，在拥有肉眼无法识别差异的图像质量前提下，带来更小的图片体积，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

就是说，Webp 图片可以有着和普通图片基本一样的细节，而且占用超小，特别适合传输使用。← 我的理解

嗯，就这样。✨

注意，现在更推荐使用 NPM + 国内 cdn 方式

就是下面这个咯！

NPM 加速静态资源