欢迎参观我的新站点——「桃之夭夭」taozhiyy.top

视频演示

先看一支网站整体演示视频，直观感受一下「桃之夭夭」长什么样——全程 Vibe Coding打造，从单页主页到全栈 Monorepo。

📺 B 站原视频：我用 VibeCoding 制作了一个属于自己的个人小站

这是我的个人总站——桃之夭夭，线上地址：https://taozhiyy.top

本文记录它如何从一个早期单页主页，一步步长成一个包含主站、成长博客、Hexo 博客和 Go 后端的完整 Monorepo，以及背后全程的 Vibe Coding 实践。

一句话定位

桃之夭夭（taozhiyy.top）是我的个人总站。它不是某一个独立项目，而是一个把主站、博客、成长日志、后端服务、AI 能力全部收拢到一起的 Monorepo——一个完全由我自己掌控的数字空间。

在它之前，我已经搭过一个用 Vibe Coding 从零做出来的单页主页。但单页站很快撞到了天花板：内容分散、前后端割裂、没有一个能承载「持续迭代」的工程骨架。于是这次我直接把它重构成了一个 Monorepo。

🐙 GitHub 仓库：bistutzyy/taozhiyy

Monorepo 整体结构

展开看完整目录结构

taozhiyy-monorepo/
├── main/         # 主站前端：React + Vite + Tailwind + GSAP
├── build/        # 成长博客子站：记录本站搭建与迭代过程
├── blog/         # Hexo + Butterfly 博客页面
├── acg-api/      # Go 后端 API：留言、AI 助手、AI 生图、Bili 缓存…
├── shared/       # 多站点共享脚本与样式（如右下角 AI 助手）
├── deploy/       # 部署相关脚本
├── docs/         # 文档
├── tools/        # 工具脚本
└── .github/workflows/  # GitHub Actions 自动部署

每个子目录都是一个能独立运行、又彼此协作的子系统：

目录	角色	技术
`main/`	主站前端	React + Vite + Tailwind CSS + GSAP
`build/`	成长博客子站	Hexo + 自建内容管线
`blog/`	博客页面	Hexo + Butterfly
`acg-api/`	后端服务	Go + `net/http` + SQLite + 腾讯云 COS
`shared/`	共享资产	浮动 AI 助手脚本等
`deploy/` + Actions	部署	GitHub Actions + UCloud 服务器 + Nginx

主站 main/：不只是首页

主站是整个总站的门面和枢纽，路由下挂着一整套功能页面：

主站页面一览

首页 — 滚动驱动的沉浸式视觉，Hero 壁纸选择器基于头像徽章与指南针交互
关于我 /about — 通过 Shadow DOM 容器把关于页预览隔离加载进 React 主站，项目/游戏/工具卡片网格
碎语 /moments — 从 moments.js 读取短内容，用 postcard / ticket / watercolor / poem / journal / ribbon 等全息卡片模块展示
博客 Blog — 嵌入 Hexo 博客
成长日志 Build Log — 嵌入 build 子站
Bili Hub — B 站追番与动态
AI 助手 — 右下角浮动，支持聊天与生图
留言板 / 友链 / 相册 — 社交与展示
AI 生图广场 /ai-gallery — 公开生成的图片 feed
数据中心 /ai-traffic — AI 流量 + 服务器状态同页
站长控制台 — 仅站长可见的内容发布后台

关于我页面与 AI QuizCard 展示

/about 是这次迭代里我很满意的一块：关于页预览用 Shadow DOM 做作用域隔离后嵌进 React 主站，图片统一走腾讯 COS，项目集在不同断点下保持舒展的网格，常驻游戏卡片直接展示而不再依赖底部横向拉条。

关于页里的第一个项目是 AI QuizCard。项目卡片和 /about/projects/quizcard 都指向 /showcase/quizcard.html，它随主站部署了：

成品展示页资源
小程序风格的页面预览
/web/ 下访客可直接玩的静态 QuizCard 应用

静态访客版内置默认题组，所以没有后端数据也能马上练习——这一点对「展示项目」来说很重要：访客点进来就能玩，而不是看到一个空壳。

碎语页面：随机艺术卡片

碎语页每条卡片的样式是随机分配的——明信片、车票、水彩、诗笺、手账、缎带……灵感来自原 Hexo 博客 Butterfly 标签体系里的糖果屋风格。

首页双层滚动修复

一个被认真对待的小问题

首页曾经有「双层滚动条」问题——Hero 区和站点布局的 overflow 行为叠加，导致页面能同时滚两下。这次通过收紧 Hero 与站点布局的 overflow 行为修掉了，并补了布局类名相关的回归测试，避免以后悄悄回归。

后端 acg-api/：Go 写的服务层

后端是整个总站「活起来」的关键。acg-api 是 /api 路由背后的 Go 服务，从 main.go 启动：加载 .env、打开 SQLite、执行迁移、保留站长账号、启动 Bilibili / radar / 壁纸池同步循环，再由 Nginx 反向代理暴露为 /api。

后端控制器与路由速览

控制器	主要路由	职责
公开控制器	`GET /api/v1/health`、`bangumi/list`、`radar/feed`、`wallpapers/draw`	健康检查、番剧缓存、动态、壁纸池
`auth.go`	`/api/auth/*`	注册、登录、会话、站长二次验证
`chat*.go`	`/api/chat`、`/api/chat/stats`	AI 助手额度、固定答案匹配、DeepSeek 转发
`ai_image*.go`	`/api/ai/image`、`/api/ai/image/gallery`	Agnes AI 生图、COS 上传、生成图广场
`server_info.go`	`GET /api/server/info`	非敏感服务器遥测
`guestbook*.go`	`/api/guestbook/messages`	留言板、连续回复、UTF-8 邮件通知、IP 脱敏
`owner_*.go`	`/api/owner/*`	站长控制台、发布、COS 上传

AI 助手：从本地状态到后端固定答案

站长控制台里的 AI 固定答案区，原来只存在本地 React 状态里。现在改成了写入后端固定问答库：

GET /api/owner/status 把已保存答案返回给控制台查看
/api/chat 在调用 DeepSeek 前先匹配固定答案
网站右下角 AI 助手遇到相同问题时，优先返回维护好的回复

这样一来，常见问题既省了模型调用，又能保证回复口径稳定——典型的「能用确定性就用确定性」。

AI 生图：登录即可玩

右下角 AI 助手加入了面向登录用户的生图模式：

调用后端 /api/ai/image，使用 Agnes AI 的 agnes-image-2.1-flash
生成图保存到腾讯云 COS
最终 COS 链接、提示词、生成时间记录到 /ai-gallery 生图广场
屏幕中央用透明浅色镭射卡片展示结果，支持保存本地和复制 COS 链接

数据中心：安全的服务器遥测

数据中心页（/ai-traffic）把 AI 流量和服务器状态放到同一页。ServerInfoPanel 每 10 秒刷新 GET /api/server/info，展示在线状态、云厂商/区域、CPU 占用、内存使用、运行时长、运行时信息、CPU 核心数、goroutine 数和服务端时间。

这个接口刻意不暴露真实 IP、主机名、磁盘路径、进程列表、环境变量等敏感信息——服务器遥测可以做，但不能越界。

站长控制台：一键发布到 GitHub

这是我最喜欢的工程化设计之一。站长控制台通过 GitHub Contents API 直接把内容写回仓库，覆盖了站内所有内容类型：

接口	写入目标	说明
`POST /api/owner/publish`	`blog/source/_posts/`	发布 Markdown 文章，合并 front matter，处理文件名冲突
`POST /api/owner/friends`	`main/src/data/friendCards.js`	写入友链，检测重复 URL
`POST /api/owner/moments`	`main/src/data/moments.js`	写入碎语，校验日期分类，分配下一组卡片样式
`POST /api/owner/gallery/images`	`main/src/data/galleryAlbums.js`	写入公开图片，必要时创建相册

也就是说，我在站长控制台里发一篇文章，后端会直接 commit 到 GitHub 仓库，触发 Actions 重新部署——写完即上线，全程不用打开终端。

部署：GitHub Actions + UCloud + 自定义域名

部署链路：站长发布 / 本地推送 → GitHub 仓库 bistutzyy/taozhiyy → GitHub Actions 自动构建 → 推送到 UCloud 服务器 → Nginx 反向代理 → taozhiyy.top

构建：GitHub Actions（.github/workflows/deploy.yml）
服务器：UCloud（香港），Nginx 反向代理把 /api 转给 Go 服务
域名：taozhiyy.top
图片存储：腾讯云 COS（bucket tzyy-1330068502，区域 ap-beijing）
AI 能力：DeepSeek（聊天）+ Agnes AI（生图）

参考与原创声明

首页最初是在学习和参考 adrianhajdin/award-winning-website 的过程中搭建起来的。我非常尊重原作者的劳动成果——它帮我学到了现代前端动画、滚动交互、视频视觉布局和沉浸式页面结构。

需要明确说明：当前项目并不是完全原创作品，它仍然是在原作者项目启发下逐步修改、重构、原创化改进的个人学习项目。本仓库与原作者、原教程项目或 Zentry 没有任何从属、授权或商业关联。

围绕个人网站定位，我做了大量原创化和定制化改造：

基于头像徽章与指南针交互的 Hero 壁纸选择器
「桃之夭夭」个人站点身份、文案与内容组织
About 区域的视觉明信片式滚动展示
Features 区域的展厅布局与档案书翻页交互
Blog / Build Log / Bili Hub / AI 助手 / 留言板 / 友链 / 相册 / 碎语等站内功能集成
留言、邮件通知、AI 上下文、AI 生图、Bili 缓存、站长发布等后端 API
适配个人域名、UCloud 服务器、GitHub Actions 的工程配置

在这些原创/定制部分里，整体产品方向、功能规划、交互逻辑、内容组织和审美取舍由我主导。Vibe Coding / AI 编程工具是实现辅助——它们帮我写代码、调试、整理细节，但不替代我对需求、设计判断和最终效果的主导。

技术栈总览

环节	技术
主站前端	React + Vite + Tailwind CSS + GSAP
后端服务	Go + `net/http` + SQLite
AI 聊天	DeepSeek
AI 生图	Agnes AI `agnes-image-2.1-flash`
图片存储	腾讯云 COS
博客	Hexo + Butterfly
部署	GitHub Actions + UCloud + Nginx
域名	taozhiyy.top
内容发布	GitHub Contents API（站长控制台直发）