序言
这次我们使用 jsDelivr + Obsidian 的Image auto upload插件+GitHub+PicGo,给Obsidian配置免费并且容量无限的图床。再也不需要在微信公众号平台一张张上传图片了,直接将 Obsidian 中的文章复制到微信公众号平台即可。
图床
图床是什么?假如你有一张图片,你想放到互联网上让所有人都能随便看或者别的网站可以随便使用这张照片,你要怎么做?你上传到云盘,然后分享出去?不好意思,云盘有防盗链设计,别的网站无法正常引用。上传到 QQ、微博?不好意思, 你朋友看之前必须登录 QQ 或者微博才能看。
图床是一类专门用于存储图片的平台,将图片上传到图床后,任何人都可直接查看,其他网站也能无限制引用 —— 无防盗链限制,且无需登录即可访问。
其实,图床最大的作用就是文章中的配图了。写公众号的人,经常一篇文章会在多个平台同时发布。如果没有图床,作者需要在微信公众号平台上传图片还要在其他平台再次上传图片。有了图床之后,文章中的配图统一使用图床的链接。然后文章复制粘贴,往多个平台发就行了。省去在每个平台都上传图片的流程了。
jsDelivr 是什么?
jsDelivr是一个免费、开源的CDN。CDN的全称是 Content Delivery Network(内容分发网络)。
jsDelivr 官网:
jsDelivr在全球部署了服务器节点,当你从中国通过jsDelivr访问存于美国的静态资源时,它会优先从离你最近的节点查找该资源:若存在则直接返回,若不存在则从源站(美国)拉取资源,同时缓存到就近节点。然后,jsDelivr会先放到离你最近的jsDelivr服务器上,然后再把文件返回给你看。你下次访问同样的资源时,直接从jsDelivr的服务器上返回给你,就不用再次跑美国获取资源了。大大提高你访问国外网站的速度。
其实在你访问之前,这个资源大概率被别人访问过了,这个资源早就在jsDelivr的服务器上面了。
注意,静态资源指的是图片、js文件、css文件、字体等等,这些不会变的内容。
常用的 CDN
VUE2官方文档中用的CDN就是jsDelivr。
还有staticaly、githack等等,大家可以自由选择。目前来看,jsDelivr还是最流行的。
GitHub
在 GitHub 新建一个项目
首先,需要在 GitHub 上面新建一个项目,用来保存我们以后上传的所有图片。
创建 GitHub 的 Tokens
我们需要在 GitHub 创建一个 Fine-grained Token(细粒度的个人访问令牌,后文简称 Token),后续配置 PicGo 时会用到。注意:该 Token 的权限接近 GitHub 账号密码,严禁硬编码、提交到代码仓库或公开分享。
不过不用担心,可以限制这个 Token 的访问权限,仅授权该 Token 访问并编辑我们刚创建的resource仓库。创建 Tokens 流程如下:
安装 Obsidian 插件
在 Obsidian 软件中安装Image auto upload(图片自动上传至图床)的插件。
安装 Image auto upload 插件
安装 PicGo
访问PicGo 官网:
图床设置
配置 GitHub 图床:
- 图床配置名:自定义名称即可;
- 设定仓库名:格式为「GitHub 用户名 / 仓库名」(需包含斜杠 “/”);
- 设定分支名:填写仓库的分支名称,默认通常为 main;(格式化参数说明,补充标点,统一 “项目名” 为 “仓库名”)
- 设定 Token: 就是你在 GitHub 上面创建的那个 Tokens。
- 设定存储路径: 可以不填。如果要填只能输入英文字母并且以斜杠“/”结尾。 6. 设定自定义域名:cdn.jsdelivr.net/gh/你的用户名/项目…
打开 PicGo-Server
一定要记得打开 PicGo-Server。Obsidian 的Image auto upload插件就是依赖这个服务上传图片的。
配置 Image auto upload 插件
给插件Image auto upload配置通过PicGo上传图片。打开插件:
手工拼接图床地址-仓库名@分支
其实,只用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,这个路径是真实并且可以访问的。
手工拼接图床地址-仓库名@Commit Hash
https://cdn.jsdelivr.net/gh/用户名/仓库@a1b2c3d/xxx.png,也可以使用这种:仓库名@commit hash。这种方式的好处是:图片不会跟着你的仓库变化而变化。比如,你今天在你仓库的main分支下面上传了一张图片名字叫1.png,图片内容是风景画。过俩天你又把1.png图片删除了,然后重新上传一张1.png,图片内容变成山水画了,这个时候你用仓库名@分支名这种方式拼出来的图床地址会变成最后的山水画,跟着你的仓库变化而变化。使用仓库名@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/