Obsidian + jsDelivr + PicGo = 免费无限图床:一键上传,全平台粘贴即发

0 阅读5分钟

序言

这次我们使用 jsDelivr + Obsidian 的Image auto upload插件+GitHub+PicGo,给Obsidian配置免费并且容量无限的图床。再也不需要在微信公众号平台一张张上传图片了,直接将 Obsidian 中的文章复制到微信公众号平台即可。

图床

图床是什么?假如你有一张图片,你想放到互联网上让所有人都能随便看或者别的网站可以随便使用这张照片,你要怎么做?你上传到云盘,然后分享出去?不好意思,云盘有防盗链设计,别的网站无法正常引用。上传到 QQ、微博?不好意思, 你朋友看之前必须登录 QQ 或者微博才能看。

图床是一类专门用于存储图片的平台,将图片上传到图床后,任何人都可直接查看,其他网站也能无限制引用 —— 无防盗链限制,且无需登录即可访问。

其实,图床最大的作用就是文章中的配图了。写公众号的人,经常一篇文章会在多个平台同时发布。如果没有图床,作者需要在微信公众号平台上传图片还要在其他平台再次上传图片。有了图床之后,文章中的配图统一使用图床的链接。然后文章复制粘贴,往多个平台发就行了。省去在每个平台都上传图片的流程了。

jsDelivr 是什么?

jsDelivr是一个免费、开源的CDNCDN的全称是 Content Delivery Network(内容分发网络)。 jsDelivr 官网

jsDelivr官网

jsDelivr在全球部署了服务器节点,当你从中国通过jsDelivr访问存于美国的静态资源时,它会优先从离你最近的节点查找该资源:若存在则直接返回,若不存在则从源站(美国)拉取资源,同时缓存到就近节点。然后,jsDelivr会先放到离你最近的jsDelivr服务器上,然后再把文件返回给你看。你下次访问同样的资源时,直接从jsDelivr的服务器上返回给你,就不用再次跑美国获取资源了。大大提高你访问国外网站的速度。

其实在你访问之前,这个资源大概率被别人访问过了,这个资源早就在jsDelivr的服务器上面了。

注意,静态资源指的是图片、js文件、css文件、字体等等,这些不会变的内容。

常用的 CDN

VUE2官方文档中用的CDN就是jsDelivr

VUE2官方文档

VUE3官方文档中用的CDNunpkg

VUE3用的CDN

还有staticalygithack等等,大家可以自由选择。目前来看,jsDelivr还是最流行的。

GitHub

在 GitHub 新建一个项目

首先,需要在 GitHub 上面新建一个项目,用来保存我们以后上传的所有图片。

访问GitHub首页

新建GitHub仓库

GitHub仓库创建成功

创建 GitHub 的 Tokens

我们需要在 GitHub 创建一个 Fine-grained Token(细粒度的个人访问令牌,后文简称 Token),后续配置 PicGo 时会用到。注意:该 Token 的权限接近 GitHub 账号密码,严禁硬编码、提交到代码仓库或公开分享

不过不用担心,可以限制这个 Token 的访问权限,仅授权该 Token 访问并编辑我们刚创建的resource仓库。创建 Tokens 流程如下:

点击Settings

找到Developer settings

点击Fine-grained tokens

输入密码确认创建

有效期为永久有效

设置Tokens的权限

只授权Contents的读和写权限

再次确认创建

复制Tokens并保存好

安装 Obsidian 插件

在 Obsidian 软件中安装Image auto upload(图片自动上传至图床)的插件。

安装 Image auto upload 插件

点击Obsidian软件的设置

关闭安全模式

搜索Image auto upload插件

点击安装

安装成功之后点击启用

启用成功

安装 PicGo

访问PicGo 官网:

PicGo官网

下载PicGo的安装包

安装PicGo

设置PicGo显示为中文

图床设置

点击图床设置

配置 GitHub 图床:

  1. 图床配置名:自定义名称即可;
  2. 设定仓库名:格式为「GitHub 用户名 / 仓库名」(需包含斜杠 “/”);
  3. 设定分支名:填写仓库的分支名称,默认通常为 main;(格式化参数说明,补充标点,统一 “项目名” 为 “仓库名”)
  4. 设定 Token: 就是你在 GitHub 上面创建的那个 Tokens。
  5. 设定存储路径: 可以不填。如果要填只能输入英文字母并且以斜杠“/”结尾。 6. 设定自定义域名:cdn.jsdelivr.net/gh/你的用户名/项目…

配置图床

测试上传已经成功了。

打开 PicGo-Server

一定要记得打开 PicGo-Server。Obsidian 的Image auto upload插件就是依赖这个服务上传图片的。

打开PicGo-Server

点击确定

配置 Image auto upload 插件

给插件Image auto upload配置通过PicGo上传图片。打开插件:

配置插件的上传方式为PicGo

右键图片点击Upload按钮

上传成功

上传成功之后图片地址为图床地址

图片都上传到GitHub上面了

手工拼接图床地址-仓库名@分支

其实,只用jsDelivr+GitHub就能搭建一个图床了。GitHub就是用来保存你上传的图片的,然后用https://cdn.jsdelivr.net/gh/你的用户名/仓库@分支名/图片.png这个路径自己手工拼接就可以了。jsDelivr的路径https://cdn.jsdelivr.net/gh/是固定不变的,在https://cdn.jsdelivr.net/gh/后面拼接上你的GitHub用户名、仓库名@分支、图片名字就行了。比如GitHub上有个用户openclaw,他建了一个仓库openclaw,分支为:fix/slash-command-chunking。那么拼出来的路径就是:https://fastly.jsdelivr.net/gh/openclaw/openclaw@fix/slash-command-chunking/assets/dmg-background-small.png,这个路径是真实并且可以访问的。

OpenClaw的分支名字

手工拼接图床地址-仓库名@Commit Hash

https://cdn.jsdelivr.net/gh/用户名/仓库@a1b2c3d/xxx.png,也可以使用这种:仓库名@commit hash。这种方式的好处是:图片不会跟着你的仓库变化而变化。比如,你今天在你仓库的main分支下面上传了一张图片名字叫1.png,图片内容是风景画。过俩天你又把1.png图片删除了,然后重新上传一张1.png,图片内容变成山水画了,这个时候你用仓库名@分支名这种方式拼出来的图床地址会变成最后的山水画,跟着你的仓库变化而变化。使用仓库名@commit hash这种方式,内容固定在你的仓库提交记录上,永远不会发生改变。

复制这个Commit Hash

拼出来的路径为:https://fastly.jsdelivr.net/gh/openclaw/openclaw@bcced90/assets/dmg-background-small.png。这个地址对应的图片就永远不会发生改变了。因为commit hash一旦生成就不会再发生变化了,对应的永远是你当时的提交记录。无论你仓库怎么发生变化,它都只对应你当时的提交记录,删也删不掉。只要仓库在,这个commit hash就会存在。

结尾

至此,基于jsDelivr + GitHub + PicGo + Obsidian Image auto upload的免费图床就搭建完成了。后续撰写完文章后,直接将 Obsidian 中的内容复制到各平台发布即可,无需在每个平台重复上传图片。

参考资料 [1]

jsDelivr官网: www.jsdelivr.com/

[2]

官方文档: v2.cn.vuejs.org/v2/guide/

[3]

官方文档: cn.vuejs.org/guide/quick…

[4]

unpkg: unpkg.com/

[5]

PicGo官网: picgo.app/