使用 GitHub 作为图床：PicGo + Typora 自动上传完整教程

title: 使用 GitHub 作为图床：PicGo + Typora 自动上传完整教程（详细版）

date: 2026-09-15 15:10:00

updated: 2026-09-15 15:45:00

tags:

GitHub
图床
PicGo
Typora
jsDelivr
Hexo
教程
categories:
技术教程
工具配置
description: 手把手详细讲解如何用 GitHub 仓库 + jsDelivr CDN 搭建免费图床，配合 PicGo 与 Typora 实现写作时图片自动上传，并支持按日期/文章名自动归档。

1. 图床是什么（为什么需要它）

图床，顾名思义就是「存放图片的服务器」，更准确地说：是一台能让别人通过公网 URL 直接访问和下载你图片的服务器。

1.1 为什么我们会需要图床

我们平时写的笔记，比如用 Typora 写的 Markdown，里面的图片默认都保存在本地硬盘 。例如一篇笔记 note.md 引用了 ./images/1.png，这个 1.png 就在你电脑的某个文件夹里。

当你想把这篇笔记发给别人、或者发布到博客/知乎/CSDN 等平台时，会遇到两个问题：

图片要跟着走 ：你不能只发 .md 文件，还得把 images/ 文件夹一起打包发出去，而且对方解压后的路径还得和你笔记里写的相对路径一致，否则图片就显示成裂开的图标。
换设备/平台就丢失：你在 A 电脑写的笔记，到 B 电脑上没有那张图，就白写了。

1.2 解决办法

把图片放到互联网上 ------只要别人能通过一个网址（比如 https://xxx/1.png）打开图片，那么无论你把笔记发到哪里、用什么设备打开，图片都能正常显示。

这种「别人也能访问到图片」的服务器，就叫图床。

1.3 为什么选 GitHub 做图床

市面上有不少免费图床（如 SM.MS、路过图床等），但大多有容量、流量或稳定性的隐忧。用 GitHub 自建图床的优势是：

免费：公开仓库不花钱；
稳定：GitHub 不会轻易关停，比小图床靠谱；
可控：图片完全在自己仓库里，随时迁移；
CDN 加速：配合 jsDelivr，全球（含国内）都能较快访问。

注意点：GitHub 单仓库有软容量限制（建议别上 G 级大仓），单张图片建议控制在 50MB 以内 ；且仓库必须 Public。

2. 用 GitHub 创建图床服务器

这一步的目标是在 GitHub 上准备一个用来存图的仓库，并拿到一个能写仓库的「令牌（Token）」。

2.1 步骤一：新建仓库

登录 GitHub，点击右上角头像旁边的 + 号，选择 New repository（新建仓库）。
Repository name（仓库名） ：取一个好记的名字，建议全小写、无空格，例如 image-bed 或 YuanzPic。
Description（描述）：可填可不填，例如「我的图床」。
Public / Private ：必须选 Public（公开）。原因见 1.3 节------jsDelivr 只加速公开仓库，私有仓库的图片通过 CDN 是取不到的。
可选：勾选 Add a README file，方便日后备注。
点击 Create repository 创建。

2.2 步骤二：生成 Personal Access Token（令牌）

PicGo 要往你的仓库上传图片，必须用一个有写入权限的凭证。GitHub 现在推荐用 Personal access tokens（个人访问令牌） 代替账号密码。

点击右上角头像 → Settings（设置）。
左侧最下方找到 Developer settings（开发者设置）。
选择 Personal access tokens → Tokens (classic)（经典令牌）。
点击 Generate new token → Generate new token (classic)。
Note（备注） ：填写用途，例如 picgo-image-bed，方便日后识别。
Expiration（有效期）：可按需选择，例如 90 天，或 No expiration（永不过期，注意安全风险）。
Select scopes（权限范围） ：勾选 repo （它下面所有子项会自动全选）。repo 表示对该仓库有完全的读写权限，PicGo 上传/更新图片正是需要它。

新版 GitHub 还提供 Fine-grained tokens（细粒度令牌），只要给某个仓库的 Contents 读写权限也能用，但配置更繁琐，新手建议直接用 classic。
拉到底部点击 Generate token。
生成后页面会显示一串 ghp_xxx 开头的字符串------立刻复制保存。

⚠️ 务必把令牌保存到安全的地方 （如密码管理器）。这个页面一旦关闭，令牌就再也看不到了；如果泄露，请立刻到 Tokens 页面 Revoke（撤销） 它。

2.3 步骤三（可选）：创建 img 分支和 img 文件夹

为了把「图片」和「代码」分开管理，也为了避免污染主分支，我们单独用一个 img 分支来存图。

进入仓库页面，点击左上角分支下拉框（默认显示 main 或 master）。
在输入框里输入 img，回车后选择 Create branch: img（创建分支）。
切换到 img 分支后，在该分支下新建一个 img/ 文件夹。

小提示：GitHub 网页端不能直接建「空文件夹」，需要放一个文件进去（例如 img/.gitkeep 或随便上传一张占位图），文件夹才会真正存在。后续图片都由 PicGo 自动上传，所以这个文件夹只是作为默认路径。

2.4 下载 PicGo

PicGo 是一款开源的图片上传工具，支持多种图床。我们选它作为上传客户端。

下载地址：Releases · Molunerfinn/PicGo

按系统选择安装包（Windows 选 .exe），一路下一步安装即可。

3. 使用 PicGo 软件上传图片

3.1 基本使用

打开 PicGo，主界面左侧可以拖拽图片 或粘贴剪贴板截图直接上传。上传成功后，图片会进入「相册」，同时自动把图片链接复制到剪贴板。

但默认上传目标是 PicGo 内置的图床，我们需要把它指向我们刚建好的 GitHub 仓库。

3.2 配置 GitHub 图床

打开 PicGo → 图床设置 → GitHub 图床，逐项填写：

配置项	填什么	说明
设定仓库名	`用户名/仓库名`	例如 `yuanzhang788/YuanzPic`
设定分支名	分支名	例如 `img`
设定 Token	刚才复制的令牌	以 `ghp_` 开头
设定存储路径	`img/`	见下方警告，结尾必须带 `/`
设定自定义域名	`https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名`	见下方说明

填好后，点击「确定」，并在图床列表把 GitHub 设为默认图床。

⚠️ 存储路径只支持静态字符串 ，例如 img/。不要填 img/{year}/{month}/{day} 这类占位符------PicGo 不会解析变量，会原样建出一个叫 {year} 的文件夹。按日期归档请看下一节。
💡 自定义域名为什么要带 @分支名 ：jsDelivr 默认从仓库的默认分支 （通常是 main）取文件。如果你的图片在 img 分支上，必须写成 https://cdn.jsdelivr.net/gh/用户名/仓库名@img，否则会 404。两个可用的 CDN 前缀：

https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名

https://fastly.jsdelivr.net/gh/用户名/仓库名@分支名

3.3 进阶：按日期 / 文章名自动归档

问题

上面配置完后，所有图片都会平铺在 img/ 根目录下。图片一多（几百张）就会很乱，想删某篇文章的图也难找。我们希望像这样自动分目录：

复制代码

img/2026/09/15/xxxx-截图.png

根因

PicGo 内置的「存储路径」字段不支持动态变量 ，只能写死。要实现「按日期生成文件夹」，必须借助重命名插件 picgo-plugin-rename-file。

安装与配置

第 1 步：安装插件。 打开 PicGo → 左侧「插件」 ，在搜索框输入 rename-file，找到 rename-file （说明为 A PicGo plugin for customizing file name，作者 liuwave），点击卡片右下角的下载图标安装。右侧详情页会给出官方示例，形如：

复制代码

2026/07/24/674d96a92fac527a8332ac4adc89a14-fileName-fa2c97-19-44-17.png

装好后卡片右侧会出现「已安装」标记，可点右上角的开关确认插件处于启用状态。

第 2 步：打开插件配置。 安装完成后，插件卡片右侧会出现一个齿轮 ⚙ 图标 ，点它，在弹出菜单中选择 「配置 plugin: picgo-plugin-rename-file」（注意是下面那条「配置」，不是「启用插件」）。

第 3 步：填写路径格式。 在弹出的 Config 标签页里，找到 「文件(路径)格式」 输入框，填入（注意是单字母 变量 {y}/{m}/{d}，不是 {year}）：

复制代码

img/{y}/{m}/{d}/{hash}-{origin}

官方示例为 fix-dir/{localFolder:2}/{y}/{m}/{d}/{h}-{i}-{s}-{hash}-{origin}-{rand:5}，可作为参考。填好后点右侧的 「确定」 保存（页面上方提示「修改配置参数后生效」，按提示重启 PicGo 即可）。

第 4 步（重要）：清空内置存储路径。 回到「图床设置 → GitHub 图床」，把第 3.2 节的**「设定存储路径」清空**（留空）。否则会和插件模板叠加成 img/img/2026/...。

变量含义表

变量	含义	示例
`{y}`	年（4 位）	2026
`{m}`	月（2 位）	09
`{d}`	日（2 位）	15
`{h}` / `{i}` / `{s}`	时 / 分 / 秒	21 / 40 / 31
`{hash}`	文件 MD5（32 位）	36921a9c...
`{origin}`	原文件名（不含后缀）	screenshot
`{rand:n}`	n 位随机串（默认 6）	fa2c97
`{localFolder:n}`	本地图片上级目录名（n 层）	文章名目录

常用模板

按日期（推荐）：img/{y}/{m}/{d}/{hash}-{origin}
按文章名（图片先放进以文章名命名的本地文件夹）：img/{localFolder:1}/{hash}-{origin}
干净无空格/中文：img/{y}/{m}/{d}/{hash}
精确到秒：img/{y}/{m}/{d}/{h}{i}{s}-{hash}

如果插件配置界面找不到，也可以直接改配置文件 %APPDATA%\picgo\data.json（Windows）或 ~/.picgo/config.json（macOS/Linux），加入：
json 复制代码
"picgo-plugin-rename-file": {
  "format": "img/{y}/{m}/{d}/{hash}-{origin}"
}
然后重启 PicGo。

3.4 上传测试

拖一张图片到 PicGo 主窗口，或按 Ctrl+V 粘贴截图。上传成功后：

PicGo 相册里会出现这张图；
剪贴板里是被替换成 CDN 的 Markdown 链接，形如 https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/img/2026/09/15/xxxx-截图.png；
打开这个链接，能正常显示图片即代表配置成功。

从上图可以看到：图片已经按 img/2026/09/15/ 的目录结构自动归档（红框内 imgimg 即「分支名 img + 目录名 img」连在一起显示），文件名形如：

复制代码

60f91a483fd6ff50d6efb40bf252ffa8-截图 2026-09-08 111306.png

即 {hash}-{origin} 的格式（32 位 MD5 + 原文件名），提交信息为 Upload by PicGo，说明 rename-file 插件已生效。这也印证了前面那句：自定义域名必须带上 @img，否则 jsDelivr 会去默认分支找图而 404。

4. Typora 实现写作时自动上传

前面都是手动上传。配合 Typora，可以实现「写作时粘贴截图 → 自动上传到 GitHub → 笔记里直接变成 CDN 链接」，彻底告别本地图片管理。

4.1 配置 Typora

打开 Typora → 偏好设置 → 图像（部分版本叫「图像」选项卡）。
插入图片时... ：选择 上传图片。
勾选 对本地位置的图片应用上述规则。
上传服务 ：选择 PicGo (app)。
PicGo 路径 ：填写你电脑上 PicGo 可执行文件的完整路径，例如：
复制代码
```
C:\Users\你的用户名\AppData\Local\Programs\PicGo\PicGo.exe
```
（可在开始菜单右键 PicGo → 打开文件所在位置来复制路径）

4.2 验证自动上传

写笔记时，直接 Ctrl+V 粘贴截图，Typora 会自动调用 PicGo 把它上传到 GitHub，并把图片地址替换成 CDN 链接。
也可以对已存在的本地图片，右键 → 上传图片，批量上传。
上传成功后，把笔记整体发给别人或发布到博客，图片都不会再丢失。

5. 小结与注意事项

至此，一套完全免费、稳定、可控的图床就搭建完成了：

GitHub 公开仓库负责存图；
jsDelivr CDN负责全球加速访问；
PicGo + rename-file 插件负责上传并按日期/文章名归档；
Typora负责写作时图片自动同步。

注意事项

仓库必须 Public，否则 jsDelivr 无法加速。
Token 拥有仓库写入权，切勿泄露，也不要提交进代码或公开分享；泄露立即 Revoke。
图片在非默认分支 时，自定义域名一定要带 @分支名。
原生「存储路径」不支持变量 ，按日期归档必须用 rename-file 插件的 format 字段，且本体存储路径要清空。
单张图片建议 < 50MB；仓库别堆太大，必要时新建仓库或定期清理。
jsDelivr 有缓存，刚上传的图片若访问异常，稍等几分钟或加 ?v=时间戳 绕过缓存。

这样，无论是写 Hexo 博客还是日常笔记，图片都能一键上云、自动归档，再也不用担心「文档发出去图片却丢了」。