ObsidianGitHubjsDelivrPicGo图床配置这是我的第一个笔记,主要讲Obsidian图床配置选择的是GitHub jsDelivr PicGo一、为什么需要图床写技术博客时我们经常需要插入截图或者示意图。如果直接在本地粘贴图片发布到CSDN或其他网站后图片会裂开因为别人访问不到我们自己电脑里面的文件。图床的作用是把图片上传到云服务器生成一个在线链接。无论在哪里发布只要粘贴这个简介图片就能正常显示。不用图床的痛点每篇文章要手动一张张上传到 CSDN 和公众号后台效率极低同一个图片如果要发多个平台重复上传很烦图片存在本地换电脑或重装系统后就没了使用图床的好处粘贴即上传自动生成链接一次上传多平台通用CSDN、公众号、个人博客等图片永久存储在云端不会丢失二、方案选择GitHub jsDelivr PicGoGitHub:作为图床的存储空间存放所有图片公开仓库。特点免费、稳定、无限容量单仓库有限制但够用、与开发者生态无缝衔接。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。安装步骤关闭 Obsidian 的“安全模式”设置 → 第三方插件 → 关闭安全模式。点击“浏览”搜索插件名称分别安装并启用。安装后暂时不用配置等 PicGo 装好再回头设置。3.2.1 Image Auto Upload图片自动上传它做什么当你在 Obsidian 里粘贴或拖入一张图片时这个插件会自动把图片上传到网上的图床比如 SM.MS、阿里云 OSS并自动把笔记里的图片链接替换成在线网址。没有它的情况粘贴图片后Obsidian 只会在本地存一个![[图片.png]]图片存在电脑的附件文件夹里。这个链接发到 CSDN 或公众号别人是看不到图片的因为那是你本地的文件路径。有它的情况粘贴图片后插件自动上传笔记里会变成。复制到任何平台图片都能正常显示。它需要配合什么: 需要一个PicGo 桌面软件免费和一个图床账号有免费或付费的。PicGo 负责执行上传动作插件负责调用 PicGo。3.2.2 Wikilinks to MD LinksWiki 链接转标准链接它做什么将 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.exemacOS下载.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点击右上角头像 →Settings左侧最下方找到Developer settings点击Personal access tokens→Tokens (classic)点击Generate new token→Generate new token (classic)在Note中填写PicGo upload imagesExpiration过期时间选择No expiration永不过期或自定义如 1 年。建议永不过期省事。在Select scopes中勾选repo整个 repo 权限这样才能上传图片滚动到底部点击Generate token立刻复制并保存好这个 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 环境。因此建议先安装依赖再安装插件方法去 nodejs.org 下载 LTS 版本,直接下载 Windows 的.msi安装包运行安装包一路点击下一步必须勾选「Add to PATH」添加到系统环境变量—— 这是 PicGo 能找到 Node.js 的核心 。验证安装是否成功按WinR输入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-uploader4、点击右下角的安装可能需要重启 PicGo5、安装后左侧菜单图床设置下会多出GitHub Plus注如果是窗口显示英文可点击settings设置为简体中文3.5.3 配置 图床3.5.3.1 配置内置GIThub图床未做3.5.2在 PicGo 的图床设置→GitHub中填写图床配置名随意我的GitHub图床设定仓库名用户名/仓库名zhangsan/blog-images设定分支名main或mastermain设定Token粘贴上面保存的 Tokenghp_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注意仓库必须是公开的否则图片会 404branch⭕ 选填你的仓库分支名默认填main即可老版本 GitHub 可能是master没改过分支就用maintoken✅ 必填用来授权 PicGo 上传文件,3.4的2保存的tokenpath⭕ 选填图片在仓库里的存储路径比如填images/会传到仓库的images文件夹进阶用法img/${year}/${month}/会自动按年 / 月创建文件夹方便管理customUrl⭕ 选填强烈推荐填用来搭配 jsdelivr CDN 加速国内访问更快格式https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名示例https://cdn.jsdelivr.net/gh/xiaoyu/picgo-images3.6 配置 Obsidian 的 Image Auto Upload 插件回到 Obsidian → 设置 → 第三方插件 → Image Auto Upload确保上传方式选择PicGo(app)监听端口保持36677粘贴图片时自动上传开启关闭设置3.7 测试上传在 Obsidian 中新建一个笔记。复制一张图片任意图片。在笔记中按CtrlV粘贴。观察图片应该很快显示出来。下方图片链接格式为PicGo 的图标会弹出“上传成功”提示。去你的 GitHub 仓库页面刷新会看到images文件夹下多出了这张图片。试用 Wikilinks to MD Links马上体验转换效果使用快捷键进入 Obsidian 设置 →快捷键。搜索wikilinks找到该命令。点击右侧加号按一个顺手的组合键比如Ctrl Shift L表示 Link convert。保存。问题希望图片按images/2026/05/图片.png这样的路径存放但实际生成的链接中插件plus版本和内置版本${year}和${month}均没有被替换成实际数字内置版显示链接为https://cdn.jsdelivr.net/gh/用户名/仓库名/images/%24%7Byear%7D/%24%7Bmonth%7D/20260528043628446.pngplus版显示链接为https://cdn.jsdelivr.net/gh/用户名/仓库/images/y e a r / {year}/year/{month}/20260528043749647.png未解决
Obsidian+GitHub+jsDelivr+PicGo图床配置
发布时间：2026/5/29 3:49:12
ObsidianGitHubjsDelivrPicGo图床配置这是我的第一个笔记,主要讲Obsidian图床配置选择的是GitHub jsDelivr PicGo一、为什么需要图床写技术博客时我们经常需要插入截图或者示意图。如果直接在本地粘贴图片发布到CSDN或其他网站后图片会裂开因为别人访问不到我们自己电脑里面的文件。图床的作用是把图片上传到云服务器生成一个在线链接。无论在哪里发布只要粘贴这个简介图片就能正常显示。不用图床的痛点每篇文章要手动一张张上传到 CSDN 和公众号后台效率极低同一个图片如果要发多个平台重复上传很烦图片存在本地换电脑或重装系统后就没了使用图床的好处粘贴即上传自动生成链接一次上传多平台通用CSDN、公众号、个人博客等图片永久存储在云端不会丢失二、方案选择GitHub jsDelivr PicGoGitHub:作为图床的存储空间存放所有图片公开仓库。特点免费、稳定、无限容量单仓库有限制但够用、与开发者生态无缝衔接。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。安装步骤关闭 Obsidian 的“安全模式”设置 → 第三方插件 → 关闭安全模式。点击“浏览”搜索插件名称分别安装并启用。安装后暂时不用配置等 PicGo 装好再回头设置。3.2.1 Image Auto Upload图片自动上传它做什么当你在 Obsidian 里粘贴或拖入一张图片时这个插件会自动把图片上传到网上的图床比如 SM.MS、阿里云 OSS并自动把笔记里的图片链接替换成在线网址。没有它的情况粘贴图片后Obsidian 只会在本地存一个![[图片.png]]图片存在电脑的附件文件夹里。这个链接发到 CSDN 或公众号别人是看不到图片的因为那是你本地的文件路径。有它的情况粘贴图片后插件自动上传笔记里会变成。复制到任何平台图片都能正常显示。它需要配合什么: 需要一个PicGo 桌面软件免费和一个图床账号有免费或付费的。PicGo 负责执行上传动作插件负责调用 PicGo。3.2.2 Wikilinks to MD LinksWiki 链接转标准链接它做什么将 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.exemacOS下载.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点击右上角头像 →Settings左侧最下方找到Developer settings点击Personal access tokens→Tokens (classic)点击Generate new token→Generate new token (classic)在Note中填写PicGo upload imagesExpiration过期时间选择No expiration永不过期或自定义如 1 年。建议永不过期省事。在Select scopes中勾选repo整个 repo 权限这样才能上传图片滚动到底部点击Generate token立刻复制并保存好这个 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 环境。因此建议先安装依赖再安装插件方法去 nodejs.org 下载 LTS 版本,直接下载 Windows 的.msi安装包运行安装包一路点击下一步必须勾选「Add to PATH」添加到系统环境变量—— 这是 PicGo 能找到 Node.js 的核心 。验证安装是否成功按WinR输入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-uploader4、点击右下角的安装可能需要重启 PicGo5、安装后左侧菜单图床设置下会多出GitHub Plus注如果是窗口显示英文可点击settings设置为简体中文3.5.3 配置 图床3.5.3.1 配置内置GIThub图床未做3.5.2在 PicGo 的图床设置→GitHub中填写图床配置名随意我的GitHub图床设定仓库名用户名/仓库名zhangsan/blog-images设定分支名main或mastermain设定Token粘贴上面保存的 Tokenghp_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注意仓库必须是公开的否则图片会 404branch⭕ 选填你的仓库分支名默认填main即可老版本 GitHub 可能是master没改过分支就用maintoken✅ 必填用来授权 PicGo 上传文件,3.4的2保存的tokenpath⭕ 选填图片在仓库里的存储路径比如填images/会传到仓库的images文件夹进阶用法img/${year}/${month}/会自动按年 / 月创建文件夹方便管理customUrl⭕ 选填强烈推荐填用来搭配 jsdelivr CDN 加速国内访问更快格式https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名示例https://cdn.jsdelivr.net/gh/xiaoyu/picgo-images3.6 配置 Obsidian 的 Image Auto Upload 插件回到 Obsidian → 设置 → 第三方插件 → Image Auto Upload确保上传方式选择PicGo(app)监听端口保持36677粘贴图片时自动上传开启关闭设置3.7 测试上传在 Obsidian 中新建一个笔记。复制一张图片任意图片。在笔记中按CtrlV粘贴。观察图片应该很快显示出来。下方图片链接格式为PicGo 的图标会弹出“上传成功”提示。去你的 GitHub 仓库页面刷新会看到images文件夹下多出了这张图片。试用 Wikilinks to MD Links马上体验转换效果使用快捷键进入 Obsidian 设置 →快捷键。搜索wikilinks找到该命令。点击右侧加号按一个顺手的组合键比如Ctrl Shift L表示 Link convert。保存。问题希望图片按images/2026/05/图片.png这样的路径存放但实际生成的链接中插件plus版本和内置版本${year}和${month}均没有被替换成实际数字内置版显示链接为https://cdn.jsdelivr.net/gh/用户名/仓库名/images/%24%7Byear%7D/%24%7Bmonth%7D/20260528043628446.pngplus版显示链接为https://cdn.jsdelivr.net/gh/用户名/仓库/images/y e a r / {year}/year/{month}/20260528043749647.png未解决
