PicGo + GitHub 图床搭建

写博客最烦的事之一，就是图片没地方放。这篇记录用 PicGo + GitHub + jsDelivr 搭一套免费、稳定、可长期使用的图床，Mac 上的完整流程（Windows 步骤基本一致）。

一、图床是什么

图床就是专门存放图片的服务器，上传后返回一个 URL，把这个链接写进 Markdown 即可。

1	本地图片 → 上传到图床 → 得到 https://xxx/a.png → 写进文章

图床分国内和国外：

国外（GitHub、SM.MS、Imgur）：免费、不限量，但国内访问可能慢
国内（七牛云、阿里云 OSS、腾讯云 COS）：速度快，通常需要实名 + 域名，超出免费额度要钱

二、为什么选 GitHub + jsDelivr

方案	费用	速度	稳定性	备注
GitHub + jsDelivr	永久免费	⭐ 快（CDN 加速）	高	⭐ 本文方案
SM.MS	免费	一般	一般	免费版有限制，跑路过
七牛云 / 阿里云 OSS	有免费额度	快	高	需实名 + 备案域名
微博 / 知乎图床	免费	快	❌ 差	有防盗链，随时可能失效
付费图床（又拍云等）	付费	最快	最高	商业项目推荐

GitHub 仓库本身访问慢，但配合 jsDelivr 这个免费 CDN 后，图片会被缓存到全球节点，国内访问速度完全够用。而且数据在自己仓库里，迁移自由、不怕跑路。

三、准备工作

1. 创建 GitHub 仓库

登录 GitHub，右上角 + → New repository
填写仓库名（如 image 或 blog-images）
必须选 Public（公开） —— jsDelivr 只能加速公开仓库
勾选 Add a README file（避免空仓库）
点 Create repository 完成

仓库一定要 Public。私有仓库 jsDelivr 无法读取，图片会全部 403。

2. 创建个人 Token

Token 是给 PicGo 用的「钥匙」，让它有权限往你的仓库上传文件。

GitHub 右上角头像 → Settings
左侧最下方 → Developer settings
Personal access tokens → Tokens (classic)
右上角 Generate new token → Generate new token (classic)
填写：
- Note：随便写，如 PicGo
- Expiration：选 No expiration（永不过期，省得每年来换）
- Select scopes：勾选 repo（勾选它会自动选中其下所有子项）
拉到页面最底部，点绿色的 Generate token

Token 只显示这一次，关掉页面就再也看不到了。立刻复制保存（可以存到备忘录或密码管理器）。

GitHub 现在也提供细粒度 Token，权限更精确、更安全：

Settings → Developer settings → Personal access tokens → Fine-grained tokens
Generate new token
Resource owner 选自己，Repository access 选 Only selected repositories → 选刚建的图床仓库
Permissions → Repository permissions → 找到 Contents → 设为 Read and write
生成并保存

细粒度 Token 更安全（泄露后只能操作这一个仓库），但 PicGo 对它的兼容性不如 classic 稳定。出问题就换回 classic。

3. 安装 PicGo

PicGo 是一个用于快速上传图片并获取 URL 链接的工具。

1	brew install picgo --cask

或从 GitHub Releases 下载 PicGo-x.x.x.dmg 安装。

到 GitHub Releases 下载 PicGo-Setup-x.x.x.exe，一路下一步即可。

下载 PicGo-x.x.x.AppImage，加执行权限后运行；或用 snap install picgo。

四、配置 PicGo

打开 PicGo → 左侧「图床设置」→ GitHub 图床，逐项填写：

字段	填什么	示例
仓库名	`用户名/仓库名`	`qvp-nvn/image`
分支名	主分支名	`main`（老仓库可能是 `master`）
Token	上一步复制的 token	`ghp_xxxxxxxxxxxx`
存储路径	仓库里的目录（可空）	`img/`
自定义域名	jsDelivr 地址	`https://cdn.jsdelivr.net/gh/用户名/仓库名`
设定默认图床	✅ 打开	—

仓库名要写「用户名/仓库名」完整格式，只写仓库名会上传失败。分支名也要和仓库实际分支一致（去 GitHub 仓库页面左上角确认）。

填完后点「确定」，并把 GitHub 图床设为默认图床。

五、上传测试

三种方式任选：

拖拽 —— 把图片直接拖进 PicGo 的「上传区」
剪贴板 —— 截图后按快捷键（⌘ + Shift + P 默认）上传剪贴板图片
点击上传区 —— 选择文件上传

上传成功后「相册」里会出现图片，右键 → 复制 Markdown 链接，得到：

1	![图片说明](https://cdn.jsdelivr.net/gh/qvp-nvn/image/img/a.png)

把这段粘进文章即可。

六、用 jsDelivr 加速（关键一步）

CDN（Content Delivery Network，内容分发网络）的原理：把内容缓存到离用户最近的节点，用户就近取数据，速度大幅提升。

jsDelivr 是一个免费、公开的 CDN，专门为开源项目服务，可以直接加速 GitHub 仓库里的文件。

配置方法很简单 —— 在 PicGo 的图床配置里填上自定义域名：

1	https://cdn.jsdelivr.net/gh/用户名/仓库名

填了之后，PicGo 返回的链接会从

1	https://raw.githubusercontent.com/用户名/仓库名/main/img/a.png ← 慢

变成

1	https://cdn.jsdelivr.net/gh/用户名/仓库名/img/a.png ← 快

注意 jsDelivr 的 URL 里没有分支名。填错（多写一段 /main）会导致 404。

七、在 Typora 中配置 PicGo

配好之后，写文档时截图能自动上传并替换成图床链接，不用手动操作。

Typora → 偏好设置（Preferences）→ 图像
「插入图片时」选择 上传图片
「上传服务」选择 PicGo (app)
PicGo 路径填 /Applications/PicGo.app（Windows 填 PicGo 安装路径）
点「验证图片上传选项」测试，出现成功提示即可

配置成功后，在 Typora 里直接 ⌘ + V 粘贴截图，图片会自动上传并变成 jsDelivr 链接。写博客的效率提升非常明显。

其它编辑器：

编辑器	方案
VS Code	装 `PicGo` 插件，或直接用 PicGo-Core + `vscode-picgo`
Obsidian	装 `Image auto upload` 插件
命令行	`npm install picgo -g`，然后 `picgo upload a.png`

八、上传前先压缩

GitHub 仓库建议控制在 1GB 以内，图片累积起来很快。上传前压一下：

工具	用法
TinyPNG	拖拽压缩，免费每月 500 张
Squoosh	在线转 WebP，可实时对比
PicGo 插件 `picgo-plugin-compress`	上传时自动压缩（在插件设置里搜）

截图建议存 PNG（文字清晰），照片一律转 WebP（体积小 30% 以上）。一张 2MB 的图，博客里加载会明显卡顿。

九、常见问题

图片上传失败

现象	原因	解法
`404` / 权限错误	Token 没勾 `repo` 或已过期	重新生成 Token
仓库不存在	仓库名格式写错	写成 `用户名/仓库名`
分支错误	填了 master 但实际是 main	去仓库确认分支名
网络超时	GitHub 访问不畅	检查网络，或给 PicGo 配代理