免费CDN github+jsdelivr

背景

折腾了一晚上 在网上找了神作塞尔达荒野之息的高清图片，更换了博客的banner图，放在了博客的静态资源下面

部署后发现图片很大，加载特别慢

so, 灵机一动使用了在线压缩工具tinify对图片进行压缩（尝试几次发现压缩效果已经不是很明显了，图片依然很大）。内心os: 王德发? 熬不住了先睡了。

第二天早上来决定使用CDN图片，首先想到的是七牛云，但是七牛云每月10G流量，可是地址只能使用30天（真的是坑）

接着找了很多，不是需要注册或者实名备案，总之很麻烦。

最后找到了github+jsdelivr的方案

如何白嫖CDN

1. 新建一个github仓库。 eg:CDN

• 里面随便上传几个图片，打开图片的目录 eg: https://github.com/moyuderen/CDN/blob/main/moyuderen/blog/srd-about.png

• 打一个releases包

  注意：这一步是必须的（在使用tag时是必须的），后面有解析不使用tag时的替换规则

2. 用jsdelivr地址替换github上的地址（releases包的地址）

• https://cdn.jsdelivr.net/gh/moyuderen/CDN/moyuderen/blog/srd-about.png
  替换
• https://github.com/moyuderen/CDN/blob/main/moyuderen/blog/srd-about.png

3. 原理

https://github.com/${yourUsername}/${repositoryName}/${branchName}/${filePathName}

https://cdn.jsdelivr.net/gh/${yourUsername}/${repositoryName}[${@version}]/${filePathName}

备注：
@version是release包（tag）的名称如@0.0.2或者@latest

1. 如果没有version参数，默认为@latest。 eg: https://cdn.jsdelivr.net/gh/moyuderen/CDN@0.0.3/moyuderen/blog/srd-about.png
2. 可以用version来区分版本

重要：每次更新仓库内容，必须重新创建release包（新的tag），最新的资源才能生效（生效有一点点延迟，稍等就可以啦）

更新：2022.04.14 更新不使用tag的方式如下

4. 不使用打tag的方式

解析 https://github.com/moyuderen/CDN/blob/main/moyuderen/blog/srd-about.png

解析 https://github.com/moyuderen/CDN/blob/main/moyuderen/blog/srd-about.png

1. https://github.com/moyuderen/CDN: github地址 + username + 仓库名称
2. blob: 在直接打开git的文件时会地址会自动添加这个地址，表示打开的是二进制文件
3. main: 仓库的当前分支
4. /moyuderen/blog/srd-about.png: 参考文件的地址

则可替换为 https://cdn.jsdelivr.net/gh/moyuderen/CDN/moyuderen/blog/srd-about.png

解析 https://cdn.jsdelivr.net/gh/moyuderen/CDN/moyuderen/blog/srd-about.png

1. https://github.com/ 被替换为 https://cdn.jsdelivr.net/gh/
2. moyuderen 保持不变
3. CDN 保持不变
4. blob 删除二进制的目录
5. main: 删除分支名称
6. /moyuderen/blog/srd-about.png: 保持不变

自己的图床web工具 github-cdn

• 基于github api
• 基于octokit
• 支持github本身的cdn地址和 jsdelivr的cdn地址

参考

1. jsdelivr官网
2. Jsdelivr+Github = 免费CDN??
3. 自动使用jsdelivr CDN 加速hexo的图片等静态资源加载