用 AI 从零搭建个人网站的过程

在这个一切都可以用代码解决的时代，如果少写、甚至不写代码，仅凭借我们对产品的直觉去指挥 AI 去写，是否能做出符合预期、甚至是高水准的网站？

这就是我尝试用 AI 从零开始搭建这座“数字花园”的全过程记录，一次纯粹的 Vibe coding 的实践。我想详尽地记录下来，供以后参考，也希望能对你有所启发。

为什么要建这个网站？

我不想要一个传统的博客（Chronological timeline），也不需要一个用来炫技的作品集。我需要一个“个人名片 + 数字花园 + 内容容器”的综合体。核心想法很简单：先写、先放、先堆起来。让它服务于我记录那些碎片化、不断生长的思考，不论是读后感、影评，还是摄影和音乐的积累。不需要等到构思完美才发布，它是真实的思考轨迹。

确立技术栈与初始概念

我将需求描述给 AI：

“做成数字花园式，白底或偏米色背景的极简风，只分几大核心类别。重点是：容易添加内容、容易持续更新。需要首页、关于我、笔记列表、单篇页和专题页。”

在几秒钟内，AI 为我制定了技术路线：

框架：Next.js 16 (App Router)，足够现代且易于构建静态站点。
样式：纯原生 Vanilla CSS（CSS Variables），不使用 Tailwind，以获得最彻底、最理性的控制权。
内容引擎：基于 Markdown。我只需要把写好的 .md 文件放到 /content 文件夹里，系统会自动解析。
部署方案：Cloudflare Pages，国内可访问，永久免费，非常适合纯静态博客。

第一阶段：结构先行，样式回归本质

因为要求极简，AI 删除了所有初始化携带的多余依赖，直接建构了基础组件：

内容解析 (lib/api.ts)：使用了 gray-matter 来解析我在文章最上方写的分类、标签和日期（YAML frontmatter），并使用 react-markdown 配合 remark-gfm 解析 Markdown 内容本体。
路由结构：
- /：首页，欢迎词 + 最近更新。
- /notes：全部笔记列表，带有按标签过滤的功能。
- /topics/[topic]：动态专题聚合页面。
- /about：介绍我为什么做这一切。
极简样式 (globals.css)：AI 定义了一套极具理性质感的排版系统，从字重、颜色变量到页面的最大容器宽度，完全去除了一切“装饰过度”的元素。

第二阶段：向“秋野平原”进发

随着基础框架的成功运行，我们进行了第二轮重构，为其注入了灵魂：“秋野平原”。

“网址显示名字请改成秋野平原，主页欢迎词请用 Garden by Ernta。”

专属调色板：从黑白灰转变为令人平静的“大地色系”（Earth tones）。背景采用了非常柔和的麦白色（#FAF7F2），文字采用树皮般的深棕色（#3D3328），并使用了微醺的琥珀色（#A66B38）作为高亮。
内容分类沉淀：我们将专题分为了电影、书架、乐理、信仰与宗教、翻转电台、Vibe Coding 等。同时由于我热衷影像，我们专门把“摄影”提取为主导航栏的独立页面，专门进行大图展示。

第三阶段：零阻力的内容发布

最棒的部分是它完全实现了我“容易更新”的诉求。我所需要做的，只是在 content 文件夹里创建一个文本文件，例如 my-thoughts.md:

---
title: "我的新想法"
date: "2026-04-12"
type: "note"
topic: "Vibe Coding"
tags: ["随笔"]
---

一些想法...

只要保存这个文件，系统不仅会自动把它渲染成一篇漂亮的网页，还会自动将它归类到 “Vibe Coding” 的专题下。这一切不需要我写哪怕一行 import 或者 html 代码。

结语

这个数字花园的诞生，证实了当人类提供审美判断和清晰需求，把“如何做（How）”丢给 AI 时，创造东西的速度是极其惊人的。

我希望这里能长成一片葱郁的秋野平原。欢迎参观。