记录学习与折腾的过程https://cloudwing.top/Firefly6.16.8https://github.com/CuteLeaf/Firefly2026年10月1日 16:31:26https://cloudwing.top/posts/2026-09-30-ai-assisted-blog-retrospective/https://cloudwing.top/posts/2026-09-30-ai-assisted-blog-retrospective/精炼合并十二篇站点日志，复盘借助 AI 从零搭建个人博客的经历、踩过的坑与教训。Wed, 30 Sep 2026 00:00:00 GMT<p>这个博客从 2025 年 12 月第一版上线，到 2026 年 9 月底把「作品站」改造成「博客归档」，前后十个月的迭代，绝大部分代码都是在 AI 辅助下写出来的。趁这次整理，把散落在各篇日志里的经历、雷点和教训收拢成一篇文章。</p> <section><h2>经历：一条从「作品站」到「博客」的路<a href="#经历一条从作品站到博客的路"><span>#</span></a></h2><ul> <li><strong>2025-12 起步</strong>：第一版只有首页、画廊、关于三块，Astro 纯静态输出，接 Cloudflare Pages，暗色玻璃基调定下来；紧接着配了一套基于 Chrome DevTools Protocol 的回归测试。</li> <li><strong>2026 上半年</strong>：平稳迭代，把 Cloudflare Pages 自动构建踩过的坑记了下来（见下）。</li> <li><strong>2026-09 密集迭代</strong>：分类筛选、图片瘦身、首页接真实数据、动效 / SEO / RSS、三栏侧栏、一次三十来处的大改版、导航与强调色预设……</li> <li><strong>方向修正</strong>：最初定位是「作品档案」，写着写着发现真正持续在产出的是文字。9 月 19 日把作品库下线，改成按年归档的博客，旧文章继续留在时间线里。</li> </ul><p>现在这个站长这样——首页是「hero 壁纸 + 三栏布局」，左栏个人资料、中栏文章流、右栏动态时间线：</p><p></p><figure><img src="/posts/screenshots/home.png" alt="博客首页三栏布局" /><figcaption>博客首页三栏布局</figcaption></figure><p></p><p>文章详情页是核心阅读场景，标题、日期、标签和正文沿用主题的卡片式容器：</p><p></p><figure><img src="/posts/screenshots/post.png" alt="文章详情页" /><figcaption>文章详情页</figcaption></figure><p></p><p>「作品」并没有完全消失，复刻的 RhineLab 三维终端作为第一个「复刻」项目收进了项目页：</p><p></p><figure><img src="/posts/screenshots/projects.png" alt="项目页与复刻项目" /><figcaption>项目页与复刻项目</figcaption></figure><p></p><p>日记是最近新增的独立模块，挂在「文章」导航下：</p><p></p><figure><img src="/posts/screenshots/diary.png" alt="日记列表页" /><figcaption>日记列表页</figcaption></figure><p></p></section> <section><h2>雷点：AI 快速踩过、又补回来的坑<a href="#雷点ai-快速踩过又补回来的坑"><span>#</span></a></h2><p><strong>构建与部署</strong></p><ul> <li>lockfile 平台依赖：Windows 生成的 lock 缺平台可选依赖，云端 Linux <code>npm ci</code> 报 <code>Missing @emnapi/*</code>；解法是 lock 不提交、走 <code>npm install</code>。</li> <li>浮动版本：<code>react</code> 解到 19.3 撞上 <code>&gt;=19 &lt;19.3</code> 的 peer 区间，构建期 ERESOLVE；锁 19.2.8 + legacy-peer-deps。</li> <li>「推送成功但线上没变」：判断上线别比对 chunk 哈希（本地与云端依赖解析差异会让哈希不同），要把这次改动的内容特征拿到线上搜。</li> </ul><p><strong>资源与网络</strong></p><ul> <li>180MB PNG 转 webp，压到 3MB 出头。</li> <li>jsDelivr 国内不稳，图床换回本地相对路径。</li> <li>MiSans 字体外链上游 404，从未生效却一直阻塞渲染，删掉。</li> </ul><p><strong>前端交互</strong></p><ul> <li>软导航后汉堡菜单失效：监听器没跟着 DOM 重建，改 document 级事件委托。</li> <li>粒子背景鼠标移动抛 RangeError：合成事件冒泡回 window 又触发监听器，加 <code>isTrusted</code> 判断。</li> <li>背景高度写死 670px：补 resize 重测 + ResizeObserver。</li> <li>作品卡浅色下没轮廓：边框沿用了深色主题写法。</li> </ul><p><strong>视觉与可访问性</strong></p><ul> <li>三级文字对比度 2.49&lt;1&gt; → 4.87&lt;1&gt; 才过 WCAG AA，主题默认改为夜间。</li> </ul></section> <section><h2>教训：AI 快在写代码，稳在自己兜底<a href="#教训ai-快在写代码稳在自己兜底"><span>#</span></a></h2><ol> <li><strong>断言要「会红」</strong>：几何断言优于肉眼；新断言先证明它在缺陷态会变红，否则就是恒真断言、绿灯给人假安心。</li> <li><strong>字段少而稳</strong>：posts 只留 title/date/tags/summary/link 五个字段，schema 用 zod 收编，写错直接构建报错。</li> <li><strong>一个人也写交接文档</strong>：CODEX.md 把硬规则和构建注意事项写下来，是「当时的自己留给现在」的说明。</li> <li><strong>锁版本、本地化资源</strong>：依赖精确锁、图床改本地，把环境差异和第三方稳定性提前填掉。</li> <li><strong>方向顺应真正在持续产出的事</strong>：作品档案是低频橱窗，文字才是高频产出，该改就改。</li> </ol><p>借助 AI 做站，最大的价值是把「写」的成本降下来，让十个月能完成三十来处改版；但 AI 不会替你记住坑——线上验证的顺序、可执行的断言、沉淀成文档的教训，得自己一条条守住，才守得住这个站。</p></section>