不懂代码,花了不到200元,我用AI搭好了自己的个人网站

最近,我把自己的个人网站搭建起来了。
目前由三大板块组成:文章、字典(整理的设计、AI 网站资源)、我的工具(文章多平台一键同步)。

网址:https://www.chengxins.com/
服务器用的甲骨文免费的 VPS,域名在Google Workspace上花了 11 元买的。
甲骨文注册和购买域名,前面都有完整的文章分享,没看的建议去看看。
整个成本: 20 刀 Plus 会员 + 11 元域名。
后期没啥大开发需求,也就一个域名的成本了。
一、为什么做个人网站
想法特别简单:我想有一个属于自己的地方。
发在公众号上的文章会被举报、被和谐。
这是最近被系统 ban 掉的几篇文章。

在语雀公开的文章,到时间会被系统自动关闭,原因是我不是会员。

产品也提供再次开启的权益,但没有必要了。
虽然每年写的文章不多,但今年一篇文章都没有同步到语雀上去了。
发在其他社交平台的内容,都有可能被 ban。
所以,就这么简单。
二、进入开发
开发网站之前,先解决服务器、域名。
这两点满足了,就可以用 AI 开整了。
第一步、用 Claude 设计
我一开始只说了我的需求,并没有说网站风格什么的。
想着先上线试试,然后就用这版直接开发了。

后面发现一些细节问题,不好调整,包括整体的设计风格、颜色样式啥的。
就又找 Claude 设计,这次是重构的需求。
先让他按设计风格定好设计规范,再根据设计规范出设计图。

规范、设计整体都是一次就出来了,很稳。
大家现在看到的页面都是后期用 Codex 在此基础上调整、新增、修改的。
第二步、 用Codex 开发
先跟 Codex 确定技术方案
前端框架:Next.js + React
开发语言:TypeScript
UI 框架:Tailwind CSS + shadcn/ui
GitHub:代码管理
Cloudflare:域名托管、存储、DNS 等。
SSH:Termius
服务器,域名如何托管 CF 等问题,直接问 Codex,然后跟着操作就行。
比如如何让服务器跑起来。

然后把 Claude 产品设计那个文档发给 Codex,让他直接进入开发。
我是先让他改前端展示的页面设计,等这块确定了。
再用 Claude 按照设计规范出后台的设计,再让 Codex 按照新的设计调整后台的设计。
这是最新做的一个开屏效果,完全自嗨型。

最后
一个不懂技术的设计,也可以快速开发出自己的网站了。
不过,要不是 A 畜封号太严重了,可能也不会选择 Codex。
整个体验下来,Codex 额度太不禁折腾了,也不够聪明。
往往调整一个问题,同一个页面可以共用组件,也需要反复来回拉扯。
要不是 Tibo 这一个月经常的额度重置,光一个 20 刀 Plus 完全不够看。
重置、Chat 都要成为历史性的功能了。