我们在技术写作中常遇到这些痛点：

  1. 本地图片路径与发布环境不一致
  2. 多平台协作时图片无法同步
  3. Markdown文件迁移需要重新整理附件
  4. GitHub仓库体积随着图片增加而膨胀

传统解决方案的局限性：

1
2
3
4
5
6
7
8
9
10
11
+ 相对路径方案：
- 优点：简单直接
- 缺点：依赖目录结构，跨项目复用困难

+ 绝对路径方案：
- 优点：路径明确
- 缺点：需要配置Web服务器，本地预览不便

+ 云存储方案：
- 优点：永久可用
- 缺点：手动上传效率低，管理成本高
功能维度 传统方案 PicGo方案
上传效率 ❌ 手动 ✅ 自动
路径一致性 ❌ 差异 ✅ 统一
多平台支持 ❌ 单一 ✅ 通用
版本控制 ❌ 无 ✅ 集成
访问速度 ⚠️ 一般 ✅ CDN加速

为什么选择GitHub图床？

  • 免费1GB存储空间（含LFS）
  • 无缝集成Git版本控制
  • 通过jsDelivr实现全球CDN加速
  • 完善的API生态

环境准备

1. 创建GitHub图床仓库

1
2
3
4
# 推荐命名规范
username-images
# 示例：
TravisZS-images

2. 获取访问凭证

  1. 访问 GitHub Settings
  2. 左侧菜单 » Developer settings » Personal access tokens
  3. 点击 Generate new token (classic)
1
2
3
4
5
{
  "name": "PicGo-Token",
  "expiration": "no expiration",
  "scopes": ["repo"]
}

❗ 安全提示：

  • token只可见一次
  • 不要将token直接提交到Git
  • 安全存储Token至本地密码管理器
  • 定期轮换密钥

客户端配置

PicGo 桌面版配置

1
2
3
4
5
6
7
8
9
# picgo.yml
picBed:
  current: github
  github:
    repo: TravisZS/images-blog  # 格式：用户名/仓库名
    branch: main
    token: ${GITHUB_TOKEN}     # 建议使用环境变量
    path: blog-images/
    customUrl: https://cdn.jsdelivr.net/gh

💡 网络优化技巧：

1
2
# 设置代理（仅大陆需要）
export https_proxy=http://127.0.0.1:7890

PicGo-Core 配置

1
2
3
4
5
6
7
8
# 通过npm安装
npm install picgo -g

# 或使用yarn
yarn global add picgo

# 验证安装
picgo -v

配置流程：

1
2
3
4
5
6
7
picgo set uploader
? 选择默认上传器 github
? 仓库名称 TravisZS/images-blog
? 分支名称 main
? 访问令牌 ${GITHUB_TOKEN}
? 存储路径 blog-images/
? 自定义域名 https://cdn.jsdelivr.net/gh

生成配置文件示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
// ~/.picgo/config.json
{
  "picBed": {
    "current": "github",
    "github": {
      "repo": "用户名/仓库名",
      "branch": "main",
      "token": "github保存的token",
      "path": "仓库内的文件夹/",
      "customUrl": "https://cdn.jsdelivr.net/gh"
    }
  }
}

VSCode集成配置

1. 安装插件

在VSCode扩展商店搜索安装 “PicGo” 插件：

2. 配置插件

打开VSCode设置 (Ctrl+,)，搜索 “PicGo”，配置关键参数(与上面配置客户端类似)：

1
2
3
4
5
6
7
8
9
10
{
  "picgo.configPath": "${workspaceFolder}/.vscode/picgo.json",
  "picgo.customUploadName": "github",
  "picgo.github.branch": "main",
  "picgo.github.customUrl": "https://cdn.jsdelivr.net/gh",
  "picgo.github.path": "blog-images/",
  "picgo.github.repo": "TravisZS/images-blog",
  "picgo.github.token": "$token",
  "picgo.uploader": "github"
}

3. 快捷键绑定

推荐绑定以下快捷键：

功能 快捷键 命令ID
上传剪贴板图片 Ctrl+Alt+U picgo.uploadImageFromClipboard
选择本地图片上传 Ctrl+Alt+O picgo.uploadImageFromExplorer
上传当前选区截图 Ctrl+Alt+S picgo.uploadImageFromSelection

工作流验证

测试用例

1
2
3
4
Scenario: 图片上传功能验证
  Given 已安装配置PicGo环境
  When 执行上传操作
  Then 应返回有效的CDN链接

Examples:

操作方式 测试方法 预期结果
剪贴板上传 Ctrl+Alt+U 显示成功通知
文件拖拽上传 拖拽图片到PicGo窗口 生成Markdown格式链接
命令行上传 picgo upload /path/to/image 返回JSON格式的上传结果

成功状态验证

✅ 最终效果检查清单：

  • 图片链接格式正确
  • 仓库中生成对应文件
  • Markdown渲染正常
  • CDN访问速度达标（<500ms）

💡 扩展应用场景：

  • 博客图片管理
  • 技术文档配图
  • 产品需求文档
  • 开源项目截图