第一篇-Github+PicGo图床配置指南：Hexo 博客写作的高效插图解决方案

✨ 写在前面

在 Hexo 写博客的过程中，图片插入如果仍依赖本地相对路径，容易导致部署后图片加载失败、目录混乱、跨设备不可预览等问题。为此，我尝试配置图床方案，并最终选用了 GitHub + PicGo 的组合，实现了“一键上传 + 自动复制链接 + Markdown 即用”的高效流程。

🚀 整体效果演示

alt text

---

❌ 为什么不选 Gitee？

虽然 Gitee 配合 PicGo 上传体验不错，但它存在一个严重限制：

Gitee 禁止外链加载图片，尤其是当你的博客部署在 GitHub Pages、Netlify、Vercel 等平台时，Gitee 会因 Referer 限制导致图片加载失败。

具体表现为：

  • 在 VSCode / Typora 中预览一切正常
  • hexo g && hexo d 后部署到线上博客，图片全部无法显示（403 错误），如下图对比所示：
VScode预览 博客实际运行
alt text alt text

因此我放弃 Gitee 图床，转向更开放的 GitHub 图床，完美解决兼容性问题。

🧰 准备工作

✅ 所需工具：

  • PicGo：图片上传工具

alt text

  • GitHub 账号（用于创建图床仓库）

🧱 步骤一：GitHub 仓库准备

  1. 登录 https://github.com
  2. 创建一个公开仓库（建议单独为图床使用），如 Blog-Image，注意这里一定要勾选仓库属性为 Public，否则会导致外部软件调用图片网址无法访问的情况：

alt text

  1. 无需建文件夹，PicGo 会自动上传图片到根目录或指定子目录

🔐 步骤二：生成 GitHub Token

  1. 打开 GitHub Token 页面

alt text

  1. 点击「Generate new token」 → 选择 classic
  2. 权限勾选：
    • Note任意命名即可，是你的秘钥名称，这里建议为Image，方便管理
    • repo（完全控制仓库）

alt text

  1. 创建后复制该 Token，后续 PicGo 配置中使用

⚙️ 步骤三：配置 PicGo 图床（GitHub）

  1. 打开 PicGo → 图床设置 → GitHub 图床：

alt text

  1. 点击右上角的编辑键进入配置页面，填入以下内容：

alt text

字段 示例值
图床名称 博客图床
仓库名 your-username/blog-images
分支名 main 或 master，看你的仓库设置
Token 填入 GitHub 生成的 Token
存储路径（可选） img/（上传到该目录）
自定义域名 https://cdn.jsdelivr.net/gh/your-username/your-reponame

✅ 配置后测试上传，成功会自动复制如下链接：

⚠️ 注意：这里自定义域名前缀 https://cdn.jsdelivr.net/gh/ 实则是挂载了 CDN 加速，使用 CDN 中转 Github 图片链接（曲线救国）这样后续使用时，不用魔法上网也可以访问图片，这只适用于GitHub 仓库镜像，Gitee 不被 jsDelivr 支持镜像，这也是我们不使用 Gitee的原因。因为笔者最开始使用的是 Gitee 配置的，导致出现一堆问题，这里索性重新撰写一篇 Github+PicGo搭建图床的教程博客。

1
https://cdn.jsdelivr.net/gh/BIT-Penry/Blog-Image/20250504174255342.png

可直接在博客中插入使用！

🔧 步骤四：设置 PicGo 复制为 URL/HTML/MARKDOWN等

  1. 打开 PicGo 的 【相册】部分，点击上部分的∇\nabla展开如下：

alt text

  1. 最左侧选择显示的图床，这里只勾选 Github 即可；

  2. 右侧选择图片复制的链接格式，这里我选择的是URL，当我成功上传图片至图床后，会自动在粘贴板上添加对应图片的URL，格式如下：

1
https://cdn.jsdelivr.net/gh/BIT-Penry/Blog-Image/20250504180106146.png

🧩 步骤五：设置粘贴快捷键

📝 准备插件：quick-capture

  • 在 PicGo 软件右侧找到 插件设置 ，搜索并安装插件 quick-capture：

alt text

📝 PicGo设置

  • 在 PicGo软件右侧找到 PicGo设置 ，找到 设置快捷键：

alt text

  • 对 快速截图并上传 的快捷键进行设置，这里推荐使用 Ctrl+Alt+X：

alt text

🧪 示例 Markdown 引用

1
![](https://cdn.jsdelivr.net/gh/BIT-Penry/Blog-Image/20250504180106146.png)

或配合 HTML 控制样式：

1
2
3
<p align="center">
  <img src="https://cdn.jsdelivr.net/gh/BIT-Penry/Blog-Image/20250504180106146.png" alt="alt text" width="70%" height="height">
</p>

🧩 进阶补充

  • 可在 VSCode 中配合插件 PicGo + 快捷键实现一键上传
  • 图片可复用于知乎、CSDN、公众号等平台

✅ 总结：GitHub 图床的优势

对比项 GitHub 图床 Gitee 图床
是否支持外链 ✅ 支持完全外链 ❌ 会被禁止加载
是否能用在博客 ✅ 完全兼容 Hexo ❌ 无法在部署后显示图片
配置体验 ✅ PicGo 插件直接支持 ✅ 但链接易挂掉
可访问性 ✅ 高 ⚠️ Gitee 国内访问快，但限制多

如果你也在为博客插图而烦恼，试试 GitHub + PicGo 的组合，一次配置，长期高效。