GPT-6那阵子刚出的时候我的技术群基本被刷屏了。有人拿它画电路图有人拿它写小脚本我最关心的是它到底能不能帮我把一个网站从零搭起来。试了一个周末结论是可以而且整个流程比我想象中顺很多。这篇文章就是把我从“装环境”到“网站跑起来”的完整过程记录下来包含具体的安装步骤、提示词写法、项目结构、调试方法也把这段时间踩过的坑全都摊开讲一遍。适合想用AI做网站但还没动手的初学者也适合想快速评估GPT-6实际能力的开发者。先说明一下我的路线用GPT-6辅助实现一个带表单提交的访客留言板。前端用纯HTMLCSSJavaScript后端用Node.jsExpress数据用SQLite存本地。为什么选这个方案因为它足够小、边界清晰能完整体验从零到可用的全过程又不会因为技术栈太复杂而把精力浪费在环境问题上。下面按实际操作顺序展开。1. 为什么是GPT-6这次AI做网站到底强在哪1.1 GPT-6能做什么GPT-6这类工具的本质是一个能“读需求、出代码、看报错、改文件”的工程助手它不再只是对话框里补全代码而是具备理解项目上下文的能力。你告诉它想做一个作品展示网站它会主动拆分功能模块首页、列表页、详情页、后台管理再把每个模块对应的文件路径、接口定义、数据库字段全部列出来。这跟以前那种“帮我写个登录页面”的单点问答完全不同它是在给一整个技术方案。我拿它试过一个具体的例子要求它生成一个带表单提交的访客留言网站。它给出的文件结构包括package.json、server.js、public/index.html、public/style.css、public/app.js。这几样东西组合起来就是一个前后端都能跑的最小产品。过去我自己写这套东西前后大概要两个多小时用GPT-6辅助十来分钟就把第一版代码弄出来了后面主要花时间在调试和改细节上。1.2 什么样的需求适合让GPT-6来做适合做的需求有几类内容展示型网站、个人作品集、小型工具页面、带表单的留言板、内部管理系统原型、博客系统初版。这些需求边界清晰、交互不复杂、数据量小AI生成代码的成功率很高。不太适合的也有几类涉及复杂权限控制、高并发、支付级安全、特殊算法或硬件交互的系统。这类项目不确定性高AI生成的内容只能当参考不能不做审查直接上线。我的建议很直接第一次用GPT-6做网站就挑一个“自己完全知道长什么样”的小项目。因为你能判断它生成得对不对也更容易在出错时把问题描述清楚。如果上来就做电商全栈环境配三天、报错看三页很容易丧失信心。1.3 做网站的整体思路用GPT-6做网站我的路线基本固定成四步。第一步把需求讲清楚让GPT-6输出项目整体结构和技术选型。第二步本地把开发环境装好包括Node.js运行环境、Git以及命令行AI工具。第三步让GPT-6生成前后端代码保存到本地项目目录。第四步启动服务联调把报错丢回给GPT-6继续修。这四步走通之后你的网站就成为一个“能跑、能改、能扩展”的本地项目。后续想部署上线再补服务器、域名和数据库那套东西。这个思路能避免两个常见误区一是直接把AI生成的一堆代码原封不动拿去上线二是把所有活都推给AI连基础环境都不会搭。GPT-6是副驾驶方向盘还得在自己手里。2. 安装环节把本地开发环境一次配好2.1 安装Node.js运行环境做网站项目Node.js基本是绕不开的第一块基石。前端项目的依赖管理、后端接口的启动运行都靠它。我建议安装LTS长期支持版本别追最新的Current版稳定压倒一切很多第三方包对新版本Node的适配还没跟上。Windows上安装的要点有这么几个。去Node.js官网下载安装包认准LTS字样安装过程全默认即可不用改路径。装完之后打开终端在Windows下是PowerShell或CMD输入node -v能显示版本号就说明成功了再输入npm -v确认包管理器也正常。两个版本号都出来之后建议顺手执行一句话npm config set registry https://registry.npmmirror.com这句话的作用是把npm的下载源切换为国内公共源后续执行npm install装依赖时速度会快很多。这一步属于常规开发配置不涉及任何额外操作放心用。2.2 安装Git并完成基础配置Git在AI辅助开发网站的过程中承担两个任务一是配合命令行AI工具读取和修改代码文件Git能帮你追踪每一次改动二是当你把项目放到远程代码托管平台时Git是唯一的提交通道。安装Git同样简单官方提供Windows安装包基本一路Next。唯一值得注意的选项是默认编辑器保持默认的vim就行或者改成VS Code避免第一次提交时卡在不熟悉的编辑器里。装完先做全局配置在终端里执行git config --global user.name 你的名字 git config --global user.email 你的邮箱这两条配置不写后面commit的时候Git会一直报错提醒你补个人信息。我还建议执行git config --global init.defaultBranch main把默认分支名从master改成main和现在主流平台的默认分支保持一致。SSH密钥这类东西可以等真正需要推送远程仓库时再生成刚开始本地捣鼓没必要。2.3 安装命令行AI工具并完成登录现在GPT-6除了网页版也提供了命令行工具例如Codex CLI。这类工具的核心价值在于你可以在终端里通过对话直接操作项目文件而不是打开浏览器复制粘贴代码。安装步骤很直接。先确认Node.js已经装好命令行工具大多依赖它。然后在终端执行npm install -g openai/codex如果权限不够macOS或Linux下加sudoWindows不需要。执行完输入codex --version验证安装。接着执行codex login会在浏览器里完成登录授权。第一次登录之后工具会提示你选择默认模型选GPT-6即可。之后你在项目目录里输入codex就能直接以对话方式让AI读写当前目录下的文件。做到这一步开发环境已经具备“命令齐全、工具在线”的状态。我习惯再新建一个空目录输入codex问一句“你能在这个目录里做什么”确认它能识别当前项目路径再开始干正事。2.4 验证环境是否可用环境装完不等于能用我一般会跑一遍完整验证流程。新建一个临时目录依次执行node -v、npm -v、git --version、codex --version四个命令都有输出才算环境就绪。顺便检查一下npm下载源是否生效执行npm config get registry看到返回的国内公共源地址就OK。如果你还想确认Git配置生效执行git config --global --list能看到用户名和邮箱就说明配置写入成功。这一步别嫌麻烦。我遇到过很多朋友环境没验证就直接开始生成代码结果第一行命令就报“不是内部或外部命令”白白浪费半小时。花五分钟验证后面一路顺畅。3. 从需求到代码用GPT-6生成网站的完整实操3.1 把需求说清楚提示词怎么组织很多人的第一步就废在提示词上。你直接说“帮我做一个网站”GPT-6会给你一个极其空泛的回应因为你没有告诉它边界在哪里。我总结了一套把需求说清楚的四段式。项目定位一句话例如“一个访客留言板网站”。目标用户与核心功能例如“访客可以浏览历史留言填写昵称和内容后提交”。技术栈约束例如“前端用原生HTMLCSSJavaScript后端用Node.jsExpress数据用SQLite存储”。页面清单与交互描述例如“首页展示留言列表下方是提交表单新留言提交后显示在列表顶部”。把这段话发给GPT-6它返回的就不是空泛的建议而是一套结构化的技术方案。一个可以照抄的提示词示例我想做一个访客留言板网站。访客在首页能看到历史留言在表单里填写昵称和内容后提交新留言即时显示在列表顶部。技术栈要求前端用纯HTMLCSSJavaScript后端用Node.jsExpress数据用SQLite存储所有代码放在一个项目文件夹里。请先给出项目文件结构再逐个生成每个文件的内容。3.2 生成项目骨架与核心页面GPT-6收到上面这段提示词后给出的文件结构非常清晰project/ ├── package.json ├── server.js ├── public/ │ ├── index.html │ ├── style.css │ └── app.js它还会在package.json里预置express和sqlite3两个依赖。这样你只需要在项目目录执行npm install所有依赖就齐了。接下来就是让GPT-6逐一生成文件内容。我习惯用命令行工具直接让它写它会自动创建目录和文件。网页版也没问题把内容复制到对应文件即可。生成完index.html和style.css后你可以先用浏览器直接打开index.html看看静态效果。这时候页面还没有数据因为接口还没跑起来。这一步的目的是确认视觉样式是否符合预期比如卡片间距、字体大小、按钮颜色。不满意就截图丢回给GPT-6修改改样式这种事GPT-6非常擅长几乎一次到位。3.3 后端接口与数据库怎么落地前后端开发时最容易被卡住的是接口。GPT-6生成的server.js里通常会包含三部分静态文件托管把public目录暴露给浏览器接口定义处理留言的查询和新增数据库操作用SQLite存储留言记录。我让它生成的接口代码大约五十行核心逻辑长这样app.get(/api/messages, (req, res) { const rows db.prepare(SELECT * FROM messages ORDER BY created_at DESC).all(); res.json(rows); }); app.post(/api/messages, (req, res) { const { nickname, content } req.body; db.prepare(INSERT INTO messages (nickname, content) VALUES (?, ?)).run(nickname, content); res.status(201).json({ success: true }); });这里有两个容易忽略的细节。第一POST接口必须添加app.use(express.json())中间件否则req.body永远是空对象接口会一直报错。第二SQLite的建表语句建议直接写在server.js开头用CREATE TABLE IF NOT EXISTS这样服务启动时自动建表不会因为表不存在而报错。GPT-6生成的内容里这两点通常都覆盖到了说明它在工程细节上确实有经验。但你拿到AI生成代码时还是要自己检查一遍这两个位置毕竟AI偶尔也会漏。3.4 用Git记录第一个版本所有核心文件生成之后我建议立刻做一次Git提交。这一步很多人会跳过觉得项目还没跑通没必要但我吃过亏——AI后续修改代码时偶尔会把原本好端端的功能改坏有Git就能随时回退到可运行版本。在项目目录执行git init git add . git commit -m feat: GPT-6生成的留言板第一版看到main分支上有一次提交记录心里就踏实了。后面每次功能稳定都commit一次形成版本时间线。这样你还能对比AI改动前后的差异理解它到底改了什么。4. 把代码跑起来本地调试与联调4.1 启动后端服务的步骤与端口选择项目代码全部就位后打开终端进入项目目录依次执行npm install node server.js如果看到类似Server running at http://localhost:3000的输出说明后端已经起来了。此时用浏览器访问这个地址页面会正常显示数据也能从数据库里读取。关于端口我建议保留3000这种默认值不要随手改成别的。后续如果你同时起多个服务再考虑换端口。真正需要关注的是端口占用问题如果启动时提示EADDRINUSE说明3000端口已经被其他程序占用了。最简单的处理方式是把server.js顶部的port常量改成3001再重新执行node server.js。4.2 前端页面与接口联调静态页面和接口单独都能跑不代表联起来没问题。前端app.js里通常会有一段fetch代码用来从接口拿数据fetch(/api/messages) .then(res res.json()) .then(data renderMessages(data));这里有个关键点fetch的路径必须写/api/messages不能写成完整的http://localhost:3000/api/messages。因为你的页面是后端托管在同一个端口下的写完整地址反而会触发跨域问题。如果前端是单独开的另一个端口比如Vite默认的5173那就必须配置跨域头或者代理。我这个项目因为前端页面由Express托管天然同源省掉了跨域的麻烦。这也是我特意选纯HTMLCSSJS的原因少一层跨域配置新手少一堆报错。4.3 让它变得“能用”的几个关键改动第一版跑通之后网站还不能算真正“能用”因为很多交互细节还是裸奔状态。我总结几个让网站从“能跑”变成“好用”的改动思路。加空状态。当数据库里没有留言时页面显示“还没有留言来抢沙发”而不是一片空白。加成功反馈。表单提交成功后清空输入框并在页面顶部弹出一行“提交成功”。加时间显示。每条留言下方显示发布日期格式统一为“YYYY-MM-DD HH:mm”。加基础校验。昵称和内容都为空时前端直接拦截后端再校验一次双保险。这些需求逐个丢给GPT-6就行它每次改动都只涉及一个文件风险很小。改完记得重启node服务再刷新浏览器才能看到效果。这里提醒一个小技巧Node.js没有热更新改完server.js必须重新执行node server.js否则改动不生效。前端文件则不用重启刷新浏览器就能看到。4.4 从本地项目到正式部署的衔接本地跑通之后很多人会问下一步怎么办。我的建议是先把项目打包再找一台云服务器部署。部署的基本套路是服务器上装好Node.js把项目文件上传上去执行npm install然后用node server.js启动服务再把80端口通过反向代理指向3000端口配上域名和HTTPS证书。这部分内容展开讲又是一篇长文这里只提醒一件事本地开发用的SQLite数据库文件部署到服务器后要注意备份。别把数据库文件随手放在项目根目录最好单独建一个data目录并加入Git忽略清单。这样每次部署代码不会覆盖数据库数据。5. 踩坑实录安装与开发中的常见问题排查5.1 安装阶段的高频错误这一节把实际操作中遇到的和身边朋友问过的典型问题整理成一张表方便你对着排查。问题现象原因解决方法npm不是内部或外部命令Node.js未安装或PATH未配置重装Node.js安装时勾选自动加入PATHnode -v有输出但npm -v报错Node.js安装损坏卸载后重装同一版本别混装新旧版本npm install极慢默认下载源网络不稳定执行npm config set registry https://registry.npmmirror.com切换国内公共源codex命令找不到npm全局安装路径不在PATH中Windows下用npx codex代替或重装Node.jsGit commit时提示需要配置用户名邮箱未设置全局user.name和user.email执行git config --global两条命令启动服务提示EADDRINUSE端口被其他程序占用修改server.js端口号或查找占用进程处理5.2 代码生成之后跑不起来的排查顺序AI生成的代码跑不起来八成集中在三个原因里。我的排查顺序是固定的。第一步看终端报错。不要直接截一段乱码给GPT-6先自己读一遍把报错信息中最关键的一句话复制给它。第二步检查依赖是否安装。很多报错来自package.json里声明的依赖没装上重新执行npm install看到added x packages才算完。第三步检查数据库文件。SQLite如果是从零开始的确认服务启动时创建了数据库文件如果是旧版本项目确认表结构和代码里的字段对得上。按照这个顺序大多数问题五分钟内能定位。我自己踩过一次最大的坑是GPT-6生成的代码里用了better-sqlite3这个库在Windows上需要编译安装时容易失败。后来我让GPT-6改用sqlite3并添加了预编译选项问题才解决。如果你也遇到native模块编译失败优先让GPT-6换一个纯JS的数据库方案省去编译环节。5.3 给新手的五个实操建议从零到一带大家走完整个流程之后我想认真给几条建议。第一从最小项目开始。第一次用GPT-6做网站别一上来就做电商系统。一个留言板、一个作品集足够你把整条链路跑通。第二每次只让AI做一次改动。把“帮我加一个删除功能顺便改一下样式”拆成两条指令出错了也容易定位。第三一定要学会看终端报错。AI能帮你修错但它需要你提供准确的报错信息。把“它不行”变成“它报了这个错误”效率提升立竿见影。第四项目目录保持简洁。所有项目文件放一个文件夹数据库文件单独放data目录别把代码和乱七八糟的截图混在一起。第五及时用Git做版本快照。每次功能能跑通就commit一次。AI改代码偶尔会把好端端的功能改坏有Git你随时能回退。我在实际做这个留言板项目时最深的体会是GPT-6最大的价值不是帮你写代码而是帮你把“模糊的想法”翻译成“具体的工程方案”。它让我从打开编辑器到看到完整页面用一个下午就走完了以前需要好几天才能走完的路。当然它也会犯错有时给出的代码会漏掉中间件有时生成的SQL语句字段对不上但这些错误恰恰是你学习的机会。遇到报错读报错丢给AI看它怎么改慢慢地你对整个技术栈的理解会越来越深。最后提醒一句目前这套方案在本地跑通完全没有问题如果要部署上线记得把数据库换成服务器上可用的方案把端口、域名、HTTPS这些也提上日程。先本地跑通再谈上线这条路不会错。