网站效果演示视频【【教程】如何用Ai快速搭建带管理后台的CMS个人网站】(本文纯手打无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文件中避免每次都要写。我的后台布局Block Field给大家展示一下我的后台布局只说关键的部分先说CollectionsPages准备放一些普通页面比如隐私政策啥的Posts管理所有博客Projects管理所有作品再说Page Configuration其实这里就是管理网站的4个页面首页、博客页、项目页、关于页。最后Website Settings这里是全局的内容页头跟页脚也就是每一页都会有的。为什么把Page Configuration独立出来而不是放到Pages里面因为这是Ai跟我推荐的。说这几个是独立固定的页面最好独立出来pages里一般是普通页面。部署的坑本地开发好后想要部署到云我这里选择的是部署到vercel。总共是三块需要部署代码、数据库、对象存储。然后部署过程中遇到问题的话可以让Ai连接vercel和数据库的mcp就行了让Ai来解决。代码很方便了用git就行基本不会出错。数据库的话最好本机开发的时候就用vercel的数据库可以新建一个数据库分支不要用跟vercel生产环境一样的数据库分支后面再让Ai来帮忙迁移数据。然后注意一下数据迁移可能有延迟不会立马生效。对象存储的话可以一开始就直接使用vercel的blob这样就不用迁移了。
