零成本搭建免费图床：PicGo + GitHub + jsdelivr CDN 完整方案

Kp独立开发
111 阅读6分钟

前言

在日常开发和技术写作中，我们经常需要上传图片、截图等资源，并通过外部链接进行分享。传统的图床服务要么收费，要么不稳定，要么有访问限制。今天分享一个完全免费的图床解决方案：使用 PicGo + GitHub + jsdelivr CDN，实现稳定、快速、免费的图片托管服务。

为什么选择这个方案？

核心优势

  1. 完全免费：GitHub 仓库和 jsdelivr CDN 都是免费服务
  2. 容量充足：GitHub 仓库容量大，适合存储大量图片
  3. 访问稳定：通过 jsdelivr CDN 加速，解决 GitHub 直接访问不稳定的问题
  4. 使用便捷：PicGo 提供图形化界面，一键上传图片
  5. 外部链接：生成的链接可以直接在 Markdown、博客等场景中使用

解决的问题

  • GitHub 在某些地区访问不稳定或无法访问
  • 需要支持外部链接访问图片
  • 需要一个稳定、免费的图片存储方案

系统架构

PicGo + GitHub + jsdelivr CDN 免费图床架构

整体流程：PicGo 上传 → GitHub 仓库存储 → jsdelivr CDN → 外部访问

  • 上传流程：用户通过 PicGo 上传图片，PicGo 通过 GitHub API 将图片存储到 GitHub 仓库
  • 访问流程：通过 jsdelivr CDN 加速访问，解决 GitHub 直接访问不稳定的问题
  • 认证方式：使用 Personal Access Token 进行 GitHub API 认证

详细配置步骤

第一步：下载 PicGo

访问 PicGo 的 GitHub 发布页面下载对应版本：

🔗 下载地址：github.com/Molunerfinn…

支持 Windows、macOS、Linux 三个平台，根据你的系统选择对应的安装包。

第二步：创建 GitHub 仓库

  1. 登录 GitHub，点击右上角的 "+" 号，选择 "New repository"
  2. 填写仓库名称（例如：img）
  3. 选择 Public（公开仓库，jsdelivr CDN 才能访问）
  4. 点击 "Create repository" 创建仓库

第三步：生成 GitHub Personal Access Token

  1. 登录 GitHub 账号，点击右上角的头像，选择 Settings（设置）
  2. 在左侧菜单中选择 Developer settings（开发者设置）
  3. 进入 Personal access tokens（个人访问令牌），再点击 Tokens (classic)
  4. 点击 Generate new token (classic)（生成新的传统令牌）
  5. 给 token 取一个名字，比如 picgo-token
  6. 在权限 "scopes" 中只勾选 repo（只需要仓库访问权限）
  7. 点击 Generate token（生成令牌）
  8. 重要：复制生成的 token，token 只显示一次，一定要保存好，不要泄露

⚠️ 安全提示：Token 具有仓库访问权限，请妥善保管，不要提交到代码仓库中。

第四步：配置 PicGo

  1. 打开 PicGo 软件，点击左侧的 图床设置，然后选择 GitHub

  2. 填写配置信息：

    • 设定仓库名：Github账户名/仓库名，例如：starteamx/img
    • 设定分支：分支名，例如：master 或 main
    • 设定Token：粘贴刚才在 GitHub 生成的 Personal Access Token
    • 设定存储路径（可选）：可以设置子目录，例如 images/
    • 设定自定义域名（可选）：用于 CDN 加速，格式：https://cdn.jsdelivr.net/gh/Github账号名/仓库@分支

  3. 点击 确定 保存配置

第五步：配置 CDN 加速（可选但推荐）

由于 GitHub 在某些地区访问不稳定，建议配置 jsdelivr CDN 加速。

在 PicGo 的 GitHub 图床配置中，设置 自定义域名：

https://cdn.jsdelivr.net/gh/Github账号名/仓库@分支

示例：

https://cdn.jsdelivr.net/gh/starteamx/img@master

这样生成的图片链接就会自动使用 CDN 加速，访问更稳定、速度更快。

Mac 平台推荐方案：uPic

Mac 平台用户推荐使用 uPic，相比 PicGo 有以下优势：

  • 支持一键截图上传：无需两步操作，直接截图即可上传
  • GitHub 直接支持配置 CDN 加速访问：无需手动配置 CDN 地址
  • 友好的快捷功能以及配置界面：操作更便捷

下载和安装 uPic

  • 下载链接：github.com/gee1k/uPic/…
  • 安装方式：安装包直接安装到应用程序
  • 最新版本：v0.21.1（2024-12-11 发布）

uPic GitHub 图床配置

  1. 打开应用"uPic"，进入"偏好设置" → "图床配置"
  2. 点击"增加" → 选择"Github"
  3. 填写配置信息：
    • 用户名：GitHub 用户名
    • 仓库名：GitHub 仓库名
    • 分支：分支名（如 master 或 main）
    • Token：Personal Access Token（与 PicGo 相同的获取方法）
  4. 重要：直接勾选"使用 jsDelivr CDN 加速访问"
  5. 可通过"验证"按钮验证配置是否正确

uPic 高级配置

在"高级"配置中，可以配置以下快捷方式：

  • 截图上传：配置截图上传快捷键（支持一键截图上传）
  • 选择文件上传：配置选择文件上传的快捷方式
  • 剪切板上传：配置剪切板上传的快捷方式

使用方法

上传图片

  1. 打开 PicGo
  2. 可以通过以下方式上传：
    • 拖拽图片到 PicGo 窗口
    • 点击 "上传区" 选择图片
    • 使用快捷键上传剪贴板中的图片（默认 Ctrl+Shift+P）
  3. 上传成功后，PicGo 会自动复制图片链接到剪贴板
  4. 直接粘贴到 Markdown 文档或其他需要的地方即可

图片链接格式

在 Markdown 中使用：

![图片描述](https://cdn.jsdelivr.net/gh/starteamx/img@master/20260102154948202.png)

PicGo 的局限性

PicGo 存在以下缺点：

  • 不能截图后直接上传到图床，需要两步操作：
    1. 使用外部截图工具截图
    2. 使用按钮快捷上传"剪切板图片"，或使用快捷键 Ctrl/Command + Shift + P
  • 需要借助外部截图工具，无法实现一键截图上传
  • 截图上传插件失效：picgo-plugin-quick-capture 长时间没有更新，在新版本 PicGo 上已失效

这也是为什么 Mac 平台推荐使用 uPic 的原因。

注意事项

1. 仓库必须公开

jsdelivr CDN 只能访问公开的 GitHub 仓库，如果仓库是私有的，CDN 链接将无法访问。

2. Token 安全

  • 不要将 Token 提交到代码仓库
  • 如果 Token 泄露，立即到 GitHub 设置中撤销并重新生成
  • 定期更换 Token 以提高安全性

3. 仓库容量限制

虽然 GitHub 仓库容量很大，但建议：

  • 不要上传过大的文件（单文件建议不超过 100MB）
  • 定期清理不需要的图片
  • 合理组织文件结构

4. CDN 缓存

jsdelivr CDN 有缓存机制，图片更新后可能需要等待几分钟才能看到最新版本。如果需要立即更新，可以在 URL 后添加版本号或时间戳。

总结

通过 PicGo + GitHub + jsdelivr CDN 的组合，我们实现了一个完全免费、稳定可靠的图床方案。这个方案特别适合：

  • 技术博客写作
  • 开源项目文档
  • 个人笔记和知识库
  • 开发过程中的截图分享

方案优势回顾

✅ 完全免费：无需任何费用
✅ 容量充足：GitHub 仓库容量大
✅ 访问稳定：CDN 加速，全球可用
✅ 使用便捷：PicGo 图形化界面，操作简单
✅ 外部链接：支持在任何场景中使用

如果你也在寻找一个免费的图床解决方案，不妨试试这个方案。如果在使用过程中遇到问题，欢迎在评论区交流讨论。

相关资源

avatar
文章
阅读
粉丝