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

AI零代码搭建个人网站.png

最近,我把自己的个人网站搭建起来了。

目前由三大板块组成:文章、字典(整理的设计、AI 网站资源)、我的工具(文章多平台一键同步)。

Drawing 0

网址:https://www.chengxins.com/

服务器用的甲骨文免费的 VPS,域名在Google Workspace上花了 11 元买的。

甲骨文注册和购买域名,前面都有完整的文章分享,没看的建议去看看。

整个成本: 20 刀 Plus 会员 + 11 元域名。

后期没啥大开发需求,也就一个域名的成本了。

一、为什么做个人网站

想法特别简单:我想有一个属于自己的地方。

发在公众号上的文章会被举报、被和谐。

这是最近被系统 ban 掉的几篇文章。

Drawing 1

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

Drawing 2

产品也提供再次开启的权益,但没有必要了。

虽然每年写的文章不多,但今年一篇文章都没有同步到语雀上去了。

发在其他社交平台的内容,都有可能被 ban。

所以,就这么简单。

二、进入开发

开发网站之前,先解决服务器、域名。

这两点满足了,就可以用 AI 开整了。

第一步、用 Claude 设计

我一开始只说了我的需求,并没有说网站风格什么的。

想着先上线试试,然后就用这版直接开发了。

Drawing 3

后面发现一些细节问题,不好调整,包括整体的设计风格、颜色样式啥的。

就又找 Claude 设计,这次是重构的需求。

先让他按设计风格定好设计规范,再根据设计规范出设计图。

Drawing 4

规范、设计整体都是一次就出来了,很稳。

大家现在看到的页面都是后期用 Codex 在此基础上调整、新增、修改的。

第二步、 用Codex 开发

先跟 Codex 确定技术方案

前端框架:Next.js + React
开发语言:TypeScript
UI 框架:Tailwind CSS + shadcn/ui
GitHub:代码管理
Cloudflare:域名托管、存储、DNS 等。
SSH:Termius

服务器,域名如何托管 CF 等问题,直接问 Codex,然后跟着操作就行。

比如如何让服务器跑起来。

Drawing 5

然后把 Claude 产品设计那个文档发给 Codex,让他直接进入开发。

我是先让他改前端展示的页面设计,等这块确定了。

再用 Claude 按照设计规范出后台的设计,再让 Codex 按照新的设计调整后台的设计。

这是最新做的一个开屏效果,完全自嗨型。

Drawing 6

最后

一个不懂技术的设计,也可以快速开发出自己的网站了。

不过,要不是 A 畜封号太严重了,可能也不会选择 Codex。

整个体验下来,Codex 额度太不禁折腾了,也不够聪明。

往往调整一个问题,同一个页面可以共用组件,也需要反复来回拉扯。

要不是 Tibo 这一个月经常的额度重置,光一个 20 刀 Plus 完全不够看。

重置、Chat 都要成为历史性的功能了。