Obsidian+GitHub+jsDelivr+PicGo图床配置

Obsidian+GitHub+jsDelivr+PicGo图床配置

这是我的第一个笔记,主要讲Obsidian+图床配置，选择的是GitHub + jsDelivr + PicGo

一、为什么需要图床

写技术博客时，我们经常需要插入截图或者示意图。如果直接在本地粘贴图片，发布到CSDN或其他网站后，图片会裂开，因为别人访问不到我们自己电脑里面的文件。

图床的作用是：把图片上传到云服务器，生成一个在线链接。无论在哪里发布，只要粘贴这个简介，图片就能正常显示。

不用图床的痛点：

• 每篇文章要手动一张张上传到 CSDN 和公众号后台，效率极低
• 同一个图片如果要发多个平台，重复上传很烦
• 图片存在本地，换电脑或重装系统后就没了
  使用图床的好处：
• 粘贴即上传，自动生成链接
• 一次上传，多平台通用（CSDN、公众号、个人博客等）
• 图片永久存储在云端，不会丢失

二、方案选择（GitHub + jsDelivr +PicGo）

• GitHub:作为图床的存储空间，存放所有图片（公开仓库）。特点：免费、稳定、无限容量（单仓库有限制但够用）、与开发者生态无缝衔接。
• jsDelivr：全球 CDN 加速服务，通过它访问 GitHub 上的图片，国内速度很快。特点：免费、无需备案、支持 HTTPS、国内有节点。
• PicGo：桌面端图床上传工具，配合 Obsidian 插件实现粘贴即上传。特点：开源、支持多种图床、有 Obsidian 插件直接调用。

三、具体实现：从零搭建Obsidian图床

3.1 安装Obsidian

首先去 Obsidian - Sharpen your thinking，点击首页醒目的“Get Obsidian”按钮，它会自动识别你的操作系统，也可以手动选择版本。下载安装包，一直点下一步即可。
安装后打开，点击“创建仓库”（Create new vault），给它起个名字（比如MyNotes），选择本地文件夹位置。

3.2 安装必要插件

• Image Auto Upload– 粘贴图片时自动上传到图床。
• Wikilinks to MD Links– 把[[内部链接]]转成标准 Markdown 格式（方便发到 CSDN）。
  安装步骤

1. 关闭 Obsidian 的“安全模式”：设置 → 第三方插件 → 关闭安全模式。
2. 点击“浏览”，搜索插件名称，分别安装并启用。
3. 安装后暂时不用配置，等 PicGo 装好再回头设置。

3.2.1 Image Auto Upload（图片自动上传）

它做什么：当你在 Obsidian 里粘贴或拖入一张图片时，这个插件会自动把图片上传到网上的图床（比如 SM.MS、阿里云 OSS），并自动把笔记里的图片链接替换成在线网址。
没有它的情况：粘贴图片后，Obsidian 只会在本地存一个![[图片.png]]，图片存在电脑的附件文件夹里。这个链接发到 CSDN 或公众号，别人是看不到图片的（因为那是你本地的文件路径）。
有它的情况：粘贴图片后，插件自动上传，笔记里会变成![](https://xxx.com/图片.png)。复制到任何平台，图片都能正常显示。
它需要配合什么: 需要一个PicGo 桌面软件（免费）和一个图床账号（有免费或付费的）。PicGo 负责执行上传动作，插件负责调用 PicGo。

3.2.2 Wikilinks to MD Links（Wiki 链接转标准链接）

它做什么：将 Obsidian 内部使用的[[笔记名]]格式，一键转换成标准 Markdown 链接[笔记名](笔记名.md)。
没有它的情况：你写笔记时喜欢用[[如何配置图床]]来链接另一个笔记。但 CSDN 和公众号不认识[[...]]语法，发布后会显示为纯文本[[如何配置图床]]，而不是可点击的链接。
有它的情况：运行一次插件命令，笔记里所有[[如何配置图床]]会变成[如何配置图床](如何配置图床.md)。CSDN 和公众号就能识别为超链接了。
注意：因为 CSDN 无法访问你本地的其他.md文件，所以链接点开会 404。所以一般建议要么：

• 删除这些内部链接（保留文字即可），或者
• 把需要引用的笔记也发布到 CSDN，然后把链接改为发布后的真实 URL。
  它的核心价值：帮你快速清理 Obsidian 特有语法，让标准 Markdown 环境能正常显示。

3.3 下载并安装 PicGo

• 打开 PicGo 官网：https://picgo.github.io/PicGo-Doc,点击“下载”进入 GitHub Releases 页面。
• 根据你的操作系统选择：
  • Windows：下载.exe安装文件（如PicGo-Setup-2.3.x.exe）
  • macOS：下载.dmg文件
  • Linux：下载.AppImage
• 下载后安装（Windows 一路下一步，注意不要安装到带中文的路径）。
• 安装完成后，启动 PicGo。你会看到它在系统托盘（Windows右下角或 Mac 菜单栏）显示一个图标。
  
  注意：后面需要安装 Node.js，否则 GitHub 插件无法使用。

3.4 配置GitHub仓库和Token

注册 GitHub 账号（如已有跳过）

(1）创建公开仓库

• 登录 GitHub，点击New repository：
• 仓库名：blog-images（随意）
• 选择Public（公开）
• 勾选Add a README file
  ⚠️ 不要选 Private（私有），否则 jsDelivr 无法访问图片。
• 点击Create repository创建,记住你的仓库地址，例如https://github.com/你的用户名/blog-images。

（2）生成 Token

1. 点击右上角头像 →Settings
2. 左侧最下方找到Developer settings
3. 点击Personal access tokens→Tokens (classic)
4. 点击Generate new token→Generate new token (classic)
5. 在Note中填写：PicGo upload images
6. Expiration（过期时间）：选择No expiration（永不过期）或自定义（如 1 年）。建议永不过期，省事。
7. 在Select scopes中，勾选repo（整个 repo 权限，这样才能上传图片）
8. 滚动到底部，点击Generate token
9. 立刻复制并保存好这个 Token（只显示一次，丢失需要重新生成）

3.5 在 PicGo 中安装 GitHub 图床插件并配置

3.5.1对比内置GitHub图床和Plus插件

对比项	内置 GitHub 图床（第一张截图）	githubPlus 插件（第二张截图）
来源	PicGo 自带原生功能	第三方社区开发的增强插件
基础功能	支持上传图片到 GitHub 仓库	完全兼容 GitHub 上传，额外扩展多项功能
额外依赖	无需额外安装	需要在 PicGo 插件市场手动安装

功能差异（结合你的配置界面）

1. 平台支持范围

• 内置 GitHub 图床：只能绑定 GitHub 仓库，不支持其他平台。
• githubPlus 插件：你截图里的origin选项就是关键！它除了 GitHub，还支持Gitee（码云）等平台，相当于一个 “多平台通用图床工具”，配置一次就能切换不同代码托管平台。

2. 删除与同步逻辑

• 内置 GitHub 图床：删除图片时，只会清空 PicGo 本地的上传记录，GitHub 仓库里的原文件不会被删除，时间长了仓库会堆积大量无用图片。
• githubPlus 插件：支持双向同步删除—— 在 PicGo 里删除图片时，会自动同步删除 GitHub/Gitee 仓库里的对应文件，避免仓库臃肿。同时还能从仓库拉取已上传图片的记录，本地和云端状态保持一致。

3. 配置灵活性

两者都支持repo（仓库）、branch（分支）、token（令牌）、path（存储路径）、customUrl（自定义域名 / CDN），但细节有差异：

• 内置 GitHub 图床：配置项是固定的 “GitHub 专属格式”，比如仓库名强制username/repo格式。
• githubPlus 插件：配置更通用，customUrl对 CDN 加速（比如 jsdelivr）的支持更完善，且path路径处理更灵活（比如自动按日期创建文件夹）。

4. 其他增强特性

• githubPlus 支持多配置切换：可以同时配置多个 GitHub/Gitee 仓库，一键切换不同图床；
• 部分版本还支持图片重命名规则、上传前压缩等小功能，原生 GitHub 图床没有这些扩展。

3.5.2 安装plus插件（可选）

1、解决 Node.js 依赖（踩坑预警）
我在安装github-plus后 PicGo 弹窗提示Please install Node.js，那是因为这个插件需要 Node.js 环境。

因此建议先安装依赖再安装插件
方法：

1. 去 nodejs.org 下载 LTS 版本,直接下载 Windows 的.msi安装包

2. 运行安装包，一路点击下一步，必须勾选「Add to PATH」（添加到系统环境变量）—— 这是 PicGo 能找到 Node.js 的核心！ 。

3. 验证安装是否成功
   按Win+R输入cmd打开命令提示符，输入以下两个命令：

node -v npm -v

如果能正常输出版本号（比如v24.16.0和10.x.x），说明安装和环境变量配置成功了。
4. 安装完成后重启电脑（让环境变量生效）。
5. 重启 PicGo，错误消失。
2、在 PicGo 中安装 GitHub 图床插件
1、打开 PicGo 设置窗口
2、 左侧菜单选择插件设置
3、在搜索框输入github，找到github-plus或github-uploader
4、点击右下角的安装（可能需要重启 PicGo）
5、安装后，左侧菜单图床设置下会多出GitHub Plus

注：如果是窗口显示英文，可点击settings设置为简体中文

3.5.3 配置 图床

3.5.3.1 配置内置GIThub图床（未做3.5.2）

在 PicGo 的图床设置→GitHub中填写：

图床配置名	随意	我的GitHub图床
设定仓库名	用户名/仓库名	zhangsan/blog-images
设定分支名	main或master	main
设定Token	粘贴上面保存的 Token	ghp_xxxxxxxx
指定存储路径	可选，例如images/	images/
设定自定义域名	建议填 jsDelivr 地址	https://cdn.jsdelivr.net/gh/用户名/仓库名

点击设为默认图床

注：如果不填写自定义域名： PicGo 会使用默认的 GitHub 原始地址，格式如下：
https://raw.githubusercontent.com/用户名/仓库名/分支名/图片路径
raw.githubusercontent.com的服务器在国外，国内访问极慢，图片经常加载失败或转圈几秒才出来。而 jsDelivr 在国内有 CDN 节点，速度很快。
稳定性：某些网络环境（如校园网、企业网）会直接屏蔽 raw.githubusercontent.com，导致图片无法显示。jsDelivr 被屏蔽的概率小得多。
HTTPS 支持：两者都支持，但 jsDelivr 的证书更现代。

“没填”时生成的链接能访问，也许是因为你当时网络恰好能连通 GitHub raw 服务器，或者在国外。但对于国内读者，很可能看到的是裂图。

3.5.3.2 配置githubplus插件图床

在 PicGo 的图床设置→githubplus中填写：

配置项	必填？	填写说明 & 示例
图床配置名	✅ 必填	随便填一个好记的名字，比如我的GitHub图床，用来区分不同配置
repo	✅ 必填	格式：你的GitHub用户名/仓库名 示例：xiaoyu/picgo-images 注意：仓库必须是公开的，否则图片会 404
branch	⭕ 选填	你的仓库分支名，默认填main即可（老版本 GitHub 可能是master，没改过分支就用main）
token	✅ 必填	用来授权 PicGo 上传文件,3.4的（2）保存的token
path	⭕ 选填	图片在仓库里的存储路径，比如填images/会传到仓库的images文件夹 进阶用法：img/${year}/${month}/会自动按年 / 月创建文件夹，方便管理
customUrl	⭕ 选填（强烈推荐填）	用来搭配 jsdelivr CDN 加速，国内访问更快 格式：https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名 示例：https://cdn.jsdelivr.net/gh/xiaoyu/picgo-images

3.6 配置 Obsidian 的 Image Auto Upload 插件

1. 回到 Obsidian → 设置 → 第三方插件 → Image Auto Upload
2. 确保上传方式选择PicGo(app)
3. 监听端口：保持36677
4. 粘贴图片时自动上传：开启
5. 关闭设置
   

3.7 测试上传

1. 在 Obsidian 中新建一个笔记。
2. 复制一张图片（任意图片）。
3. 在笔记中按Ctrl+V粘贴。
4. 观察：
   • 图片应该很快显示出来。
   • 下方图片链接格式为![](https://cdn.jsdelivr.net/gh/你的用户名/仓库名/images/xxx.png)
   • PicGo 的图标会弹出“上传成功”提示。
5. 去你的 GitHub 仓库页面刷新，会看到images文件夹下多出了这张图片。

试用 Wikilinks to MD Links（马上体验转换效果）
使用快捷键

1. 进入 Obsidian 设置 →快捷键。
2. 搜索wikilinks，找到该命令。
3. 点击右侧加号，按一个顺手的组合键，比如Ctrl + Shift + L（表示 Link convert）。
4. 保存。
   

问题：希望图片按images/2026/05/图片.png这样的路径存放，但实际生成的链接中插件plus版本和内置版本${year}和${month}均没有被替换成实际数字

内置版显示链接为：https://cdn.jsdelivr.net/gh/用户名/仓库名/images/%24%7Byear%7D/%24%7Bmonth%7D/20260528043628446.png

plus版显示链接为：https://cdn.jsdelivr.net/gh/用户名/仓库/images/y e a r / {year}/year/{month}/20260528043749647.png

未解决