很多人一听“做网站”，第一反应就是：
我不会前端，也不会写代码。
但现在，你不一定要先成为程序员。
只要你有一份内容、一个想法、一个小工具，就可以让 Codex 帮你把它变成一个能打开的网址。
这里说的“内容”可以很简单：
一篇教程、一个资料整理页、一个 AI 工具导航、一个价格计算器、一个文本转换工具，甚至一个个人主页。
比如：
整理内容 → 交给 Codex/Claude code → 生成网页 → 发布成网站这样以后分享时，不用发文档、发截图、发压缩包。
直接发一个网址就行。
这篇就讲一遍：
小白如何用 Codex，把内容变成一个真正可以访问的网站。
一、准备工具
做一个静态内容页或小工具，你只需要三样东西：
| 工具 | 用途 |
|---|---|
| AI 编程工具 | 用自然语言生成代码、改页面、排报错。推荐 Codex 或 Claude Code，也可用 Trae、Cursor 等 |
| VSCode | 打开项目文件夹，方便 AI 读写文件 |
| GitHub 账号 | 保存代码，并用 GitHub Pages 免费发布网站 |
就这三样，足够做出一个能访问的网站了。
部分 AI 工具需要配置 API Key（OpenAI、Claude、DeepSeek 等），按工具提示配置即可。
还不会配 Codex / Claude Code 或 API 的，可以先看配置教程：https://liuloys.top/
至于服务器和域名，是等你想做更复杂的网站（带后端、数据库）或让网址更正式时才需要的，第一次做可以完全不管，后面再说。
把 VSCode 和 GitHub 连上
后面要让 AI 帮我们推送代码、发布网站，先在 VSCode 里登录 GitHub 就行，三步：
- 终端输入
git --version，能显示版本号说明 Git 已装好； - VSCode 里按
Ctrl + Shift + P，搜索Sign in to GitHub，按提示跳转浏览器登录； - 在扩展市场搜索安装
GitHub Pull Requests，方便后面提交代码、克隆仓库。
想确认是否连好，按 Ctrl + Shift + P 搜 Git: Clone，随便克隆一个仓库能成功，就说明 VSCode 和 GitHub 通了。
第一版别把环境搞太复杂——能让 AI 读写文件、本地能跑、最后能推到 GitHub，就够了。
二、先把需求写清楚
在让 Codex/Claude Code写代码之前，先不要急着说：
帮我做一个网站这个需求太宽泛，AI 很容易自由发挥。
更好的方式是把内容、页面结构、功能需求写清楚。
比如你要做一个资料整理网站，可以这样写：
请帮我做一个内容展示网站。
网站主题：AI 工具导航页
技术要求：
- 使用 Vite + React + TypeScript
- 使用 Tailwind CSS
- 页面适配电脑端和手机端
- 不需要登录，不需要数据库
- 内容先写在前端页面里
页面结构：
1. 顶部标题：AI 工具导航
2. 简短介绍：整理常用 AI 工具，方便快速访问
3. 工具分类：写作、编程、绘图、论文、效率
4. 每个工具用卡片展示，包括名称、简介、访问链接
5. 底部放作者信息和更新日期
交互需求：
- 点击工具卡片可以跳转到对应网站
- 支持简单搜索
- 手机端卡片改为单列显示如果你做的是小工具，也可以换成：
请帮我做一个文本格式转换工具。
功能：
1. 左侧输入原始文本
2. 点击按钮后自动整理格式
3. 右侧输出整理后的文本
4. 提供复制按钮
5. 页面简洁，适合公开分享核心原则是：
先把需求写清楚，再让 Codex 写代码。
三、让 Codex / Claude Code 等生成项目
从这里开始，我们用一个具体例子来演示，使用vscode+codex：
做一个格式转换工具。
它的功能很简单：
输入一段原始文本 → 点击转换 → 输出整理后的格式 → 一键复制比如把一段杂乱的文本，转换成更规整的列表、Markdown 格式，或者适合直接粘贴到文档里的格式。
第一版不需要做得很复杂。
先做一个能打开、能输入、能转换、能复制的网页就够了。
本地/终端新建一个文件夹format-converter：
mkdir format-converter
cd format-converter
code .然后在 VSCode 里打开这个文件夹，
侧边打开 Codex / Claude Code，Codex选择完全访问权限，Claude Code选择绕过审批。
把刚才整理好的需求发给它：
请在当前目录创建一个 Vite + React + TypeScript + Tailwind 项目。
项目名称：format-converter
功能：
做一个简单的格式转换工具。
核心需求：
1. 左侧输入原始文本
2. 点击“开始转换”按钮
3. 右侧输出整理后的文本
4. 提供“复制结果”按钮
5. 提供“清空内容”按钮
6. 页面适配电脑端和手机端
7. 不需要登录，不需要数据库
8. 先用前端实现基础转换逻辑
页面风格：
- 白底
- 简洁
- 工具站风格
- 标题清晰
- 适合公开分享
技术要求：
- 使用 Vite + React + TypeScript
- 使用 Tailwind CSS
- 本地运行后可通过 npm run dev 访问
- 如果缺少依赖，请自动安装生成示例
生成成功示例
Local: http://localhost:5173/打开这个地址，就能看到本地页面的格式转换工具。
效果很不错，然后试用一下效果：
完全可以跑通。
四、先跑通页面，再逐步改细节
第一版不要追求完美。
对于这个格式转换工具，先检查几个最关键的问题：
- 页面能不能正常打开；
- 输入框能不能输入文本；
- 点击转换后有没有输出内容；
- 复制按钮能不能使用；
- 手机端页面会不会变形。
页面跑起来后，再让 Codex 按问题逐条修改。
比如：
请修改当前格式转换工具页面：
1. 页面整体改成白底，风格更简洁
2. 标题改为“格式转换工具”
3. 标题下面增加一句说明：粘贴文本，一键整理为更规整的格式
4. 输入框和输出框在电脑端左右排列，在手机端上下排列
5. 页面不能出现横向滚动如果想让工具更实用，可以继续加功能：
请增加三个转换选项：
1. 转换为 Markdown 列表
2. 去除多余空行
3. 每行自动编号
用户选择不同选项后，点击“开始转换”，输出对应格式。还可以继续优化交互：
请增加示例文本按钮。
点击后自动填入一段杂乱文本，方便用户测试转换效果。或者：
请增加复制成功提示。
点击“复制结果”后，按钮文字短暂变成“已复制”。建议一轮只提 3-5 个修改点。
比如先改布局，再加功能，最后优化移动端。
这样 Codex 不容易漏，也方便你检查每一步效果。
五、让 Codex 推送并发布网站
页面本地跑通后，就可以把代码推送到 GitHub，并发布成一个可以访问的网站。
这一步也可以继续交给 Codex 完成。
前提是：
| 准备项 | 说明 |
|---|---|
| 已安装 Git | 电脑需要能正常使用 git 命令 |
| 已登录 GitHub | 可以在 VSCode、GitHub Desktop 或 GitHub CLI 中提前登录 |
| 已创建 GitHub 仓库 | 比如仓库名叫 format-converter |
如果已经安装并登录了 GitHub CLI，也可以让 Codex 自动创建仓库、设置 Public，并配置 GitHub Pages。
直接对 Codex 说：
请把当前项目推送到 GitHub，并发布到 GitHub Pages。
项目名称：format-converter
要求：
1. 检查当前项目是否可以正常 build
2. 如果还没有初始化 git，请自动初始化
3. 如果还没有远程仓库，请创建一个 public GitHub 仓库
4. 将当前代码提交并推送到 GitHub
5. 配置 GitHub Pages
6. 如果需要修改 vite.config.ts、package.json 或 GitHub Actions，请自动修改
7. 如果过程中出现报错，请根据终端提示自行修复
8. 最后告诉我 GitHub 仓库地址和网站访问地址如果你没有配置 GitHub CLI，也可以先手动创建 GitHub 仓库，然后把仓库地址给 Codex：
请把当前项目推送到这个 GitHub 仓库，并配置 GitHub Pages：
https://github.com/你的用户名/format-converter.git
如果过程中出现报错，请自行修复。
最后告诉我网站访问地址。最后你只需要确认两件事：
- GitHub 仓库里已经有项目文件；
- GitHub Pages 生成的网站地址可以正常打开。
到这一步，这个格式转换工具就已经从本地项目，变成别人可以访问的网站了。
推送成功示例
打开我的网站，
https://sherry56.github.io/format-converter/可以看到已经发布成功，这样就可以发给别人访问使用了。
注意：如果打开网址是白屏
第一次用 GitHub Pages 发布 Vite 项目，很多人会遇到同一个问题：
网址能打开，但页面是一片空白，F12 打开控制台还会看到一堆资源 404。
这几乎是新手必踩的坑，原因也很固定：
GitHub Pages 的网址带了一层子路径（/format-converter/），
但 Vite 默认按根路径打包，导致 JS、CSS 这些资源全都找不到。解决办法很简单，不用自己研究，直接把情况丢给 Codex：
我的网站发布到 GitHub Pages 后打开是白屏，
控制台报了一堆资源 404。
仓库名是 format-converter，
请检查并修改 vite.config.ts 里的 base 配置，
改好后重新 build 并推送。如果你愿意，也可以把控制台的报错直接截图发给它，让它对着报错改。
改完重新推送，等 GitHub Pages 部署一两分钟，再刷新网址，页面一般就正常了。
小提示：遇到任何打不开、报错、显示不对的情况，都可以用这个套路——截图报错 → 发给 AI → 让它改 → 重新推送。不用看懂报错，AI 会帮你处理。
六、绑定自己的域名
前面用 GitHub Pages 发布后，网站地址一般是：
https://你的用户名.github.io/format-converter/这个地址已经可以正常分享和访问。
如果想让网站看起来更正式，可以再绑定自己的域名，比如：
https://tools.yourname.com大致流程是：
购买域名 → 添加域名解析 → 在 GitHub Pages 里绑定域名其中域名可以在阿里云、腾讯云、Cloudflare、NameSilo 等平台购买。
如果只是第一次做网站，这一步可以先跳过。
先用 GitHub Pages 地址跑通完整流程，后面再慢慢换成自己的域名。
后面我会再单独写一篇，具体介绍：
- 怎么购买和解析域名；
- 怎么把网站绑定到自己的域名；
- 怎么部署到自己的服务器；
- GitHub Pages、服务器、Vercel 这些方式有什么区别。
这一篇先把重点放在：
用 Codex 把内容做成网站，并成功发布出去。
最后总结
以前做网站，可能要先学前端、学部署、学服务器。
但现在，你可以先从一个很小的工具开始。
比如这篇里的格式转换工具：
输入文本 → 点击转换 → 复制结果 → 分享网址完整流程也不复杂：
写清楚需求 → 交给 Codex 生成项目 → 本地跑通 → 推送 GitHub → 发布网站第一版不用完美。
先让它变成一个别人能打开的网址。
这一步完成后，你就已经从“内容创作者”，往“小白开发者”迈出了一步。
