Hexo博客图片管理最佳实践-本地+图床

前言

我们在进行 markdown 写作的时候，通常会在文章中插入图片，而 markdown 的图片管理也是很烦人的事情。另外加上 hexo 的一些特性，导致图片本地预览和线上发布不一致，网上也有不少用插件来解决的方法，比如hexo-asset-img。但是我觉得网上的大多数实践还不够完美，下面我就给出我自己的解决方案。

需求分析

1. 本地预览：在本地预览的时候，图片应该是可以直接显示的。
2. 线上预览：在发布到线上的版本应该使用便于共享的图床链接，这样可以很快捷的在另外的平台上发布，并且我不希望自己的静态网站中有大量的图片文件。
3. 本地存储：我希望本地的图片文件可以被备份，而不是全部放在图床上，万一图床挂了就麻烦了。

现在网上的解决方案大致分为两类

1. 插件派：
   • 通过使用_config.yml 文件中的附件文件夹，即post_asset_folder: true以及 hexo-asset-img 插件来实现本地预览和线上发布的分离。
   • 但是没有解决三方平台共享的问题并且使静态网站过于臃肿。
2. 图床派：
   • 通过使用各类图床把图片直接上传
   • 本地没有备份，容易丢失

我还有一大痛点，就是 post_asset_folder 生成的文件夹名称应该是会和文章题目一样，但是我由于进行了永久链接的修改所以在生成文件夹的时候会以 abbrlink 作为文件夹名称，这样就会导致文件夹名称和文章内链接名称不一致，导致线上发布时无法预览

解决方案

把 post_asset_folder 仅仅当成本地的文件分类，不使用任何插件。
在 source/文件夹下建立一个_backup/文件夹，用来进行备份

具体写作流程：

1. hexo new title # 创建文章，并且同时创建同名文件夹
2. 把文章拖到文件夹中
3. 若使用 typora，在 typora 内设置图片默认存放路径为./${filename}；若直接使用 vscode，直接粘贴图片，图片会和文章同名文件夹在同一目录下，等写作完毕了直接把文章拖出去就行了，图片路径会自动变化的

具体发布流程：

1. 定期直接把整个_posts 文件夹下的文件夹拖到_backup/文件夹下进行备份
2. 回到_posts/文件夹下面的文章，选择在 typora 中打开，在 typora 中选择上传所有图片到图床（具体图床配置网上很多，我是 GitHub + jsdelivr），文章中的图片链接会自动替换为图床链接
3. 删除_posts/下的图片文件夹
4. hexo g && hexo d
5. 访问线上博客，检查图片是否正常显示