用Ai快速搭建带管理后台的CMS个人网站：Payload建站与Vercel部署经验分享

(本文纯手打，无Ai生成，放心食用)

一直想要建个站来着，今天终于做成了。以后在这里写一些文章，发布一些自己的作品，也相当于自己的一张个人名片吧。

那么这篇文章就简单说一下建站的过程吧，不说详细的操作步骤，因为现在Ai都能解决，只说开发过程中可能遇到的一些问题。我一开始会以为很难的，后面发现其实很简单，完全是自己束手束脚了，Ai的能力太强了。

为什么基于Payload框架开发？

我是想快速建站，所以我选择了在框架上进行开发，而不是从零开发，那么我选择的框架是Payload。为什么选择Payload呢，因为我们建站之后，总需要管理我们的网站内容的，我当时是想有个管理后台，能够很方便的编辑我的内容，那么这种带管理后台的叫CMS。另一种叫MDX，这种没有管理后台，它编辑网站内容是通过修改项目文件的方式，那么我觉得这种方式不够直观，也不够方便，所以我选择了CMS，在CMS里面又选择了Ai推荐的Payload。

那么选择Payload的原因是，以后我可能会对我的网站做一些扩展，比如说在网站加一个Ai助手，那么这样的话，基于NextJS的Payload就能比较好做扩展了。

选好框架Payload之后，我们将其部署到本地运行起来就行了。刚进入这个管理后台的时候，可能会有点懵，不知道每个按钮干嘛的，不过没关系，我们可以直接让Ai改功能，然后观察管理后台的变化，慢慢就了解了。那我们先来尝试做一下首页吧

不知道首页做成什么样？

这个没关系，虽然不知道要做成什么样，不知道放些什么内容，也不知道页面如何设计，都没关系。我们可以直接跟Ai说“我现在要制作个人网站的首页，不过我不知道首页要做成什么样，不知道首页放些什么内容好”，然后Ai就会给出一个答案了，然后我们再基于这个答案去继续聊，基本就能聊出来我们想要的样子了。

担心Ai开发不好？管理后台跟前端不同步？

我一开始也有这个顾虑，但发现完全是我小瞧Ai了。其实这个网站的前端想要做成什么样，Ai都能做，并且能够生成相应的后台去更改它，并且是网站每处都可以在后台编辑修改。当然仅限内容哈，不包括样式。

让Ai开发的过程中可能有个问题，就是前端已经改了，但是在管理后台中却没有变化，在后台中没有相应的配置来修改前端。这个时候，我们可以跟Ai说“将此次前端的改动纳入到后台管理”，这条规则最好加入到AGENTS.md文件中，避免每次都要写。

我的后台布局

给大家展示一下我的后台布局，只说关键的部分

先说Collections：Pages准备放一些普通页面，比如隐私政策啥的，Posts管理所有博客，Projects管理所有作品

再说Page Configuration：其实这里就是管理网站的4个页面，首页、博客页、项目页、关于页。

最后Website Settings：这里是全局的内容，页头跟页脚，也就是每一页都会有的。

为什么把Page Configuration独立出来，而不是放到Pages里面，因为这是Ai跟我推荐的。说这几个是独立固定的页面，最好独立出来，pages里一般是普通页面。

部署的坑

本地开发好后想要部署到云，我这里选择的是部署到vercel。总共是三块需要部署：代码、数据库、对象存储。然后部署过程中遇到问题的话，可以让Ai连接vercel和数据库的mcp就行了，让Ai来解决。

代码很方便了，用git就行，基本不会出错。

数据库的话，最好本机开发的时候就用vercel的数据库，可以新建一个数据库分支，不要用跟vercel生产环境一样的数据库分支，后面再让Ai来帮忙迁移数据。然后注意一下，数据迁移可能有延迟，不会立马生效。

对象存储的话，可以一开始就直接使用vercel的blob，这样就不用迁移了。