从素材库到个人博客：一次冷静的 vibecoding 实践

缘起：想要一个记录的地方，但不想花服务器钱

我平时喜欢摄影、听音乐，也在学英语。作为一个计算机科学与技术（中外合作）的大一学生，我希望能有一个属于自己的空间，把这些零散的记录、思考和折腾的过程沉淀下来。

我最初的想法很简单：做一个素材库，能展示我拍的照片，同时以后能写点技术文章。但我不太会写 HTML、CSS 和后端代码。一开始我尝试租用了腾讯云服务器，装好宝塔面板，结果面对空白的目录，完全不知道从何下手。

于是我决定完全借助 AI 对话来开发，也就是所谓的 vibecoding。在这个过程中，我把自己定位为“产品经理 + 测试员”，而 AI 是“全栈工程师”。我不去纠结代码怎么实现，只负责描述我想要的效果，以及测试 AI 给出的结果。

第一阶段：用 AI 生成 PHP 素材库

我给 AI 的初始需求非常直接：“我想做一个素材库，展示图片和视频，可以预览、下载，参考影视飓风的风格。”

AI 很快生成了 index.html（前端页面）、index.php（扫描目录生成缩略图）和 upload.php（处理上传）。我按照 AI 的指导在宝塔面板里创建目录、配置权限，勉强跑了起来。但随之而来的是无止境的修修补补：

• 图片加载慢，AI 建议用 Canvas 生成缩略图、加懒加载。
• 竖拍照片方向不对，AI 加了 EXIF 方向处理。
• 分类和标签不够用，AI 教我按文件名拆分标签、从 EXIF 提取参数。
• 上传太麻烦，AI 写了拖拽上传，并在客户端生成缩略图。
• 想要相册模式，AI 实现了按标签自动分组和侧边栏筛选。

在这个阶段，我的工作流就是：截图报错 → AI 改代码 → 我测试 → 再反馈。这构成了 vibecoding 的核心循环：描述、生成、测试、修正、再描述。

第二阶段：迁移 Cloudflare，转向静态博客

没过多久，腾讯云服务器到期了。我不想续费，于是问 AI 能不能把网站挂到免费平台上。AI 建议我迁移到 Cloudflare Pages + R2。这需要完全重构后端，把 PHP 换成 Cloudflare Functions。

这期间踩了不少坑：

• PowerShell 报安全错误，需要改用 CMD。
• 项目已存在，导致 project create 失败，需要跳过创建直接 deploy。
• R2 公开访问的入口很难找，最后在 Settings 里发现了 Public Development URL 并启用。
• SSL 证书未就绪，以为部署失败，等了几分钟才恢复正常。

最终，素材库以零成本跑在了 Cloudflare 上。但我的目标不只是做图库。作为一名计算机专业的学生，我需要写技术文章、记录留学日常、展示摄影作品。于是，我决定把素材库降级为一个子板块，整体升级为个人博客。

第三阶段：定下基调，交给 AI 执行

我一直不喜欢花里胡哨的设计。那些霓虹色、玻璃拟态、粒子背景、自动播放的音乐，让我觉得浮躁。我想要的博客是专业、冷静、简约但不简单的。

因此，我给 AI 写了一段非常详细的 Prompt，明确要求：

• 技术栈使用 Astro + TypeScript，纯静态输出，内容用 Markdown 管理。
• 颜色限定为纸白、墨黑、冷青灰，字体限定为宋体标题、黑体正文、等宽元数据。
• 动效只保留三种：链接下划线生长、图片 hover 亮度变化、页面淡入。
• 禁止使用任何花哨的 UI 组件和复杂动画。

AI 很好地理解了我的意图，生成了一套结构清晰的 Astro 项目。它甚至帮我扫描了之前的素材库源码，提炼出了可复用的 R2 图片地址规则和元数据字段，但没有把旧素材库那套 16px 圆角、大阴影和玻璃拟态的样式带过来。

部署上线的最后关卡

本地代码跑通后，我把它推送到了 GitHub，并在 Cloudflare 上创建项目。虽然过程一波三折，但也算是体验了一次真实的 CI/CD 自动部署。

最典型的几个坑：

• Workers 与 Pages 的混淆：Cloudflare 的 UI 最近更新，把 Pages 藏得很深。我一开始误入了 Workers 的配置页面，里面要求填 Deploy command 和 Preview command。后来在页面最底部找到了 Need to use the legacy Pages workflow? Continue to Pages 的链接，才回到正轨。
• Node 版本警告：在 Cloudflare 构建日志中出现了 EBADENGINE 警告，提示 Node 20 与 corepack 要求的版本不匹配。我随后在设置里把环境变量 NODE_VERSION 改成了 22，重新部署后警告消失。

当 Cloudflare 构建日志最终显示绿色的 Success! 时，我意识到这不仅仅是一个网站的诞生，也是我借助 AI 独立完成一个完整软件项目的里程碑。

关于 vibecoding 的一点思考

回头看，从 PHP 素材库到 Astro 博客，我几乎没有手写过一行真正的业务代码。但 AI 时代，这并不意味着人变成了甩手掌柜。相反，人的判断力变得比技术能力更重要。

• 审美需要人来把控：AI 默认生成的界面往往带着浓重的“模板感”。如果没有我“不要花里胡哨”的明确约束，它不可能做出这种克制的风格。
• 报错是最精准的提示词：遇到 PowerShell 报错、Git 身份未知、Cloudflare 构建失败，我只需要把错误信息截图发给 AI，它通常能立刻定位原因并给出修复命令。
• 理解基础原理有助于排错：虽然没写代码，但我大致了解 Git、Node.js、静态站点生成、CDN 的概念，这让我能在 AI 给出解决方案时判断其合理性，而不是盲目执行。

下一步

这个博客刚刚上线，目前只有这一篇文章。接下来的计划很简单：

1. 把 about.astro 里的“现在 / 过去 / 未来”补充完整。
2. 写几篇关于摄影、音乐和英语学习的笔记。
3. 尝试用 Markdown 写文章，并配置好 GitHub Actions 和自动部署，让写作流程更顺畅。

AI 时代，不会写代码也能创造产品，关键是你是否愿意尝试和迭代。这就是我的起点，希望这些记录对你有用。