从 Hexo 折腾到 Hugo 又换了台电脑，我花一个周末把博客图片这摊事理顺了

上个周末我干了一件「看起来半小时、实际耗掉两天」的事：把用了好几年的 Hexo 博客迁到 Hugo，同时把写作环境整个搬到一台新电脑上。

文字部分顺利得超乎想象，仓库一拉、Hugo 一跑，文章全在。我还美滋滋地以为收工了，结果一点开页面，图片给我上了一课——它们不是齐刷刷一起裂，而是这篇裂那张、那篇裂这张，本地好的线上裂，新机器上更是缺东少西。整个周末一半的时间，我都在跟这些图片较劲。

把这个折腾过程记下来，算是给自己留个档，也给打算换框架、换机器的朋友提个醒。

一、第一波打击：同一次迁移，图裂得五花八门

我一开始是懵的，因为裂法完全没有规律。后来硬着头皮一张张看，才勉强分出几种情况：

有的文章线上图片全军覆没，一张都不剩；有的是老文章裂、新文章好好的；还有的特别诡异，在我旧电脑上预览一切正常，推上去用新电脑一拉就缺图；最烦的是个别图在本地死活复现不了，一到 CI 就偶发 404。

那时候我还没意识到，这几种裂法压根是四个不同的毛病。我对着一张裂图改半天路径，这张好了，另一种病因的图又冒出来，按下葫芦浮起瓢。

二、折腾半天才发现：两个框架「图放哪」根本不是一回事

真正的转折点，是我停下来去看 Hexo 和 Hugo 到底怎么组织图片。这一看才明白，我之前想当然了。

Hexo 那边，我一直用的是资源文件夹：开一个选项，每篇文章旁边配一个同名文件夹，图扔里头，文章按相对路径引。它讲究的是「文章和同名目录并排躺着」。

Hugo 完全是另一套，叫 Page Bundle：文章本身是一个目录，正文和图片都在这个 Bundle 里，图是页面的「资源」。我图省事，把 Hexo 那堆「文章 + 同名文件夹」原样拷过去就想跑，结果 Hugo 压根没按我想的方式认这些图，构建出来的路径自然全是错的。再加上域名、固定链接规则两边也不一样，老文章里那些写死的相对路径就跟着集体翻车。

说白了，这口锅不在图，在我没搞懂两个框架对图片的「约定」不一样。

三、换电脑又补一刀：有些图，其实从来没进过仓库

框架的坑还没填完，新电脑又给我补了一刀。

好几张图我在旧机器上明明看着好好的，新电脑拉下来的仓库里却怎么都找不到。我抱着怀疑去查 Git，结果一查心凉半截：这些图压根就没被提交过，要么是当年被忽略规则误伤，要么是它们只存在于旧电脑的某个角落，我误以为早就进仓库了。旧机器上是靠本地缓存「假装正常」，一换新环境立刻现原形。

至于那几张 CI 上偶发 404、本地怎么都复现不了的，最后也破了案：是文件名大小写。我这台 Mac 的文件系统对大小写不敏感，Screen.PNG 和 screen.png 它当同一个东西，可 CI 是 Linux，认死理，找不到就是找不到。

四、想通的那一刻：我一直在替「框架和图绑死」还债

折腾到周六晚上，我反而冷静下来了，开始想一个更根本的问题：为什么换个框架、换台电脑，图片能把我折磨成这样？

答案挺简单——我一直把图片文件和博客框架死死绑在一起。 图片放哪、路径怎么写，全看框架的目录约定，框架一换，这堆路径就得整体重排；电脑一换，没进仓库的图还得重新找。只要这个绑法不变，以后我再从 Hugo 换到别的东西，今天的苦还得再吃一遍。

想通这点，我就不满足于「把这几张图修好」了，我想让图片从框架里独立出来：正文里只存一个链接，图本身放在外面。这样以后再怎么换框架、换电脑，文章里的链接一个字都不用动。

五、我是怎么把这摊事理顺的

方向定了，剩下的就是动手，我把新图和老图分开处理，整个过程顺了很多：

• 以后的新图，一律走外链。 写东西时截完图直接往图床页面上一贴，链接自动给我，我复制进正文就行，图既不存进博客仓库，也不依赖任何框架目录。
• 历史老图，批量搬而不是手动传。 我先把文章里的旧图链接都抽出来，交给服务端一条条抓过去转存，拿到一张「旧地址对新地址」的对照表，再照着表批量替换回文章，替换了几处我都数着，生怕漏改或误改。
• 顺手治了重名和改版的毛病。 我博客里的截图一大半都叫 image.png，新地方用多级目录加随机路径，免得它们挤在一起同名打架；至于那些会反复改的示意图，覆盖上传后链接不变，我也不用再回文章里换地址。

这套活儿我是搁在图床小镇上干的，说不上多讲究，就是它页面直接粘贴、老链接批量抓取转存、还有同名覆盖这几样正好都能接住我的需求，省得我自己去折腾对象存储和分发那一套。当然这纯粹是我个人图省事，爱折腾的自己搭对象存储、再套层 CDN，一样能达到目的，甚至更可控，大家按自己的时间精力来就好，不必照抄我的选择。

六、折腾完的一点心得

那个周末结束，博客总算在新框架、新电脑上安安稳稳跑起来了，新老文章的图也都正常。回头看，我最大的收获其实不是「学会了 Hugo」，而是想明白一件事：图片源应该是独立的，不该跟某个写作框架、某台电脑绑在一起。 把这层关系解开，迁移才真正算一劳永逸。

之前我也写过两篇相关的，一篇聊博客配图为什么总爱「裂」，另一篇讲多平台发文时怎么让图片只传一次，跟这次「图源解耦」的思路是一脉相承的，有兴趣可以翻翻看。

如果你也正打算给博客换框架、或者换新机器，听我一句劝：别光顾着搬文字，提前把图片这摊事按「独立图源」的思路理顺，能帮你省下一整个周末。

官网：https://imgbed.cn