文章已经能打开，配图却不见了。我先在生成的 HTML 里找到图片地址，再去核对浏览器实际请求的位置。原来页面在文章目录里找图，文件却生成在站点的图片目录。顺着 Markdown、HTML 和浏览器这三处往回查，也能看出首页明明列出了文章，旧链接为什么还会返回 404。
写作与页面之间
刚接触静态博客时，我把 Markdown 文件理解成网页本身。后来才发现，文件更像原料：标题、时间、分类和正文先被读取，模板决定它们放在哪里，样式表再负责外观。
理解这条路径之后，排查问题就容易许多。标题写错，回到文章；所有文章都错位，检查模板或样式；本地正常而线上异常，再看路径、缓存和发布产物。不要一开始就删掉所有东西重新安装。
从源文件检查到输出目录
- 在源文件里写作，确认日期和永久链接。
- 本地预览，检查正文而不只看首页。
- 生成静态文件，查看错误和资源路径。
- 确认产物之后，再单独决定是否发布。
生成与发布是两件事。下面的命令只生成页面：
1 | npx hexo generate |
我不会把发布接在这个命令后面。这样即使只改一处标点，也能放心做一次本地检查。
图片路径最容易被忽略
以斜杠开头的图片路径从域名根目录解析，普通相对路径则从当前页面所在目录解析。站点部署在子目录时，也要确认资源地址带上正确的站点前缀。文章一旦进入多级路径，原本正确的相对地址就可能失效。我给图片使用统一目录，并在文章页、第二页列表中各打开一次。
本地图片不会因为图床调整而留下空白，代价是需要控制尺寸。原图留在相册，网站只放适合屏幕阅读的版本；简单几何图形用 SVG，照片则控制分辨率和压缩质量。
从生成结果追一张丢失的图片
假设文章在 /posts/field-notes/，Markdown 里写的是 。我先打开生成目录里的文章 HTML，找到图片的 src。如果输出里仍是 images/covers/river-weaver.jpg，浏览器会从文章目录请求 /posts/field-notes/images/covers/river-weaver.jpg。然而文件如果放在 source/images/covers/，正常生成后的对应位置是 public/images/covers/。
用实际请求确认猜测
直接在预览站打开图片地址。如果 /images/covers/river-weaver.jpg 能打开，而文章页面请求的地址返回 404，问题就在链接解析。对于部署在域名根目录的博客，可以改用从根目录开始的路径。部署在子目录时，应同时看生成结果和站点前缀，避免把图片请求发到域名根目录。
如果正确地址也返回 404，再回到文件本身：核对扩展名、文件名大小写，并确认它已经出现在输出目录。某些本地文件系统对大小写不敏感，River-Weaver.jpg 与 covers/river-weaver.jpg 在本地可能都能访问，上线后则可能只有一个有效。
首页有新文章，旧链接却打不开
我会先对比首页文章链接和过去分享出去的地址，再查看输出目录里是否还存在旧路径。迁移时改动文件名或永久链接规则，都可能改变生成地址，具体取决于站点配置。如果旧地址被书签或其他文章引用，优先保留它，或在有重定向能力的托管环境里安排迁移。改完后，我会分别打开新链接和那条旧链接。
一张够用的检查表
| 阶段 | 要确认的事 |
|---|---|
| 文章 | 标题、日期、摘要与正文相符 |
| 页面 | 导航可返回，目录指向对应章节 |
| 资源 | 图片正常加载，代码不撑破手机宽度 |
| 产物 | 不含草稿、临时文件与本机路径 |
这张表不会让网站永远不出错。它只是把一次模糊的“好像可以了”，变成几个能逐一回答的小问题。对一个下班后维护的个人博客来说，这已经节省了不少心力。