返回
Featured image of post 使用jsdelivr加速静态资源

使用jsdelivr加速静态资源

感觉这样超酷的

某天,发现了一点问题

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

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

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

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 git@github.com:你的用户名/mycdn.git
git push -u origin master

空仓库构建完成。

存放资源

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

之后可以使用这些命令

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

或者也可以使用Github Deskop

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

发布版本

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

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

通过jsDelivr引用资源

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

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

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

https://cdn.jsdelivr.net/gh/thymrios/cdn@1.0/Music/cover/1.webp

就是这张

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

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

注意

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

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

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

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

推荐

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

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

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

嗯,就这样。✨

共书写了23.4k字·共 21篇文章
Built with Hugo
Theme Stack designed by Jimmy