个人网站搭建之路：技术栈、实现框架与费用记录
0代码基础博主的 AI 建站记录：ChatGPT Plus 负责规划与验收，DeepSeek harness 负责开发与执行，1 天上线。
项目概览
「我花同学」是我的个人内容网站，主要发布 AI 实践笔记、工具评测、作品和推荐。目标是打造一个高效的AI内容发布和个人品牌展示平台
| 指标 | 数据 |
|---|---|
| 主要页面 | 首页、笔记、工具、作品、推荐、关于 |
| 初始内容 | 5 篇笔记、3 个工具、4 个作品、3 条推荐，处于试验阶段 |
| TS / React 文件 | 38 个 |
| TS / React 代码 | 2,768 行，不含内容文件 |
| Git 提交 | 20 次 |
| 首次提交 | 2026-10-18 |
| 开发周期 | 1 天 |
| 开发方式 | ChatGPT Plus 规划与验收，DeepSeek harness 开发与执行 |
技术栈
核心框架
| 技术 | 版本 | 用途 |
|---|---|---|
| Next.js | 16.4.2 | App Router 路由与静态生成 |
| React | 19.3.0 | 页面组件与交互 |
| TypeScript | 5.x | 类型检查 |
| Tailwind CSS | 4.x | 样式与响应式布局 |
内容系统
| 技术 | 版本 | 用途 |
|---|---|---|
| Markdown / MDX | — | 保存正文，嵌入视频等组件 |
| gray-matter | 4.x | 解析标题、日期、分类等元信息 |
| js-yaml | 5.x | 解析站点和分类配置 |
| next-mdx-remote | 6.x | 渲染文章正文 |
| remark-gfm | 4.x | 支持表格、删除线等语法 |
| rehype-slug | 6.x | 生成标题锚点 |
| rehype-pretty-code / Shiki | 0.14.x / 4.x | 代码高亮与双主题配色 |
后端服务
网站采用全静态生成，内容保存在仓库文件中。当前的文章和作品展示需求不依赖数据库，因此没有引入独立后端、账户系统或网页管理后台。
部署与运维
| 服务 | 用途 |
|---|---|
| Vercel | 自动构建、网站托管、CDN 与 HTTPS |
| GitHub | 私有仓库、内容与代码版本管理 |
| Cloudflare | 域名 DNS 解析 |
| B 站 | 视频托管与嵌入播放 |
Vercel 已提供内容分发和 HTTPS，我目前也没有额外的 Cloudflare 防护规则需求，因此将网站记录设为 DNS only，不再叠加代理，减少两层缓存与 HTTPS 配置的维护。这与 Vercel 对额外反向代理的建议一致。
推送到 main 分支后，Vercel 自动构建部署，通常约一分钟完成，实际以构建结果为准。
开发工具
| 工具 | 用途 |
|---|---|
| ChatGPT Plus | 项目规划与验收 |
| DeepSeek harness | 开发与执行，包括代码生成、配置调整和问题排查 |
| Git | 提交修改、查看历史与版本回退 |
网站架构
site/
├── src/
│ ├── app/
│ │ ├── page.tsx # 首页
│ │ ├── notes/ # 笔记列表与详情
│ │ ├── tools/ # AI 工具
│ │ ├── works/ # 作品
│ │ ├── picks/ # 推荐
│ │ ├── about/ # 关于
│ │ └── tags/ # 标签聚合页
│ ├── components/ # 页面组件
│ ├── generated/ # 自动生成的内容数据
│ └── lib/ # 工具函数
├── content/
│ ├── notes/ # 笔记 Markdown
│ ├── tools/ # 工具条目
│ ├── works/ # 作品条目
│ ├── picks/ # 推荐条目
│ ├── site.yml # 站点设置
│ └── taxonomy.yml # 分类定义
├── public/images/ # 图片与二维码
└── scripts/ # 内容校验与生成脚本核心功能实现
1. 内容系统：Markdown + 构建期 JSON
笔记、工具、作品和推荐分别保存为 Markdown 文件。generate-content.mjs 在构建前校验字段、生成 JSON，再由 Next.js 生成页面。内容格式错误会中断构建，线上访问不依赖临时读取 Markdown。
2. 搜索、分类与标签
搜索在浏览器中匹配标题、摘要等字段，不需要搜索接口。分类状态写入网址，方便刷新保留和分享；笔记标签自动生成聚合页。
3. 文章阅读
正文通过 MDX 渲染，支持表格、代码高亮与复制。桌面端提供侧边目录，手机端使用折叠目录，全站支持深浅主题和响应式布局。
4. 视频与作品展示
文章嵌入 B 站播放器，作品卡片链接到视频或项目。原计划使用 Cloudflare R2，但支付方式绑定未完成，因此先采用 B 站方案；视频文件不进入 Git 仓库。
5. 站点配置与搜索引擎信息
站名、介绍和联系方式集中在 site.yml，分类由 taxonomy.yml 管理。文章生成独立标题、摘要和 canonical 链接，网站提供 sitemap.xml 与 robots.txt。
内容生产工作流
实践记录 → DeepSeek harness 整理 Markdown → 人工核对
→ 内容校验与构建检查 → Git 提交并推送 → Vercel 自动部署笔记按 AI工具、产品评测、教程、行业观察、学习五类组织；作品、工具和推荐使用各自的内容字段。日常更新沿用同一条发布链路。
我把内容规范、关键路径和检查命令保存在 AGENTS.md 中，方便后续让 AI 接着维护。
费用统计
固定成本
| 项目 | 费用 | 周期 |
|---|---|---|
域名 wohuaai.com | 81 元 | 1 年 |
| Vercel Hobby | 0 元 | 月 |
| GitHub Free | 0 元 | 月 |
| Cloudflare 免费方案 | 0 元 | 月 |
开发工具成本
| 项目 | 费用 | 说明 |
|---|---|---|
| ChatGPT Plus | 订阅费另计 | 用于项目规划和验收，未分摊到本项目 |
| DeepSeek 模型调用 | 5 元 | 本次通过 DeepSeek harness 开发与执行的调用费用 |
总计
| 成本类型 | 金额 | 说明 |
|---|---|---|
| 网站基础设施 | 81 元 / 年 | 当前域名费用，其余服务使用免费方案 |
| 本次开发模型调用 | 5 元 | DeepSeek 模型调用费用 |
| 已统计支出合计 | 86 元 | 首年域名 + 本次模型调用，不含 ChatGPT Plus 订阅 |
以上按本次域名购买价格和模型调用支出统计。免费服务需在方案适用范围和额度内使用，域名续费及后续模型调用以实际账单为准。
踩过的坑
1. 框架配置与静态生成方案冲突
问题：脚手架的新配置与项目采用的静态生成方式不兼容。
解决：结合当前版本文档调整配置，明确关闭 cacheComponents，保持全站静态生成。
2. 日期存在，校验却报错
问题：YAML 将未加引号的日期解析为日期对象，最初的校验器只接受字符串。
解决：兼容两种输入，统一转换为日期字符串。
3. 目录无法定位带格式的标题
问题：目录和正文分别处理标题，遇到行内代码、链接等格式时，生成的锚点不一致。
解决：从与正文一致的解析流程中提取标题 ID。
4. 大图与长代码撑破手机页面
问题：内容宽度超过正文区域，导致整页横向滚动。
解决：限制图片最大宽度，让长代码只在代码块内部滚动。
5. 深色主题按钮文字不清楚
问题：蓝色按钮在深色模式中仍配白字，对比度不足。
解决：为强调色背景单独设置文字颜色，深色主题使用深色文字。
AI 工具协作体验
这次我采用两种工具分工协作：ChatGPT Plus 用于规划和验收，DeepSeek harness 用于开发与执行。我主要负责：
- 确定网站定位、栏目和功能范围。
- 确认页面效果与内容表达。
- 验收功能并反馈实际问题。
ChatGPT Plus 协助明确项目范围和验收要求，DeepSeek harness 将方案落实到页面、配置和内容文件，并根据构建报错排查问题。
总结
1 天完成初版上线，域名费用为 81 元 / 年，本次 DeepSeek 模型调用花费 5 元。两项合计 86 元， ChatGPT Plus 订阅费用未计算在内
这套结构让我可以通过维护文件持续发布内容，暂时不必承担数据库和后台系统的维护。接下来，我会把重点放在更完整的实践记录和作品积累上。
如果你也想搭建类似的个人品牌网站，欢迎参考这篇文章的技术方案，或联系我进行咨询。