托管在GitHub上的Hexo博客的图片解决方案（本博客用到的第三个因为图片量小）

每次执行 hexo clean 后图片就消失？这篇文章将彻底解决你的困扰

问题背景

很多使用Hexo+Github Pages搭建博客的同学都遇到过这样的困扰：当执行 hexo clean && hexo generate && hexo deploy 后，辛苦上传到GitHub仓库的图片就神秘消失了。这背后的根本原因是 hexo clean 会删除整个 public 文件夹，而 hexo generate 生成站点时，可能没有正确地将本地图片资源复制到最终发布的静态文件中。

经过实践，我总结出了三种可靠的解决方案，下面通过对比表格帮你快速了解每种方案的特点。

图片管理方案对比

方案一：使用Hexo的”资源文件夹”（推荐用于本地管理）

这是Hexo官方推荐的方法，能够实现图片与文章的关联管理，适合长期维护的博客。

实施步骤

1. 启用资源文件夹功能

   打开博客根目录下的 _config.yml 文件，修改配置：

   yaml

   1	post_asset_folder: true

   启用后，使用 hexo new "文章标题" 创建新文章时，Hexo会自动在 _posts 文件夹内生成一个同名的文件夹，专门用于存放该文章的图片。

2. 安装路径转换插件

   为确保图片路径正确转换，建议安装可靠的插件：

   bash

   1 2 3 4

   # 如果之前安装过旧版插件，先卸载 npm uninstall hexo-asset-image # 安装新版插件 npm install hexo-asset-img --save

3. 组织图片并正确引用

   • 将图片放入对应的文章文件夹中

   • 在Markdown文章中使用相对路径引用：

     markdown

     1	

   • 实际示例：

     markdown

     1	

适用场景

• 图片数量较多的技术博客
• 计划长期维护和更新的博客
• 希望保持所有资源本地化的用户

方案二：使用CDN图床（强烈推荐）

这种方法能彻底摆脱本地路径问题，特别适合在多设备间写作和维护博客。

实施步骤

1. 选择图床服务

   • 免费选择：SM.MS、Imgur、Gitee+jsDelivr CDN
   • 付费选择：阿里云OSS、腾讯云COS、七牛云存储（费用很低，通常几元/月）

2. 上传图片并获取链接
   将图片上传到图床后，你会获得一个以 https:// 开头的公网URL。

3. 在文章中引用

   markdown

   1	

4. 处理防盗链问题（如需要）
   在某些情况下，可能需要在文章的Front-matter中加入：

   yaml

   1 2 3 4 5

   --- title: 你的文章标题 meta: referrer: no-referrer ---

推荐工具

• PicGo：一个优秀的图床上传工具，支持多种图床服务
• VS Code插件：如 Paste Image 等，支持直接粘贴图片并上传

适用场景

• 在多台设备上写作的用户
• 追求博客加载速度的用户
• 希望简化部署流程的用户

方案三：规范地使用source目录

这是一种简单直接的方法，适合图片数量较少或临时使用的场景。

实施步骤

1. 创建图片目录
   在Hexo博客的 source 文件夹内创建专门存放图片的文件夹：

   text

   1 2 3 4 5

   source/ └── images/ ├── 2024/ ├── posts/ └── assets/

2. 存放图片
   将所有图片按分类放入 source/images/ 目录下的相应子文件夹。

3. 正确引用图片
   在文章中使用绝对路径引用：

   markdown

   1	

最佳实践建议

• 建立有意义的目录结构，按年份/月份组织
• 使用描述性的文件名，避免使用泛名如 image1.jpg
• 定期清理不再使用的图片

适用场景

• 图片数量很少的博客（< 20张）
• 临时项目或演示
• 不打算长期维护的个人记录

总结与建议

经过对比分析，我的推荐顺序如下：

1. 首选方案二（CDN图床）：特别是对于在多设备上写作或追求性能的用户，这是最省心的选择。
2. 次选方案一（资源文件夹）：如果你坚持本地化管理，这是最规范、最可持续的方法。
3. 谨慎选择方案三：虽然简单，但随着内容增长可能带来管理上的挑战。

迁移建议

无论选择哪种方案，迁移现有内容时请注意：

1. 批量处理：可以使用脚本或搜索替换功能批量更新现有文章中的图片链接
2. 逐步迁移：不必一次性迁移所有图片，可以从新文章开始采用新方案
3. 测试验证：迁移后务必在本地测试图片显示是否正常

最终提醒

选定方案后，请在所有文章中保持统一。混合使用多种方案会增加维护复杂度。每次更改图片管理方式后，记得执行 hexo clean && hexo generate && hexo deploy 确保更改生效。