利用 Github 构建你自己的免费图床
Github
jsdelivr
Picgo
共620个字，阅读时间
3 分钟
利用 Github 构建你自己的免费图床
本文用到了 Github + jsdelivr + Picgo 这些工具
大体的流程非常简单，使用 Picgo 上传图片，利用 Github 的 repo 作为存储图床再通过 jsdelivr cdn 进行加速
1. 安装 Picgo
Picgo 是一个图片上传客户端，支持许多平台的图片上传。
首先我们去 PicGo/releases 下载最新版本的 PicGo，比如我下载的是 2.4.0-beta.9 版本。
我是 Mbp 所以下载的 PicGo-2.4.0-beta.9-arm64.dmg, 其他平台自己看 CPU 指令集架构选择。
然后安装mac 会显示安装安装包损坏，然后看 FAQ 发现是由于软件包没有签名，所以会被 macOS 的安全检查所拦下导致的。
所以需要信任开发者，会要求输入密码, 执行:
sudo spctl --master-disable
然后放行 PicGo :
xattr -cr /Applications/PicGo.app
然后就能正常打开。
2. 设置 Github
流程也很简单，创建一个仓库，然后创建一个 PAT 给一下仓库权限，然后在客户端设置一下即可。
3. jsdelivr
默认情况下，国内访问 Github 资源会被墙，所以需要 jsdelivr cdn 进行分发。
首先访问 jsdelivr官网，发现它有 Github 加速，路径下方所示:
https://cdn.jsdelivr.net/gh/user/repo@version/file
然后填充一下你自己的用户和 repo 名，比如这个仓库就是:
https://cdn.jsdelivr.net/gh/sonofmagic/static/{your_path}
然后把对应的配置，在 Picgo 填充即可。
假如 cdn.jsdelivr.net 被墙可以尝试下方 2 个 url 进行替换:
fastly.jsdelivr.netgcore.jsdelivr.net
为此你也可以添加一个全局 js 的重试的机制:
// 多个域名
const baseUrls = ['fastly.jsdelivr.net', 'gcore.jsdelivr.net', 'cdn.jsdelivr.net']
// WeakMap
const offsetWeakMap = new WeakMap()
// 捕获阶段处理
window.addEventListener(
'error',
(event) => {
const dom = event.target
// 过滤 img 标签
if (!/img/i.test(dom.nodeName)) {
return
}
const src = dom.src
// 引入 jsdelivr.net 判断
const isJsdelivr = /jsdelivr\.net/.test(src)
if (isJsdelivr) {
let offset = offsetWeakMap.get(dom) ?? 0
if (offset < baseUrls.length) {
const url = new URL(src)
for (let i = offset; i < baseUrls.length; i++) {
const baseUrl = baseUrls[i]
if (url.hostname === baseUrl) {
continue
}
url.hostname = baseUrl
offset++
dom.src = url
offsetWeakMap.set(dom, offset)
break
}
}
}
},
true,
)
例子
总结
最后总结一下方案的优势和劣势
优势
- 免费
劣势
- 国内访问有可能被墙
Repo后期会很大，假如不小心上传敏感资源，不懂git的小白不会真正删除里面的资源。- 仓库整个资源可以被一键打包带走
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。