昨天我用 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.