{% tabs config-method %}

{% note warning modern %} 我们在技术写作中常遇到这些痛点：

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

{% endnote %}

传统解决方案的局限性：

+ 相对路径方案：
- 优点：简单直接
- 缺点：依赖目录结构，跨项目复用困难

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

+ 云存储方案：
- 优点：永久可用
- 缺点：手动上传效率低，管理成本高

{% note success flat %}

功能维度	传统方案	PicGo方案
上传效率	❌ 手动	✅ 自动
路径一致性	❌ 差异	✅ 统一
多平台支持	❌ 单一	✅ 通用
版本控制	❌ 无	✅ 集成
访问速度	⚠️ 一般	✅ CDN加速

{% endnote %}

{% note success modern %} 为什么选择GitHub图床？

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

{% endtabs %}

环境准备

1. 创建GitHub图床仓库

# 推荐命名规范
username-images
# 示例：
TravisZS-images

{% image https://img.shutiaoz.top/blog/20230830191759.png?dpi=300&border=1px_solid_#e0e0e0 'GitHub仓库创建示意图' width:80% %}

2. 获取访问凭证

{% tabs token-steps, 1 %}

访问 GitHub Settings
左侧菜单 » Developer settings » Personal access tokens
点击 Generate new token (classic)

{% image https://img.shutiaoz.top/blog/20230830193013.png '开发者设置入口' width:60% %}

{% raw %}

{
  "name": "PicGo-Token",
  "expiration": "no expiration",
  "scopes": ["repo"]
}

{% endraw %}

{% note danger no-icon %} ❗ 安全提示：

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

{% endtabs %}

客户端配置

{% tabs client-type %}

PicGo 桌面版配置

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

{% image https://img.shutiaoz.top/blog/202311131838063.png?dpi=300 GUI配置界面 width:80% %}

{% note info modern %} 💡 网络优化技巧：

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

{% endnote %}

PicGo-Core 配置

# 通过npm安装
npm install picgo -g

# 或使用yarn
yarn global add picgo

# 验证安装
picgo -v

{% image https://img.shutiaoz.top/blog/20240206201404.png 版本验证 width:60% %}

配置流程：

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

生成配置文件示例：

// ~/.picgo/config.json
{
  "picBed": {
    "current": "github",
    "github": {
      "repo": "用户名/仓库名",
      "branch": "main",
      "token": "github保存的token",
      "path": "仓库内的文件夹/",
      "customUrl": "https://cdn.jsdelivr.net/gh"
    }
  }
}

{% endtabs %}

VSCode集成配置

1. 安装插件

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

{% image https://img.shutiaoz.top/blog/20230831162010.png 插件安装界面 width:60% %}

2. 配置插件

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

{
  "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

工作流验证

测试用例

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

Examples:

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

成功状态验证

{% image https://img.shutiaoz.top/blog/20230831162724.png 上传成功提示 width:50% %}

{% note success modern %} ✅ 最终效果检查清单：

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

{% note info modern %} 💡 扩展应用场景：

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