用 AI 创建并部署网站

在前面的 用 AI 迁移静态页面 中，我们了解了如何把一个已经做好的静态页面迁移为由 WEEGLOO 管理的、基于内容的服务。这一次，我们会从头创建页面这一步开始讲起，覆盖更完整的流程。

在本篇帮助中，我们会借助 LLM 智能体和 WEEGLOO MCP，从一张白纸开始，依次完成五项工作。首先用 AI 设计工具完成页面的设计与实现，接着分析生成的页面并自动定义 Content Type，然后把页面里原本写好的数据加载为 Content。之后修改代码，让页面通过 CDA 获取数据，最后用 WEEGLOO 的 Web Hosting 把页面对外发布。

走完这个流程后，从设计到内容管理、再到部署的全过程，无需自己搭建额外的基础设施，仅凭 LLM 智能体和 WEEGLOO 即可完成。

事前准备

在开始之前，需要准备好三样东西。

第一，需要在 WEEGLOO 中创建好一个空的新 Space。后续要创建的 Content Type 和 Content 都会在这个 Space 中进行管理。关于 Organization 和 Space 的详细内容，参见 访问与权限。

第二，LLM 智能体需要已经连接到 WEEGLOO MCP。本篇帮助以 Cursor IDE 为基准进行说明，但只要是像 Claude Desktop 这样支持 MCP 的环境，都可以按相同的流程进行。安装方法在 MCP 中介绍。

第三，需要一款能自动完成页面设计与实现的 AI 工具。本篇帮助为方便起见使用 Vercel v0，不过只要是像 Lovable、Bolt.new 这样仅凭自然语言请求就能同时生成设计和代码的工具，用哪一个都可以。如果你更习惯自己编写代码的环境，也可以让 Cursor IDE 这类平时常用的 LLM 智能体一并完成设计与实现。

页面设计与实现

首先要做的，是完成页面的设计与实现。在这一步，把你想做成什么样的页面用自然语言整理好，原样传达给 AI 工具。

本篇帮助以一个虚构的分析 API 服务的 API 文档页面作为示例。许多开发团队为了运营 API 文档会引入专门的文档工具或外部模板，但这类方式往往把文档的形态和内容紧紧绑在一起，很难自由地调整结构或按团队的流程来运营。这一次，我们把从设计到内容管理的全过程都自己组织起来，做成一种可以按需自由运营的形态。

页面中既包含 API 自身的信息（名称、标语、简短介绍），也包含各个端点的信息（HTTP 方法、路径、摘要、说明）。页面的具体形态以及涉及多少个端点，都可以按你运营的 API 自由决定，并且在运营过程中可以随时扩充。把这些需求像下面这样用自然语言展开，传达给 AI 工具。

Hey, I want to build a docs site for an analytics API called Pulse.
Standard API reference layout — an overview area with the API's name,
tagline, and a short intro, plus an endpoint reference section showing
the HTTP method, path, summary, and description for each. Clean,
dev-friendly, not too colorful — think Stripe-style readable.

收到请求的 AI 工具会生成设计稿，并一并编写相应的标记与样式。在这个时间点，内容管理系统还没有接入，因此页面上显示的所有数据都是直接写在代码里的形态。

把这样做好的页面代码下载下来，导入到 Cursor IDE 这类 LLM 智能体环境中。之后的所有工作都以这份代码为基础进行，会经历与 用 AI 迁移静态页面 中相同的步骤。

内容建模

在这一步，把前面生成的页面的数据结构定义为 Content Type。Content Type 就像是数据的设计图，它会预先确定要在 WEEGLOO 中管理的数据具有哪些 Field。

看页面的代码会发现，API 自身的信息和各个端点的信息混在一起，而且这两类数据构成一对多的关系。因此这个页面会自然地拆分为两种 Content Type：一种用来存放 API 信息，另一种用来存放端点信息。

这项分析和 Content Type 的创建，只需像下面这样向 LLM 智能体发出请求即可自动完成。

Hey, I just dropped the page from v0 into the project.
The data's all hardcoded for now (the API info up top, the endpoints down
below).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look and figure out
what content types would make sense for it, then go ahead and create them
in Weegloo? We'll deal with the actual content and the API wiring in the
following steps.

收到请求的 LLM 智能体会查看代码的结构，推断数据的种类和关系，为每个 Field 确定合适的类型，然后通过 WEEGLOO MCP 创建 Content Type。

工作完成后，在 WEEGLOO 内容工作室的 Content Type 页面可以看到，新创建了两个 Content Type：一个表示 API，一个表示端点。API Content Type 中包含名称、标语、介绍这样的 Field，端点 Content Type 中除了 HTTP 方法、路径、摘要、说明之外，还包含一个用来指明它属于哪个 API 的引用（Reference）Field。

这样定义好 Content Type 之后，就可以基于这一结构着手加载实际数据了。关于 Content Type 的详细内容，参见 Content 建模。

创建内容

Content Type 只是定义了数据的格式，它本身并不包含数据。在这一步，我们基于前面定义的 Content Type，把原本写在页面代码里的实际数据迁移为 Content。

像下面这样向 LLM 智能体发出请求，它就会分析代码中的数据，创建符合 Content Type 的 Content，并连同发布一起处理。

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through project again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too
so they're ready to be served.

收到请求的 LLM 智能体会重新分析代码，把数据按项拆分，然后通过 WEEGLOO MCP 依次登记 API 信息和各个端点信息。登记好的 Content 会一并发布，以便从外部进行查询。

工作完成后，在 WEEGLOO 内容工作室的 Content 列表中可以看到，API 信息和端点信息都已处于发布状态被登记进来。从这时起，即使不直接修改页面代码，也可以通过内容工作室或 LLM 智能体自由地修改数据。

关于 Content 的创建与发布的详细内容，参见 Content 创建与发布。

CDA 接入

数据也准备好之后，这一次我们修改代码，让页面不再使用直接写在代码里的数据，而是通过 WEEGLOO 的 CDA 来获取数据。CDA 是一个只读 API，用于让外部服务查询已发布的 Content，它让网页或移动应用能够直接获取并使用 WEEGLOO 的数据。

这项工作同样只需像下面这样向 LLM 智能体发出请求即可自动完成。

Okay, almost there. The content's all in Weegloo and published, so now
let's hook the page up to actually use it.
 
Could you update project so that instead of having all that data
hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before,
just pulling from the API now.

收到请求的 LLM 智能体会清除原本嵌在代码里的静态数据，在那个位置填入调用 CDA、并把响应数据反映到画面上的代码。原本放端点信息的地方，会换成查询端点 Content 列表的 CDA 调用；原本放 API 信息的地方，会换成单条查询 API Content 的调用。

把改好的页面在本地运行起来，再查看浏览器开发者工具的 Network 标签页，可以确认页面加载时确实向 WEEGLOO 的 CDA 发出了请求并收到了响应。关于 CDA 的详细内容，参见 Content Delivery API。

网站托管

最后一步，是把至此做好的页面对外发布。WEEGLOO 提供 Web Hosting 功能，可以直接托管页面。借助它，无需自己搭建额外的托管基础设施，就能把完成的页面发布为任何人都可以访问的状态。

像下面这样向 LLM 智能体发出请求。

Last thing — let's get this live.
 
Could you set up a WebHosting in Weegloo for this project and deploy the
page to it?

收到请求的 LLM 智能体会把页面的构建产物上传到 Web Hosting，并通过自动分配的子域名，把页面部署为可从外部访问的状态。

部署完成后，就可以通过分配到的子域名地址从任何地方访问该页面。从这时起，只要在 WEEGLOO 内容工作室中修改 Content，无需另行构建或重新部署，改动的内容就会立刻反映到线上站点。新增端点、修改既有端点的说明等 API 文档运营中经常发生的工作，也都可以在不改代码的情况下完成。

如果以后在运营阶段想使用自己的域名，可以在 WEEGLOO 内容工作室中绑定 Custom Domain。关于 Web Hosting 和 Custom Domain 的详细内容，参见 网站部署。

至此，我们从一张白纸开始，仅凭 LLM 智能体和 WEEGLOO 就完成了设计与实现、内容管理、部署的全过程。同样的流程也可以原样应用于更复杂的站点，在运营过程中新增 Content Type 或增加 Content 的数量，也都可以用同样的方式自然地继续下去。