跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.js

Gitee+PicGo 搭建 Markdown 笔记图床指南

介绍如何使用 Gitee、PicGo 和 Node.js 搭建图床,解决 Markdown 笔记中图片本地路径失效的问题。内容涵盖环境安装、仓库创建、Token 获取、插件配置及 Obsidian 集成,帮助实现图片自动上传至云端,确保跨设备访问稳定。

橘子海发布于 2026/3/30更新于 2026/10/24103 浏览
Gitee+PicGo 搭建 Markdown 笔记图床指南

引言:为什么要解决搭建图床?

你是否遇到过这样的场景:

  • 用 Obsidian 写了半年的知识库,换电脑时发现所有图片都变成'破碎图标';
  • 把 Markdown 笔记分享给同事,对方打开后图片全是本地路径,根本看不到内容;
  • 尝试用云盘链接替代,却因为'防盗链'或'链接过期',图片还是无法正常显示……

本地 Markdown 笔记的'图片依赖本地路径',是困扰无数创作者的痛点。而解决这个问题的核心,就是搭建一个'图床'——把图片托管到云端,让链接永远有效。

本文将带你用'Gitee(国内免费仓库)+ PicGo(自动上传工具)+ Node.js(运行环境)'搭建图床,不仅解决'图片失效',还能实现:

  • ✔️ 国内访问快:Gitee 服务器在国内,无需科学上网,图片秒加载;
  • ✔️ 完全免费:Gitee 仓库、PicGo、Node.js 均为开源免费工具;
  • ✔️ 无缝对接 Obsidian:写笔记时'拖入图片自动上传',全程无感知;

从工具原理解析到 Step by Step 实操(包括环境搭建、插件配置、异常排查),甚至帮你避过 90% 的踩坑点。无论你是笔记爱好者,还是专业创作者,都能通过这篇文章彻底解决'图片链接失效'的心病。

一、概念扫盲:为什么需要这些工具?

在开始操作前,先搞懂四个核心概念,避免'盲目操作':

1. 图床:图片的'云端仓库'
  • 定义:专门用来存储图片的云端平台,核心是生成'永久可访问的图片 URL'(如 https://gitee.com/xxx.png)。
  • 类比:把图片当成'货物',图床就是'网络仓库',随时能通过链接提取货物(图片)。
  • 解决的痛:
    • 本地笔记里的 ![示例](./images/pic.png),换电脑、分享给别人时,链接必然失效;
    • 图床的链接是'云端地址',在哪台设备打开都能访问,彻底摆脱'路径依赖'。
2. Gitee:国内版'代码托管平台'(选它当图床的理由)
  • 定义:类似 GitHub,但服务器在国内,是免费的代码/文件托管平台,可以理解为'中国的 GitHub'。
  • 为什么选 Gitee 当图床?
    • ✅ 访问快:国内节点,不用科学上网,图片加载秒开;
    • ✅ 免费开源:创建'开源仓库'后,图片可被公开访问(非开源仓库的图片无法外链);
    • ✅ 支持 RAW 链接:仓库里的图片能通过 https://gitee.com/用户名/仓库名/raw/分支/图片路径.png 直接访问(类似 GitHub 的 RAW 链接,但速度更快)。
  • 对比其他云盘:百度网盘的链接带防盗链,无法直接插入 Markdown;而 Gitee 的 RAW 链接是'纯静态文件地址',完美适配 Markdown 语法。
3. PicGo:图片上传'自动化神器'
  • 定义:图片上传客户端,核心是'一键上传本地图片,自动生成网络链接'。
  • 核心价值:把'登录 Gitee→找仓库→点击上传→复制链接'的繁琐步骤,压缩成'拖入图片→自动出链接'(甚至支持快捷键 Ctrl+Alt+U)。
  • 为什么需要插件? PicGo 默认支持 GitHub、七牛云等图床,但不直接支持 Gitee。这时需要安装 gitee-uploader 插件(用 Node.js 开发),让 PicGo 能对接 Gitee。
4. Node.js:插件的'动力引擎'
  • 定义:让 JavaScript 代码能在电脑本地运行的运行时环境(类似 Java 的 JVM,Python 的解释器)。
  • 在图床场景里的作用: PicGo 的插件(如 gitee-uploader)是用 Node.js 开发的,必须安装 Node.js 才能运行这些插件。简单说:Node.js 是'插件的发动机',没有它,PicGo 无法加载 Gitee 插件。
二、环境搭建:Node.js 安装(必做!)
2.1 下载 Node.js

访问 Node.js 官网,选择 LTS 长期支持版(如 18.18.0 LTS):

  • Windows 用户选 x64 Installer(64 位系统通用);
  • macOS 选 .pkg 安装包;
  • Linux 通过包管理器安装(如 sudo apt install nodejs)。
2.2 安装与验证(以 Windows 为例)
  1. 双击安装包,勾选'Add to PATH'(自动配置环境变量,避免手动设置);
  2. 一路点击'Next',默认路径安装即可;

打开命令提示符(CMD),输入以下命令验证:

node -v
# 输出 Node 版本(如 v18.18.0)
npm -v
# 输出 npm 版本(如 9.8.1)

✅ 若正常输出版本,说明安装成功。

三、PicGo 安装:图片上传客户端
3.1 下载对应版本

访问 PicGo 官网 或国内镜像,根据系统选择:

  • Windows:优先选 PicGo-Setup-xxx-x64.exe(64 位系统专属,性能更优);
  • macOS:选 PicGo-xxx.dmg;
  • Linux:选 PicGo-xxx.AppImage。

Windows 一般建议选 2.4 的版本都是可以的,不要选 2.3 之前的老版本就行,因为老版本还不支持 gitee 插件。

注意这里可能会有一个小插曲——程序被报错不安全,这里直接选保留就行了。

3.2 安装与启动
  1. 双击安装包,按向导完成安装;

启动 PicGo 后,右下角托盘会出现图标,右键→'打开主界面'即可操作。

四、Gitee 配置:创建图片仓库
4.1 新建 Gitee 仓库
  1. 填写关键信息:
    • 仓库名称:建议含 img 或者 picture;
    • 可见性:必须选'开源'(否则图片无法公开访问);
  2. 点击'创建'。

初始化仓库:勾选(自动生成 README,便于管理);

登录 Gitee 官网,点击右上角'+'→新建仓库;

4.2 获取访问令牌(Token)

点击 Gitee 头像→'设置'→'私人令牌'→'生成新令牌';

  1. 配置令牌:
    • 描述:填 PicGo 图床(方便记忆);
    • 权限:仅勾选'projects'(最小必要权限,避免安全风险);

提交后,复制生成的 Token(仅显示一次,务必保存到记事本!)。

五、PicGo 配置:连接 Gitee 图床
5.1 安装 Gitee 插件
  1. 打开 PicGo 主界面→左下角'插件设置';

命令行手动安装:

npm install picgo-plugin-gitee-uploader -g

先换国内 npm 源(加速下载):

npm config set registry https://registry.npmmirror.com

搜索框输入 gitee,找到 gitee-uploader 1.1.2 插件,点击'安装'。

⚠️ 若安装失败:请检查 Node.js 环境及网络。

5.2 配置 Gitee 图床参数

点击'设为默认图床'→'确定',完成配置。

填写关键参数(参考示例):

参数填写规则示例
repo用户名/仓库名(从 Gitee 仓库 URL 提取)your_gitee_name/note-img-bed
branch仓库分支(可不写,默认 main 或 master)master
token刚才复制的 Gitee Tokenxxxxxxxxxxxxx
path图片存储路径(与仓库 img 文件夹一致)img/
customPath按日期分类(可选,如${year}/${month}/${day})2025/09/16(自动生成)

回到 PicGo 主界面→'图床设置'→选择'Gitee';

六、Obsidian 集成:让本地图片自动上传
6.1 安装图片上传插件

搜索 Image Auto Upload,点击'安装'→'启用'。

打开 Obsidian→'设置'→'社区插件'→'浏览';

6.2 配置 PicGo 服务
  1. 在 Obsidian 插件设置中,找到'Image Auto Upload':

端口:默认 36677, 上传接口默认为 http://127.0.0.1:36677/upload

若被占用,可在 PicGo→'设置'→'设置 Server'中修改。

6.3 测试上传(关键步骤!)
  1. 在 Obsidian 中插入本地图片(拖入编辑区,或用 ![[pic.png]] 语法);
  2. 查看图片链接:已自动替换为 Gitee 的网络链接(如 https://gitee.com/xxx/xxx.png);

验证:复制链接到浏览器,若能正常显示图片,则配置成功。

七、常见问题排查
7.1 PicGo 上传失败
  • ❌ Node.js 未安装:重新运行 node -v 验证,若未安装则回到步骤二。
  • ❌ 仓库路径错误:检查 repo 是否为 用户名/仓库名,path 是否与仓库 img 文件夹一致;
  • ❌ Token 权限不足:重新生成 Token,确保勾选 projects 权限;
7.2 Gitee 图片无法访问
  • ❌ 路径错误:检查 PicGo 配置的 path 和仓库实际文件夹是否一致(如 img/ 是否存在)。
  • ❌ 仓库未开源:进入 Gitee 仓库→'管理'→'基本信息'→设为'开源';
7.3 Obsidian 上传无反应
  • ❌ 端口冲突:修改 PicGo 的 Server 端口(如 36678),并同步更新 Obsidian 插件配置。
  • ❌ PicGo 未启动:确保 PicGo 在后台运行(托盘有图标);
八、总结:从本地到云端的跨越

通过 Gitee(存储)+ PicGo(上传)+ Node.js(环境)的组合,我们实现了:

  • ✅ 本地图片自动转网络链接,跨设备、跨平台访问稳定;
  • ✅ 借助 Gitee 国内节点,访问速度优于 GitHub;
  • ✅ 配合 Obsidian 插件,写作时'无感上传',专注内容创作。

附录:工具速链

  • Node.js 下载:https://nodejs.org/
  • PicGo 官网:https://molunerfinn.com/PicGo/
  • Gitee 官网:https://gitee.com/

目录

  1. 引言:为什么要解决搭建图床?
  2. 一、概念扫盲:为什么需要这些工具?
  3. 1. 图床:图片的“云端仓库”
  4. 2. Gitee:国内版“代码托管平台”(选它当图床的理由)
  5. 3. PicGo:图片上传“自动化神器”
  6. 4. Node.js:插件的“动力引擎”
  7. 二、环境搭建:Node.js 安装(必做!)
  8. 2.1 下载 Node.js
  9. 2.2 安装与验证(以 Windows 为例)
  10. 输出 Node 版本(如 v18.18.0)
  11. 输出 npm 版本(如 9.8.1)
  12. 三、PicGo 安装:图片上传客户端
  13. 3.1 下载对应版本
  14. 3.2 安装与启动
  15. 四、Gitee 配置:创建图片仓库
  16. 4.1 新建 Gitee 仓库
  17. 4.2 获取访问令牌(Token)
  18. 五、PicGo 配置:连接 Gitee 图床
  19. 5.1 安装 Gitee 插件
  20. 5.2 配置 Gitee 图床参数
  21. 六、Obsidian 集成:让本地图片自动上传
  22. 6.1 安装图片上传插件
  23. 6.2 配置 PicGo 服务
  24. 6.3 测试上传(关键步骤!)
  25. 七、常见问题排查
  26. 7.1 PicGo 上传失败
  27. 7.2 Gitee 图片无法访问
  28. 7.3 Obsidian 上传无反应
  29. 八、总结:从本地到云端的跨越

更多推荐文章

查看全部
  • 算法题精讲:模拟法在字符串与时间计算中的应用
  • LangChain 简明讲义:从 0 到 1 构建 LLM 应用程序
  • 基于 DeepSeek 的贪吃蛇游戏开发实战指南
  • VSCode 接入智谱 GLM-4 及自定义大模型配置方案
  • OpenCode 开源 AI 编程助手简介
  • 基于 React 与 MediaPipe 的数字塔罗占卜系统设计与实现
  • Spring Boot 3 优雅停机配置与实战
  • 二分查找算法:x 的平方根与搜索插入位置
  • 基于 OpenClaw 框架在 Discord 部署 AI 对话机器人实战指南
  • 国产时序数据库云原生实践:Apache IoTDB 与 TimechoDB 深度应用
  • C++ STL 进阶:unordered_set 与 unordered_map 模拟实现
  • vcpkg:跨平台 C++ 包管理器使用指南
  • Neo4j 图数据库基础入门
  • Claude Code + Figma:AI 辅助原型设计实战指南
  • 本地低配环境部署与调试 Qwen3.5-4B 模型
  • 用双栈模拟队列:LIFO 到 FIFO 的转换艺术与实现
  • Python 描述符与 ORM:从查找规则到实战
  • 网络安全入门学习路线与实战指南
  • Python 情感分析工具包构建入门
  • 十大 AI 副业赛道:普通人如何利用 AI 工具实现额外收入

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online