用 AI 搭了一个月网站,最后被nginx教育了

用 AI 搭了一个月网站,最后被 nginx 教育了

最近一个月，我终于把拖了三个月的网站升级完了。

说“拖”其实不准确——6、7 月份基础版就能跑了，但我总觉得 UI 不够拿得出手。想改，又懒得动手。就这么拖着，拖到上个月才下决心：干脆全用 AI 工具接力，从设计到部署一条龙。

为什么？

因为懒啊。能让 AI 干的活，我为什么要自己学、自己搞？

我当时跟 Gemini 3 说了句：“帮我设计一个像素风格的个人网站。”他直接给了我一整套方案——页面模块、UI 组件库、色系、交互方式（hover 渐变、视差滚动、卡片翻转）全都列出来了。

image1

我当时愣了几秒：这也太牛逼了吧？

然后我就信了。信 AI 能帮我搞定一切。

结果呢？

网站是上线了。但过程？整整一晚上，要么看到 502 Bad Gateway，要么页面根本没更新。我盯着屏幕，手指敲桌沿，心里只剩一句话：真正的坑在这里呀。

不过先给兄弟们看成果 boluopets.com

AI 流水线：四个工具接力完成整个项目

1. Gemini 3：把我的想法变成施工图

我一开始就是随口一问：

“帮我设计一个像素风格的个人网站。”

结果 Gemini 3 直接给了我一整套==施工图==——页面该有哪几个模块、用什么 UI 组件库、选哪几个色系、甚至每个板块该用什么交互（hover 渐变、视差滚动、卡片翻转）全列出来了。

我当时真有点懵。技术选型、UI 设计、实现方法全帮我定了。

更离谱的是，Gemini 3 Pro 的审美是真的好。我看完那套方案，直接心动准备开整了。

2. AI Studio：十几分钟生成能跑的原型

拿到 Gemini 的设计方案后，懂得都懂 AI Studio 的能力，直接生成 React 原型。

有页面需求+UI 风格+实现方式，==AI studio 不是手拿把掐==。

没什么好说的，这一步很顺。

十几分钟就能看到一个能跑的界面，视觉效果和 Gemini 描述的基本一致。

我当时就是想验证一下：这套方案到底能不能落地，别搞到最后发现自己在瞎折腾。

如果你有其他的 vibe coding 工具，实际都一样，实测 Trae 这种 ide 也能做出来。

3. Antigravity + Claude 4.5：从原型到“能用”

React 原型跑起来之后，我突然想加点东西：博客功能、SEO 优化、还有一个后端 API 接个智能体，让别人能跟“AI 版的我”聊天。

这就得迁到 Next.js 了。

这一步主要靠 Antigravity 完成，哥们儿有 Gemini Pro，我们这种轻量项目 Gemini 3 + Claude 4.5 Opus 爽用。具体干了三件事：

1. 把 React 项目重构成 Next.js 架构

2. 接入 Coze 智能体（把我的项目经验、工作经历都喂进去）

3. 把博客 markdown 文章渲染好看点，顺便把近期搞的小项目都扔进去做个 Project Gallery。

本地测试的时候，==一切都很完美==。

界面好看、功能完整、AI 对话也流畅。我当时心想：这不就成了吗？

4. 部署+Nginx 出现了 💀

真正的噩梦，是从部署到==腾讯云服务器==开始的。

我一直以为部署就是“传文件 + 改个配置”，结果发现 Next.js 需要后端服务，也就是说必须做反向代理。而我之前做的都是纯静态网站，直接扔到 CDN 就完事，这次完全懵了。

我先用 Gemini 学了好久网站部署的知识：

……还好我之前有点 Linux 系统使用经验，不然真要崩。

但实际操作时各种问题属实是没想到：

• 我阿里云的域名+腾讯云的 vps，域名解析配了半天

• SSL 证书也搞了几天

• 浏览器的“无法访问此网站”看到想吐

• 还有这玩意，恶心：

502 Bad Gateway

我对计算机网络还有点阴影……什么是反向代理？SSL 证书怎么配？nginx 的 proxy_pass 到底该怎么写？

更离谱的是，我有个 1.0 版本第一次成功了。但升级了 Coze 之后，2.0 版本代码都部署好了，VPS 上也 npm run build 了，理应应该是新的页面，但==一直显示我的 1.0 旧版本==。很奇怪。

我甚至把代码全部清空，重新 git pull，也不行。

最后我把 Nginx 的缓存从之前关闭，变成打开，==直接自动好了==。

说实话，我也没整明白为啥。如果有大佬知道的话，麻烦给我解解惑，我问了 AI 一晚上他都搞不定。

折腾一个月，就为了这三件事

网站终于能正常访问了。说实话，功能没多复杂。它就干三件事：

当个人简历门户:

比 Word 文档好看，比 PDF 更灵活，想改随时改。

展示有意思的项目:

把自己做过的东西整理出来，方便别人看，也方便自己回顾。

接入 AI 智能体:

大家可以直接和“AI 版的我”聊天，问我的经历、项目经验、技术栈，比传统简历互动性强得多。

但我的简历还没接入，coze 还没付费，大家等后面文章写出来就有了。

就这样。

但对我来说，更重要的不是功能本身——而是我终于把设计、开发、部署全流程走了一遍。

尤其是最后那个“nginx 教育环节”，让我补上了很多之前一直回避的知识盲区。

具体怎么实现的？

说实话，这篇本来没打算写。

是一朋友一直催：“你这个思路挺有意思的，赶紧分享出来啊。”我想想也是，先把思路和坑给大家讲清楚，下一篇再拆开手把手复刻。下期会讲这些：

• ✦ AI Studio 生成的代码怎么用？\ 从原型到能跑的项目，中间有哪些要注意的。

• ✦ Coze 智能体怎么接入 Next.js?\ API 调用、数据喂养、对话逻辑——我踩过的坑都会讲。

• ✦ nginx 配置到底哪容易翻车？\ 反向代理、SSL 证书、缓存问题——这些我真的被教育了一整晚。

• ✦ 怎么让所有人通过域名访问你的网站？\ 从买域名到解析、从 VPS 到部署，一条龙讲清楚。

如果你也想试试用 AI 搭点什么，可以先去我网站玩玩（boluopets.com)，和“AI 版的我”聊两句，看看效果。

如果有人好奇为啥是 boluopets.com 的域名，其实就是我老婆有个艺名叫菠萝，然后我俩有一大家子动物，凑个动物园好了~

下期更新我会把每一步、每个工具、每个坑都拆开来讲。

至于我接下来想做什么？

可能是把博客功能真正用起来吧。毕竟搭了这么久，总得写点东西对得起自己🍍