昨天我用 AI 做的一个网站上线了,全程一行代码没写,从产品设计、开发、部署,全由 Agent 搞定。
我用的工具是 Codex + Claude Code,模型用了 GPT 5.5、GLM 5、Claude Opus 4.6。
别觉得复杂,其实零基础都可以上手。
接下来,我会教你如何用 AI 搭建一个可上线的个人网站,让你也能拥有自己的门户。
在正式开始之前,我还是想感叹一下。
因为 12 年前我就自己搭建过一个个人博客网站,那时候还是纯手写代码。
这个项目一直在我的 Git 上,当时我还给它申请了一个域名。
![]()
后来公众号来了,这个网站也就慢慢荒废了。
没想到的是,12 年后我竟然又做了一个网站,而且是用 AI 的方式。
先看下效果吧。
![]()
这是一个关于 AI 个体户计划的网站,里面包含了项目介绍和案例展示,后期我打算把它做成一个「AI OPC」门户。
同时,我也给它注册了一个域名:tangren.org.cn
目前网站主要有几个大模块,除了你们看到的首页之外,还有我的个人成长履历介绍。
![]()
以及,关于我的 AI 个体户训练营的介绍。
![]()
还有就是具体交付价值和收获模块。
![]()
最后就是一些案例展示。
![]()
接下来,我就从零开始分成几个步骤教你们如何用 AI 搭建起这个网站。
从大步骤来看,主要分成这么几步。
第一步,定义需求、明确风格、搭建结构。
第二步,Agent 开发、调试。
第三步,服务器部署、注册域名、备案上线。
这个过程,其实跟我们做产品是一样的,只不过在 AI 的协助下,我一个人既是产品经理、也是设计师、同时还是程序员和运维。
1、定义需求、明确风格、搭建结构
很多人做出来的网站、小程序、App 效果不好的原因往往就是这一步,再强的 AI,也需要告诉它该做什么。
因此,我是把自己的需求先写在一个飞书文档里,即 AI 个体户计划是什么、面向谁解决什么问题、具体交付是什么等等。
在这一步,我就先打开 Codex 新建了一个「项目」,其实就是对应你本地电脑的一个文件夹,我给这个文件夹起名为「AI_OPC」。
然后,我先用比较模糊的方式提出一个想法,看 AI 准备怎么做。
![]()
另外,我希望这个网站有一个主题风格,颜色就用我自己的品牌色,就是你们经常在我文章里看到的那个蓝色。
同样,我把提前准备好的文档和注意色色值发给它。
![]()
经过它的分析和执行后,网站的初版就被搭建出来了,可以直接在本地打开浏览器预览。
![]()
2、Agent 开发、调试
做出来的第一版肯定是不满意的,因为你脑海里想的东西和它做出来的一定会有差异。
所以,接下来要做的就是 Agent 开发和调试过程。
注意,这个调整的过程并不是直接去修改代码,而是用大白话告诉 AI 你的想法。
比如,我想把 logo 那里放上我的头像,同时修改一些文案,直接在对话框里跟 AI 对话即可。
![]()
这个过程,就像你指挥一个设计师和一个程序员干活一样,关键是他们还没脾气。
只要你能描述清晰,AI 基本都能改到位。即便你说的不是很清楚,AI 也会帮你改个八九不离十。
像下面这种,就是我也不知道该怎么设计好,于是交给它去发挥。
![]()
如果你觉得文字描述费劲,甚至可以直接把它开发好的页面截图发给它并标注,然后用文字跟它描述该怎么修改。
![]()
开发过程中,我的 Codex 额度用完了,所以我又中途切换到 Claude Code 去开发。
Claude Code 也是可以直接打开我在 Codex 新建好的项目的,这样就相当于 Codex 和 Claude Code 在同一个工作区干活。
![]()
如果你还不知道怎么用 Claude Code 的,可以看下我之前的文章,我有写过一篇保姆级教程。
我这里用的是 VS Code 编辑器结合 Claude Code,模型用的 GLM 5,我觉得开发前端页面够用了。
另外,中途我还切换到 Opus 4.6 去优化过前端设计,效果还是好不少。
当然,你可以不用像我一样切换两个工具去用,直接在一个 Agent 框架下干完所有的活儿也是一样的。
3、服务器部署、注册域名、备案上线
如果网站调试修改完毕了,你自己也满意了,接下来就需要把它部署到公网上,也就是我们说的发布上线。
在这个过程中,你需要提前准备几个东西,一个是云服务器、一个是域名、一个是备案。
不过,如果你的服务器是在海外,ICP备案这一步就可以省去,我用的就是腾讯云在硅谷的服务器。
如果你的服务器是在国内,ICP备案这一步也不复杂,在阿里云和腾讯云上都可以有服务操作。
我用的服务器就是之前部署 OpenClaw 的那台腾讯云服务器,我也同样写过一篇教程的。
![]()
域名是我是在阿里云上注册的,注意,注册域名是要钱的,便宜的一年也就三四十块钱。
![]()
这两个东西准备好之后,你就可以让你的 Agent 继续帮你干活了。
没你们想的那么复杂,整个流程都可以让 Agent 自己完成,我的第一步就是跟他说个需求。
![]()
然后,它会告诉你需要提供什么信息,并且把整个部署过程需要完成的步骤都列出来。
![]()
上面提到的公网 IP 地址,其实就是云服务器对应的 IP 地址,在腾讯云后台可以直接看到。
如果你用的是阿里云,逻辑也是一样的,只是页面操作有些区别。
![]()
还需要一个 SSH 密钥,这是用来和你云服务器进行通信的钥匙,也可以在腾讯云上新建配置一个。
![]()
把这些信息全部发给 Agent,它自己会完成接下来的事情。
![]()
这个过程中 Agent 可能会提示你需要开启服务器的端口,通常是 80 和 443 端口,你可以在服务器后台防火墙设置里添加这两个端口即可。
![]()
还有一个关键步骤,就是配置 DNS。
所谓 DNS,简单理解就是让你的域名能直接对应到你的 IP 地址,要不然在浏览器输入网址是打不开你的页面的。
![]()
因为我的域名是在阿里云注册的,所以直接在阿里云 DNS 解析后台操作即可。
进入阿里云工作台,找到云解析 DNS,在自己的域名下新建两条记录。其实这个过程,Agent 都会教你怎么做。
![]()
全部操作完成后,网站就成功部署到服务器上了。
![]()
整个过程,我没写一行代码,就连看起来很复杂的服务器配置其实也是在 Agent 的指导下完成的。
如果你看到这觉得自己还不会做,其实大可上手试试,因为你过程中的那些问题 Agent 都会告诉你怎么解决。
现在,我的几个 AI 员工不仅可以帮我做内容创作,也能帮我出设计图和海报,还能帮我写代码做产品。
接下来,我会再搞几个 Agent 并不断丰富他们的能力,还准备搞个小程序产品出来。
下周我也准备开一场公开直播,跟你们聊聊我这个 AI 个体户 OPC 到底是如何做的。
距离上次公开直播,已经过去一年了。
想参加的,可以提前预约。
················· 唐韧出品 ·················
用AI思维发现下一个机会
安可时刻
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.