Node.js躬行记（33）——AI生成官网

　　品牌组为了做 GEO，决定对官网进行一次重构翻新，提升 AI 模型引用我们官网的频率。

　　GEO = SEO + AI，GEO（Generative Engine Optimization）生成式搜索引擎优化，让网站内容更容易被 AI 模型当做引用资料。随着千问、豆包、Deepseek等 AI 聊天机器人的普及，越来越多的人习惯直接在这些对话中获得答案，而不是通过传统的搜索引擎，自己去串联答案。所以，有必要做此优化。

一、生成工具

　　但是现在公司的产品资源有限，所以品牌组希望我们能跳过产品，自行设计生成官网。为此，我们就想到了去年尝试过的 AI 生成网站的方案。

　　不过这次有个限制，就是需要容易被机器人抓到内容，传统的 CSR 方式，页面就是个空白页，所有内容都要通过脚本渲染。调研后发现，并不是所有的机器人都能在此渲染模式下抓取到内容，所以为了保险起见，得改成 SSR 的渲染方式，使用 Next.js (React)、Nuxt.js (Vue) 、Astro 等框架。

　　Astro 的卖点是加载速度快、具有良好 SEO，非常符合我当前的需求，并且 UI 无关，支持 React、Svelte、Vue 等组件。开创并推广了一种新的前端架构模式：群岛架构，工作原理是将大部分页面渲染为快速且静态的 HTML，并在页面上需要交互或者是个性化的区域（例如，轮播图），添加上更小的 JavaScript “群岛”。也就是说，原先将所有业务逻辑合并在一个脚本中，现在可以智能的分成多个小的脚本，按需加载。听着很诱人，所以我打算体验下这个框架。

　　说到性能框架，还有一款挺火的叫 Qwik 的框架，主旨是让网页“几乎零加载”。它把运行时状态序列化进 HTML，然后用户交互时才按需加载代码，在初始的脚本几乎为0，不需要完整水合（hydration），页面可以“秒开”。超细粒度懒加载，代码被拆到函数级别，在点击按钮才加载对应函数，并且天然适合 SSR / SEO。但缺点很明显，生态不完整，框架还在更新迭代中，并不稳定。保险起见，就没采用此框架。

1）lovable

　　在开始选择生成工具时，我首先想到的是 lovable，这是一款在线的网页工具。去年用此工具生成过另一条产品线的官网。但是在输入“技术栈使用Astro+TypeScript+React+Tailwind CSS”后，发现不支持 Astro 框架，它只能生成 React 那种网站。

　　

　　但值得庆幸的是，生成的网站风格很对我的胃口，后续用其他工具生成的风格也是参考这里的网站。我将生成的代码下载到本地，很顺利的就运行起来了。

2）秒悟

　　自己让 AI 每天早上 7 点推送昨天的最新前端资讯，推送了阿里最新的生成工具秒悟。我马上就体验了一下，但不知为何，生成后无法预览。捣鼓半天，提示积分没有了。

　　

3）v0

　　在团队群吐槽完秒悟后，团队成员推荐了 v0，他正好有积分，马上就进去尝试。可以生成 Astro 框架的代码，但期间也出现了点状态，预览又失败，并且下载到本地的代码在运行时，没有脚本交互，只有静态界面。

　　第二天早上又生成了几个版本，又可以预览了，蛮玄学的。前前后后总共生成了 27 个版本，最终得到了一个满意的初版，在本地可以运行。本地的 Node.js 版本升级到了 24，否则无法运行 Astro 框架。

　　

　　这个基础版本可以帮我节省一周的开发时间，由于从未使用过 Astro，因此从零开始搭建，会费不少熟悉和调试时间，有了 AI 工具后，就直接跳过此步骤，开始业务开发。

二、网站上线

　　代码下载到本地后，就换了组员推荐的工具：Antigravity，这个款 Google 基于 VS Code 研发的客户端编辑器，内置 AI 系统。它可以直接扫描本地项目，在编辑器中自动修改源码。

1）软件登录

　　使用起来很流畅，但是编辑器的登录比较麻烦。首先需要有谷歌的账号，其次账号归属地得选择国外，国内就要申请修改，然后一两个工作日后就能审核通过。接着就是登录，流量也得在国外，否则不能登录成功。我尝试了几次都没成功，*****X 选择全局都不行。

　　

　　后面换成 *****X Pro，并且需要开启“Tun模式”（Tun Mode）或“增强模式”（Enhanced Mode）后，就能成功登录上了。

　　

2）实际应用

　　登录成功后，在右边就有个窗口，专门给 AI 发送指令来修改源码。例如刚生成的官网只能中英文切换，在编辑器中增加了繁体的切换，并且从开关按钮更新成了下拉框。默认生成的根目录中，包含 components 和 lib 目录，经过 AI 分析后，判断为冗余目录，立刻删除。

　　

　　在 Chrome 中安装过 LocatorJS 插件，但是官网项目不支持映射，就让 AI 改造项目，在我授权后自动安装依赖包。经过一阵改造后，就能在本地调试时，使用插件映射到源码了。

　　

　　编辑器还可以修改之前的项目，输入正确的目录，合适的提示词，AI 就会去扫描脚本，并且自动去分析脚本之间的引用，准确定位到问题所在，给出具体的报错流程和解决方案，具体到代码行数。举个实例，在页面中引用 TabModal 组件时，出现页面报错。

　　

3）正式发布

　　新官网在发到测试环境后，要替代老官网，但是域名要保持不变。所以就需要配置个别几个地址转发到新项目。而在老项目还有很多页面地址和接口，需要保持不变。

　　这个任务交给运维去处理，搞了蛮久的，他一开始做域名转发，用了通配符（如下所示），即使配了新的转发规则，也会被覆盖掉。就算两者换位置，也不起作用。

test-www.xx.me/(.*) > officialwebsite
test-www.xx.me/ > officialwebsite2

　　运维本来以为地址不多，还想一条条配置转发，直接被我否决了。最终解决方案是，网关不走 Ingress，全部在Nginx上做反向代理，具体细节也没多问。

　　流水线也要新建，由于 Astro 依赖的 Node 版本比较新，他需要重新做基础镜像，老镜像还是 15 年配置的。镜像也花了一两天的时间，还要修改配置文件、启动命令等。