做网站这事儿在过去是“团队流水线”的活产品画原型、前端切页面、后端写接口、运维管服务器一整套折腾下来少说一两周。但现在不一样了AI 编程工具已经把门槛压到了“一个人一台电脑一个想法”的程度。这一篇我就拿GPT-6打底结合Codex CLI这类辅助编程工具完整走一遍从环境安装、Python/Git 配置、Codex 接入到最终把网站跑起来的全流程。目标很明确不是做一个“演示用的假页面”而是做一个真正能填数据、能编辑、能查询、能统计的可用网站。适合三类人看想用 AI 做副业/内部小工具的开发新手、被“只会写前端不会写后端”卡住的转行者以及想验证 GPT-6 到底能不能独当一面的技术爱好者。先说清楚我能给你什么可复现的安装步骤、每一步踩坑后的补救方案、完整的项目结构以及最后部署上线的思路。我用的案例是一个“客户信息管理系统CRM”因为它涵盖了表单、数据库、增删改查、搜索、统计这些网站最常见的功能模块。拿它练手做完之后换任何行业场景都能套。1. 总体思路为什么选“AI 辅助本地开发”而不是拖拽建站1.1 目标网站的功能定位很多人一上来就问“做什么网站赚钱”“做什么网站好看”实际都问错了。先定功能再谈技术。网站分两类展示型和工具型。展示型就是官网、博客、落地页用现成建站工具就行工具型则必须处理数据——用户输入、存储、修改、展示比如点餐系统、库存管理、预约登记、客户跟进。这一类用拖拽工具很难做利索因为业务逻辑一变模块之间就要重新牵连。我做客户管理系统就是这个道理它虽然小但五脏俱全。“新增客户”要写表单、“客户列表”要查询数据库、“编辑删除”要处理数据变更、“统计报表”要做聚合计算。这些功能组合在一起恰好覆盖了全世界 80% 的内部管理系统需求。1.2 为什么选 GPT-6 Codex CLI 这套组合GPT-6 本身是一个对话式大模型你可以在网页里问它“帮我写一段 Python 代码”。但实际操作中你会发现把代码从网页复制到本地文件再手动跑、再报错、再复制回去太割裂了。这时候就需要Codex CLI——它本质上是一个跑在终端里的 AI 工程师可以读取你电脑里的项目文件、代你执行命令、查看运行结果然后继续修正代码。它不是简单的代码补全插件而是一个能自己动手的编程代理。这套组合跟“在网页里拷代码”的区别在于Codex 能理解上下文。你让它“在客户列表页面加一个按行业筛选的下拉框”它会自己去翻模板文件、找到查询语句、改完再启动服务验证。这个“自主完成小闭环”的能力才是 GPT-6 时代做网站最值钱的地方。1.3 技术栈选择与架构规划我选 Python Flask SQLite HTML/CSS/JS有几个硬理由Python 上手成本最低而且安装教程最多遇到环境问题好查。Flask 足够轻一个 app.py 就能撑起整个后端不像 Django 那样有固定结构对 AI 生成来说反而更灵活。SQLite 是单文件数据库不需要单独安装数据库服务对新手最友好后期要换 MySQL 也只需要改一行连接串。HTML/CSS/JS 三件套是 AI 最擅长生成的风格美观度已经接近人类中级前端水平。整体架构就看这张表层次技术选型职责前端HTML CSS JavaScript页面展示、表单校验、交互反馈后端Python Flask路由控制、业务逻辑、数据校验数据库SQLitePython 内置 sqlite3客户数据持久化存储AI 辅助GPT-6 对话 Codex CLI代码生成、排错、批量修改这套架构的好处是每一个环节都可以单独调试。前端不行就只改模板文件后端接口出错就看路由函数数据库问题直接用命令查表。对新手来说问题能被“局部隔离”是最重要的——最怕的是所有东西耦合在一起报错都不知道该查哪里。2. 环境准备先把 Python、Git、编辑器装到能干活的状态2.1 Python 安装及环境变量配置这一步看着基础但至少三成的人栽在环境变量上。以 Windows 为例去官网下载Python 3.10 及以上版本的安装包注意安装界面最下方有一个“Add Python to PATH”复选框一定要勾上。这个选项的作用是让系统在命令行里能直接识别 python 这条命令不勾的话你后面输入 python 会提示“不是内部或外部命令”。装完后按下Win R输入cmd回车在命令行里验证python --version pip --version如果你能看到类似Python 3.12.x的输出说明环境没问题。如果提示找不到命令就手动到系统设置里把 Python 的安装目录和Scripts子目录加进Path 环境变量——SQLite 会在后面章节用到千万不能省。Mac 用户建议直接brew install pythonLinux 用户用apt install python3 python3-pip。注意Windows 上如果系统里同时装了微软商店版 Python 和官网版 Python会在命令行里出现版本混乱。建议只保留一个否则后面 pip 装包时会装到“错误的地球”上你根本找不到装哪了。2.2 Git 安装及基础配置含 SSH Key后端代码版本管理是生产习惯哪怕单人开发也要搞。Git 的安装没有技术含量Windows 装 Git for Windows 一路下一步就行。关键在于装完之后的初始化配置git config --global user.name 你的名字 git config --global user.email 你的邮箱 git config --global init.defaultBranch main如果你想把代码推到 GitHub 之类的托管平台建议顺手配一个 SSH Keyssh-keygen -t ed25519 -C 你的邮箱 cat ~/.ssh/id_ed25519.pub把cat输出的内容复制到代码托管平台的 SSH 公钥设置里。这样以后git push就不需要反复输密码了。我个人的习惯是每开始一个新项目先在本地git init并立刻做一次初始提交。这样 AI 工具在帮你改代码之后你能用git diff清楚看到它到底改了哪些文件——这是排查 AI 误操作最直接的手段。2.3 编辑器选型VS Code 安装与必装扩展编辑器我推荐 VS Code免费、插件生态好、终端集成度高。从官网下载安装包后按CtrlShiftX打开扩展面板装上这几样Python微软官方出品提供语法高亮、代码补全、调试支持。GitLens在编辑器里直观显示每行代码的提交记录和作者信息。Flask 模板格式化插件比如Jinja2 Snippets写 Flask 模板时非常有用。装完 VS Code 后按 Ctrl反引号打开内置终端。注意在终端右上角下拉框里选择Git Bash如果你用的是 Windows。Git Bash 的命令风格更贴近 Linux对后面所有命令行操作都更友好。2.4 Node.js 与 npm为什么建静态站也建议装虽然核心后端是 Python但我仍然建议把 Node.js 也装上。原因很现实很多现代前端工具比如代码格式化工具、CSS 自动补全、部分部署脚本都基于 npm 生态。你不需要深入学只要能执行npm install就够了。方法同样简单去官网下载 LTS 版本安装后在命令行验证node -v npm -v这里多一句嘴——安装顺序很重要。先装 Python再装 Git再装编辑器最后装 Node。因为 VS Code 和其他工具在首次启动时会自动探测系统里已有的语言环境顺序反了可能导致它没有正确识别 Python 解释器。3. Codex CLI 的安装与接入让终端里多一位 AI 队友3.1 什么是 Codex CLI它和网页对话有何不同如果 GPT-6 网页版是一个“你问我答的顾问”那 Codex CLI 就是“你布置任务、它主动干活的全职员工”。它直接运行在终端里能读取项目文件夹下的所有文件执行 shell 命令运行你的代码然后根据输出调整方案。你不需要自己动手复制代码——它替你写、替你保存。这种模式的好处是它能看到运行时报错。网页版常常出现“它写的代码你觉得没问题但本地一跑就报错”的情况因为网页版看不到你的实际运行环境。Codex 则能边跑边改综合能力更像一个初级开发者在给你打下手。3.2 安装 Codex CLI 的具体步骤前置条件是 Node.js 18 以上版本刚才已经装好。然后在终端里执行npm install -g openai/codex安装完成后先确认版本和帮助信息codex --version codex --help首次使用时需要认证。Codex 支持两种方式一种是登录已授权的账号另一种是用自己的 API 密钥。不管用哪种都需要保证当前终端可以正常访问代码托管与 AI 服务的官方接口这一前提必须满足。认证步骤通常在终端会弹出提示按提示操作即可整个流程大概一两分钟。注意如果你在较老的操作系统或精简版系统上安装失败大概率是 Node 版本过低。先跑node -v确认版本低于 18 就先升级 Node再来重装 Codex。不要硬着头皮继续环境不一致导致的报错最烧时间。3.3 Codex 的三种工作模式与实战初始化登录成功后在项目文件夹里初始化环境cd ~/mywebapp codex init这个命令会在项目里生成一个配置文件标记 Codex 可以访问哪些文件。接着你有三种工作模式可选一次问答模式直接codex 如何写一个 Flask 路由输出完就退出适合快速提问。持续会话模式直接运行codex进入交互终端连续对话让 AI 记住前面的任务进度。强烈建议用这种。批量任务模式把需求写成文本文件让 Codex 按文件逐一执行适合复杂项目分批处理。我个人常用的是持续会话模式。一上来先给一段“项目全局须知”比如“这是一个使用 Flask SQLite 的客户管理系统。用户数据存在 customers 表里字段有 name, phone, email, industry, status, remark, created_at。请确保所有操作都围绕这个结构展开。前端模板在 templates 目录静态文件在 static 目录。”这样它从一开始就带着项目全局认知去干生成的代码不会跑偏。4. 实操案例用 GPT-6 Codex 从零做一个客户管理系统4.1 定义需求清单与数据模型动手写代码之前先把需求用“能验收”的话说清楚。我这次列出的功能是首页展示客户列表按创建时间倒序排列。新增客户表单包含姓名、电话、邮箱、所属行业、客户状态、备注。编辑客户信息表单预填充当前数据。删除客户删除前二次确认。搜索功能按姓名或电话模糊匹配。仪表盘展示客户总数、本月新增数、行业分布。基础前端样式不需要复杂框架保证在手机浏览器上也能看。对应的数据库表结构设计为CREATE TABLE customers ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, phone TEXT, email TEXT, industry TEXT, status TEXT DEFAULT 潜在客户, remark TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );这一步非常关键。AI 写代码的能力再强它也猜不到你脑子里想的字段是什么。你不给它表和字段它就只能自由发挥最后做出来的跟你想要的完全不是一回事。所以我会先把数据模型喂给它再开始写业务逻辑。4.2 项目目录结构设计在敲第一个回车之前先手动建一个干净的目录结构。我推荐这样组织crm-system/ ├── app.py # Flask 主程序路由都在这里 ├── requirements.txt # Python 依赖清单 ├── init_db.py # 数据库初始化脚本 ├── static/ │ └── style.css # 全局样式 └── templates/ ├── base.html # 公共布局模板 ├── index.html # 客户列表页 ├── new_customer.html # 新增客户页 ├── edit_customer.html # 编辑客户页 └── dashboard.html # 统计仪表盘页这个结构是 Flask 的最小标准结构。它的好处是路由逻辑和页面模板完全分离。页面长得不好看去 templates 里改接口逻辑不对去 app.py 里查数据库结构变了单独改 init_db.py。分层清晰AI 改代码时不容易“动一发而牵全身”。4.3 实战对话让 AI 逐步生成后端代码接下来是重头戏。我在 Codex 持续会话里依次发指令每一步都验证结果第一轮先初始化数据库脚本codex 帮我写 init_db.py用 sqlite3 建一个 customers 表字段是 id、name、phone、email、industry、status、remark、created_at。如果表已经存在不要重复创建。运行python init_db.py然后用命令行确认表结构sqlite3 crm.db .tables .schema customers看到表结构正确后继续第二轮写 Flask 主程序。我给 AI 的指令是codex 基于这个库结构写 app.py。需要这些页面首页客户列表、新增客户 POST 表单、编辑客户页面、删除客户链接、搜索接口、统计仪表盘。模板路径用 templates/。使用 Flask 的 render_template 和 redirect。Codex 生成的代码可能会有几处不符合预期比如它自动加了登录功能我并不要或者删除使用的是 GET 请求而不是 POST 表单提交——这些都要逐条让它修正。删除操作用 GET 是个常见安全问题别人只要点击链接就会触发删除。我更正的方式是直接下指令codex 把删除操作改成用 POST 表单提交页面上用一个小表单包住删除按钮避免误触和 CSRF 风险。这种“逐轮纠偏”的节奏能保证 AI 产物接近可上线状态。如果你上来就甩一句“给我做一套 CRM”那你大概率会得到一套结构混乱、字段随机、根本跑不起来的代码——AI 真正的问题不是“不能干活”而是“没有人类把关的时候容易自由过度”。4.4 前端模板与交互细节优化后端稳定后再让 AI 去补前端。模板这块我抄了近路直接用 base.html 统一风格让所有页面继承同一个布局。Codex 只需在编辑页面里少写重复的head部分整个项目看起来就整齐很多。新增客户页的表单我让 AI 用 POST 表单校验。关键代码长这样form action{{ url_for(create_customer) }} methodPOST label姓名/label input typetext namename required label电话/label input typetext namephone label邮箱/label input typeemail nameemail label所属行业/label select nameindustry option制造业/option option互联网/option option金融/option option医疗/option option其他/option /select label客户状态/label select namestatus option潜在客户/option option已成交/option option跟进中/option option已流失/option /select label备注/label textarea nameremark rows3/textarea button typesubmit保存客户/button /form这里提一个容易被忽略的点required 和 typeemail 这类 HTML5 原生校验一定要加。不加也能跑但用户一旦提交空数据后端就要多处理一层异常。让 AI 前端兜一层校验、后端再兜一层校验两层防线才是及格的写法。仪表盘页我让 Codex 用“统计卡片”的形式展示数据。卡片上直接写数字比如“客户总数 128”“本月新增 16”“已成交 42”。这个页面不需要图表库纯 HTML 就能做后期如果想升级成柱状图最多引一个 Chart.jsAI 也能顺手搞定。4.5 本地运行与功能验证清单所有代码生成完之后先装依赖再启动服务pip install -r requirements.txt python app.py启动成功后浏览器访问http://127.0.0.1:5000。但“能打开页面”离“能用”还有距离我列了一个最小验收清单逐条检查新增一个客户刷新列表能看到数据。编辑刚才的客户修改电话号码保存后列表同步更新。搜索手机号后四位能搜到这个客户。删除一个客户页面二次确认后列表里消失。仪表盘数字与列表条目数一致。手机浏览器打开页面表单不溢出。我在实践时发现前五条通常一次就过第六条容易出问题。原因很简单AI 默认生成的宽度是桌面端布局在窄屏上表格会横向溢出。解决办法是让 AI 在模板里加一个响应式技巧把表格包在overflow-x: auto的容器里或者把列表改成卡片式布局。这类“小但让人瞬间觉得不专业”的细节恰恰是 AI 项目里最需要人工把关的地方。5. 把网站从“本机能开”到“别人也能访问”的部署方路径5.1 局域网访问让同事先试用起来如果你只是做个团队内部工具其实不需要买服务器。Flask 默认只监听本机回环地址别人访问不到。改成局域网可访问的方式是flask run --host0.0.0.0 --port5000这样同一局域网内的同事就可以在浏览器里输入http://你的IP:5000访问。在 Windows 上查 IP 的方法是命令行输入ipconfig看 IPv4 地址段Mac 上用ipconfig getifaddr en0或直接看系统偏好设置里的网络信息。这一步看似简单实际有防火墙问题。Windows 第一次运行时会弹出“允许访问网络”的对话框务必勾选“专用网络”。如果同事还是进不来很大概率是电脑防火墙拦截了 5000 端口。临时放行的做法是在“Windows Defender 防火墙”高级设置里添加入站规则开放 5000 端口。这只是凑合能用的做法正式上线肯定不能这么干。5.2 部署到云端Gunicorn Nginx 的组合思路要正式上线建议租一台 Linux 服务器。不需要高配2GB 内存的就足够撑起一个中小型内部系统。部署思路遵循一个经典组合Gunicorn 跑 Python 应用Nginx 做反向代理和静态文件服务。先说 Gunicorn 为什么“Flask 自带的服务是单进程开发级老老实实本地调试可以生产环境并发一高就卡。”用 Gunicorn 能开多个 worker 进程让系统同时处理更多请求pip install gunicorn gunicorn -w 4 -b 127.0.0.1:5000 app:app然后装 Nginx配置一个站点文件把请求转发给 Gunicorn。核心配置就一段server { listen 80; server_name yourdomain.com; location / { proxy_pass http://127.0.0.1:5000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这样做的好处有几个一是网站运行在 80 端口用户不用带端口号二是静态文件CSS、JS、图片直接由 Nginx 处理请求压力不经过 Python三是后面想加 HTTPS 证书Nginx 上配一个就行。这个过程AI 也能辅助执行——你只需要把服务器系统版本告诉 Codex它能生成对应的命令并带着你逐步执行。5.3 上线前必要的安全检查项目本机能跑和能上线中间还隔着一道安全线。很多小白部署完就完事几天后网站被挂马了还不知道。我总结过几个最基本的检查点每一条都必须过Debug 模式必须关闭app.run(debugTrue)在生产环境是致命伤它会暴露详细的错误堆栈信息攻击者能通过这些信息找到系统漏洞。上线时务必改成debugFalse或者干脆不用 Flask 自带服务。数据库文件权限收紧SQLite 数据库文件crm.db不要放在能被静态文件服务直接访问的目录下。Nginx 配置只在/static/路径下发文件其余路径全部走后端路由。加一个简单的访问密码内部工具哪怕是起步阶段也建议在 Nginx 层加 Basic Auth。配置两个账号就行成本极低但能拦住绝大多数乱扫端口的人。敏感信息不入库不上传千万注意这个客户管理系统里别存支付密码、身份证照片这类高敏信息。真需要存也要哈希处理后单独加密存储。建议上线后每周看一眼日志文件重点看 POST 请求的路径和参数。如果发现有人不停往/admin、/login这类地址发请求说明扫描机器人盯上你了。内网工具不要怕这些加个访问控制就够了。6. 常见问题与排查技巧实录6.1 Python 相关高频报错与解决办法做这个项目踩得最多的坑基本集中在环境层面我整理了一张快速排查表现象原因解决方案pip 不是内部或外部命令Python 的 Scripts 目录没加到 PATH重新运行安装包勾选 Add to PATH或手动把C:\Users\你的用户名\AppData\Local\Programs\Python\Python312\Scripts加进环境变量ModuleNotFoundError: No module named flask依赖没装或装到了另一个 Python 环境先pip list查一下再执行pip install -r requirements.txtsqlite3.OperationalError: table customers already exists重复执行了建表脚本把建表语句改成CREATE TABLE IF NOT EXISTSOSError: [Errno 98] Address already in use5000 端口被占用Linux/Mac 执行lsof -i :5000查占用进程并结束Windows 用 netstat -ano这里想多说一句AI 排错强在“快”但弱在“不懂环境”。你把报错原文原封不动丢给 Codex它能给出一条大概率靠谱的路径但它没法替你点鼠标、改环境变量。所以从安装环境开始一定要自己清楚每一步做了什么出了问题才不至于连问题在哪都不知道。6.2 Codex/AI 生成代码时的典型偏差与纠偏方法AI 生成代码最大的特征是“像个有天赋但不熟悉你项目的人”。它能写出能运行的 Flask 应用但常常跟你的需求有偏差。我总结过四类高频偏差过度功能比如你只要增删改查它给你加了一整套用户注册登录系统。这时候不要手软直接让它删掉不然项目复杂度暴涨。路径假设错误它可能假设静态文件放在static/css/style.css但你的实际文件在别处导致页面没有样式。数据校验缺失生成表单后经常忘记在 POST 接口里再校验一次字段内容导致脏数据入库。命名不统一有时在管道里混用customer_id和id排查起来会很晕。对付这些偏差我的经验是从第一轮就给它清晰的“项目事实清单”包括字段名、目录结构、使用框架版本。项目越往后期越要用分段指令每次只改一个模块。这样即使它偏了你也能准确指向“就是某个文件某个函数的问题”。6.3 数据库与数据丢失的“后悔药”使用 SQLite 最慌的时刻是“数据没删对全没了怎么办”。其实 SQLite 有办法预防每天备份一次数据库文件。复制粘贴就完事cp crm.db crm_backup_$(date %Y%m%d).dbLinux/Mac 下可以用 crontab 定时跑这条命令Windows 下可以用任务计划程序。数据量小的时候这个办法足够可靠。另外要养成一个习惯任何让 AI 批量改数据的操作先手工在 SQLite 里查一遍受影响的行数确认范围再执行。比如要批量删除“已流失”状态的客户SQL 先查总数SELECT COUNT(*) FROM customers WHERE status已流失;确认数量没错再执行 DELETE。这个习惯关键时刻能救你一命。7. 关于 AI 建站的几点个人体会跑通这个完整流程之后我最大的感受是GPT-6 和 Codex 这类工具真正改变的不是“写代码的速度”而是“一个人发起项目的勇气”。过去你想做一个内部小工具要先学后端、学数据库、学部署一个月下来可能还半途而废现在你只需要把需求描述清楚AI 把 80% 的代码环节包了你把剩下 20% 的结构决策、安全审查、体验细节把关做好项目就能落地。但我必须泼一盆冷水AI 生成的代码目前还不具备“天然的生产安全性”。你用它是极其高效但你仍然需要具备基本的判断力——知道什么数据不能存、什么操作不能 GET 请求完成、什么接口必须校验输入。这些意识是 AI 给不了你的。每个人在实际使用中都会有自己顺手的工作流。如果你要给自己留一个长期可迭代的项目建议把第一次的“初始化提示词”保存下来——以后每次新项目都复用。我个人存了一份模板开头固定是“你将在一个全新的 Flask 项目中工作技术栈是 Python 3 Flask SQLite请严格遵守以下目录结构……”等几行。它带来的连续性收益远超你想象。最后再分享一个小技巧做任何 AI 辅助开发的项目每完成一个功能就立刻git commit一次。这样 AI 把代码改崩了你也能干净利落地回滚而不是对着乱成一团的 diff 发呆。工具链真的成熟了关键在于你怎么用。