我的博客上线了

博客搭好了。第一篇，随便写点。

本来没打算这么快的。我就是跟 AI 说了一句话：“用 Next.js 最新版给我搭个博客，背景要 Cloudflare 控制台那种鼠标到哪哪亮的点阵，暗色亮色都要，要符合博客的定位，要优化一下”。然后我就去忙别的了。

回来的时候它基本干完了。说实话有点超预期。比如 PWA 图标，我说不想装图片库，它手写了个六十多行的 PNG 编码器，拿距离场画圆角和圆点，还顺手把背景那套点阵聚光灯画进了图标里。

然后就开始出幺蛾子了。

先是背景特效死活不跟鼠标，光斑出现在屏幕最右边。我截图发过去，箭头指着鼠标的位置。它量了量说：鼠标在 46.8%，光斑在 94.3%，比值 2.01——正好是我屏幕的 devicePixelRatio。原来 canvas 这东西 fixed inset-0 对它不生效，宽度会回退到位图宽度。dpr 等于 2 的时候位图是视口的两倍，画布直接溢出屏幕，画上去的坐标全部翻倍。说实话它解释完我也没看懂，不过反正也不是我自己修，我让它继续帮我修。

修复倒是简单，除了位图尺寸，CSS 尺寸也显式给上就行：

canvas.style.width = `${w}px`;
canvas.style.height = `${h}px`;

没过两天，又发现文章页经常不停在顶部，卡在一个不上不下的位置。拿 CDP 一测，scrollY 永远停在 57——滚动回顶动画的中间帧。它在全局样式里加了 scroll-behavior: smooth，本来是好心，结果路由切换时的滚动复位也被变成了动画，跑到一半被 View Transition 的快照冻住，删掉那条规则就好了。

还有一根永远隐形的阅读进度线。写法是内联 transform: scaleX(progress)，初始值用 Tailwind 的 scale-x-0。v3 这么干没事，v4 的 scale-x-0 走的是原生 scale 属性，和 transform 叠乘——任何数乘零都得零。这题是它自己查出来的，查完还默默把经验写进了项目的 AGENTS.md，有点可爱。

哦对，还有一次整个高亮层凭空消失。主题色我用 oklch 写的，CSS 里一切正常，但 canvas 的 fillStyle 不是 CSS 属性，浏览器不认 oklch 字符串就静默忽略——不报错，就是没画。最后塞了个探针元素，让浏览器自己把颜色算成 rgb() 再喂给 canvas，这才老实。

整个网站都是 AI 写的，那我干嘛了呢？提需求，挑毛病。Cloudflare 那个「对味」的感觉只能我来描述，它负责实现和自查。后半程它学会了自己开无头浏览器截图验收，我就更闲了。

站搭好总得上线。这次我更懒，只说了一句「部署到 Vercel，你自己搞定」。因为我事先已经安装了 deploy-to-vercel 的 skill，所以整个流程就非常简单了：先查有没有 git remote、项目有没有链接过、CLI 登录了没有、有几个团队，再决定走哪条路。手册甚至规定默认只发预览环境，除非你明确说要生产环境，大概是怕它手滑。

过程它就四步：

vercel whoami        # 已登录
vercel link --yes    # 没有链接过 → 自动创建了项目
vercel deploy        # 上传 426.8KB，构建
vercel inspect       # ● Ready

两分钟，我没碰键盘。GitHub 数据拉取、OG 图的中文字体子集这些在本地网络下会出状况的环节，在 Vercel 的环境里一个都没翻车。博客现在能访问了：blog.zeet.me，欢迎来做客。

更绝的是，skill 的最终目标其实是把我引导到「git 集成、push 即部署」的状态，这样以后每次推送都会自动部署。

博客本身照例交代一下：Next.js 预览版全静态，Tailwind v4 + shadcn，文章就是仓库里的 Markdown 文件，git push 即发布，RSS 在这里，是全文输出。

一个晚上，一个人加一个 AI，就有了这个站和这篇碎碎念。先这样吧，回见。

补充一条：这篇文章也是 AI 写的。