1 目标

Obsidian 文档可以本地存储,文档主要由 markdown 和图片组成。markdown 是纯文本,格式简单占空间也小,在存储和分享的过程中,插在文档中的图片就比较麻烦。所以希望把文本和图片分开存储,并且能简单快速地分享给别人,比如发布博客时,不用一张一张贴图。

图床是一个比较简单的解决方案,它是一种在线图片存储服务,可以用来上传、存储、管理和分享图片。通常,图床会提供图片的 URL 地址,可以在网页、博客、社交媒体等平台中使用。一般使用腾讯云、阿里云的存储服务实现,也可以使用 Github,Gitee 代码托管服务实现。主要看图多不多,访问量大不大。

本文将介绍在 Ubuntu 系统下,用 Obsidian+PicGo+Gitee 的方式做个免费图床,适用于图片不多,访问量不大的场景,同时讨论了扩展性。

2 原理

2.1 Obsidian

离线的文档管理工具,可以通过 Obsidian QuickShare, Obsidian to Notion 等插件进行网页共享,个人觉得通过图床,把文档和图片分开更加方便。

2.2 PicGo

PicGo 是一款用于上传、管理和分享图片的工具。它支持多种图床服务,可以方便地将图片上传到图床并生成图片链接,可以在网页、博客、社交媒体等平台中使用。

常见有 PicgoApp 和 Picgo-core 两种使用方式,PicgoApp 是在本机端口启动一个本地服务,本地应用通过 http 访问使用它;Picgo-core 则比较简单,可以通过命令行调用,无需后台守护进程,占用资源少,但是没有图形界面,操作起来比较困难。(本文使用了 Picgo-core 方式)

2.3 Gitee

Gitee 类似 Github,是一个代码托管服务,也可以存储图片,并给图片提供外链。它是国内服务,所以比 Github 速度更快。与收费服务相比,它提供的空间比较小,如果外链访问量太大,有被 Gitee 官方关停项目的风险。

2.4 工具整合

PicGo 支持多种服务,比如 Gitee, Github,七牛云,阿里云等,通过对它的配置,可以轻松切换图床,而不影响上层应用,以方便图床切换。Obsidian 可以通过插件方式调用 PicGo,把本地图片切换为图床存储。另外,我的系统是 Ubuntu 22.04,使用这些工具组合,几乎看不到 CPU 和内存使用率(文中方法不限于 Linux)。

3 方法

3.1 配置 Gitee

  • 建一个公开项目作为图床(只有公开项目,图片链接才能供所有人访问)
  • 生成令牌:项目界面 ->右上角 ->设置 ->私人令牌 ->生成新令牌,权限只选 projects

3.2 配置 PicGo

3.2.1 搭建 nodejs 环境

nodejs 是一个开源、跨平台的 JavaScript 运行环境。下最新版本:https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz

压缩包,并将其解压。

1
2
3
4
sudo apt-get remove nodejs # 删除旧版本
sudo sudo cp -r node-v12.18.3-linux-x64 /usr/local/lib/nodejs
export PATH=/usr/local/lib/nodejs/bin:$PATH
echo "export PATH=/usr/local/lib/nodejs/bin:$PATH" >> ~/.bashrc

此后时,node, npm 程序可正常执行。

3.2.2 安装 picgo

安装

1
2
3
4
npm config set registry https://registry.npm.taobao.org # 设置国内源
npm install -g cnpm
npm install picgo -g
picgo install gitee-uploader # 安装gitee支持插件

配置

1
2
3
4
5
6
7
picgo set uploader
# 选gitee(用上下键和回车)
# repo:输入gitee项目名(英文名)
# token: 设置成gitee的令牌
# 其它选项保持默认即可
picgo use uploader
# 选gitee

此时生成~/.picgo/config.json,pico 配置完成,内容大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"picBed": {
"uploader": "gitee",
"current": "gitee",
"gitee": {
"repo": "我的项目名",
"branch": "master",
"token": "我的token",
"path": "picgo",
"customPath": "default",
"customUrl": ""
},
"transformer": "path"
},
"picgoPlugins": {
"picgo-plugin-gitee-uploader": true
},
"picgo-plugin-gitee-uploader": {
"lastSync": "2023-01-15 09:52:14"
}
}

测试上传一张图片:

1
picgo upload xxx.png

如果命令行提示成功,则已打通 picgo 和 gitee。

3.3 配置 Obsidian

安装插件:设置 ->第三方插件 ->浏览 ->搜索“Image auto upload Plugin”->安装

在插件设置界面将 Default uploader 设为 picgo-core

将 pico core path 设为:

1
/usr/local/lib/nodejs/bin/node /usr/local/lib/nodejs/bin/picgo

(之前不填也行,最近不知为什么不行了)

理论上,安装后,再 Obsidian 中贴图时,图片就自动上传了图床。

如果有 wl-clipboard 报错,可尝试以下方法:

1
2
sudo apt -y install wl-clipboard
npm install clipboard

可能是基于命令行的 picgo core 只能支持图片文件上传,而剪切板并没把图片存在文件里,所以上传失败;如果直接把图片文件拖进 OB,则可以正常上传。

问题分析详见 超详细配置Marktext的Picgo-Core图片上传到七牛云图床,这个问题在 Windows 下可以通过安装 ShareX 补救,但在 Linux 下,可使用 Print Screen 抓屏,然后点“显示文件”,再把文件拖到 OB 内,即可实现粘贴。

3.4 实现效果

最终我没使用贴图时自动上传(Auto Pasted upload)。因为如果粘贴了不需要的文件,无法在图床删除。所以只在需要上传单个文档中的图片时,通过 Ctrl+p 调出命令行,选 "Upload all images",操作完之后,界面中的图就替换成了图床地址。相对的,使用“Download all images”,则图片下载到本地,本地图片地址替换了网页地址。

4 其它方案

4.1 安装 PicgoApp 版本

我是 Ubuntu 22.04,所以下了 AppImage 版本

国内下载:

https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo/v2.3.1/

1
2
chmod 777 PicGo-2.3.1.AppImage # 加权限
./PicGo-2.3.1.AppImage # 运行,此时右上角出现picgo图标
  • 打开主窗口
  • 在插件设置中,安装 gitee-uploader 插件
  • 在图床设置的 giee 中设置项目地址和 token
  • 在工作区中设置上传图片

5 参考

PicGo-Core介绍