1 小时零成本上线一个网页

这是「做产品」系列的第一课，对应的是第②级「自己写一遍」：接下来 1 小时，你会装一个免费的 AI 客户端、用手机号注册它（注册的是这个客户端，不是懒猫），然后用它写出一个网页，拿到一个任何人都能打开的公网地址。不用会写代码，不用花一分钱，Windows 和 Mac 都能跟着做。

如果你只是想要一个能发给人的页面，不用走到这一课——懒猫做产品首页说一句你会的事，十秒就有一个页面，不装任何东西，也不用手机号，做完就能直接发给人，这是第①级。这一课是给想再往前一步、自己动手改代码的人：装好客户端之后，你拿到的不再是一个成品，而是能自己打开、读懂、修改的每一行代码。

点开看：客户端和托管平台是怎么选出来的（可跳过，直接看下一节开始动手）

客户端选型。 条件是图形界面、国内直连、内置免费模型、Windows 和 Mac 都有安装包——小白不该在装环境这一步就卡住。字节跳动的 Trae 国内版符合全部条件：一个安装包同时是编辑器和 AI 助手，不用额外装别的软件；官方下载页（2026-09-07 查阅，https://www.trae.cn/download）明确列出 macOS 12.0 以上和 Windows 10/11 两个版本；这条数据同时收录在懒猫的免费入口库里（trae-cn，核实于 2026-08-29）：国内版完全免费，官方没有设付费墙或次数上限，内置 Doubao-1.5-pro、DeepSeek-V3、DeepSeek-R1 三个模型可以切换，门槛只有一个国内手机号。如果你已经装了 VS Code 也不想换编辑器，备选是百度的文心快码 Comate（baidu-comate，同样国内、手机号门槛、个人版永久免费），以插件形式装进 VS Code 就能用。终端路线（命令行，进阶用户）折叠在第二步末尾，给已经会用命令行的人。

托管选型。 条件是免费、国内可直接打开、不需要 git、不需要命令行、支持网页直接上传文件夹。主选腾讯云的 EdgeOne Pages（Pages Drop 功能）：官方公告（2026-09-07 查阅，https://pages.edgeone.ai/zh/resources/announcing-pages-drop-free-static-website-hosting）原文是「只需从计算机拖动文件夹并将其放到平台上，无需复杂的上传向导或逐个文件选择」，「基本静态网站托管无需信用卡，没有隐藏费用」，部署完会自动给一个 项目名.edgeone.app 的默认地址，不用自己买域名、不用备案。备选是 Cloudflare Pages 的直接上传功能：官方文档（2026-09-07 查阅，https://developers.cloudflare.com/pages/get-started/direct-upload/）同样支持拖拽文件夹部署，默认给 项目名.pages.dev 地址；免费额度页面（同日查阅，https://developers.cloudflare.com/pages/platform/limits/）写明每月 500 次构建、单文件最大 25 MiB、总文件数上限 20000。Cloudflare 是海外产品，国内访问速度看当时的网络环境，作为备选放在这里——主线打不开就换这条。

第零步：把你刚做出来的那一页带走（约 2 分钟）

如果你是从懒猫做产品首页过来的——十秒说一句话，已经拿到一个能用的页面——不用从空白开始。把那一页下载下来，接下来的步骤让 AI 照着它改，比照着空文件夹写快得多。

还没做过第一页的话，先回懒猫做产品首页，十秒做一个，再回来接着走下面的步骤——也完全可以跳过这一步，从零开始做，两条路殊途同归。

先选一个今天要做的东西

三个题目，挑一个，都能在 1 小时里做完。

1. 个人主页。 一句话定义：一个页面把「你是谁、做什么、怎么联系到你」说清楚。做完的标准：陌生人打开链接，10 秒内知道你是谁，并且能找到联系方式。
2. 单页小工具。 一句话定义：一个只做一件事的小工具，打开就能用，不用注册，比如番茄钟、单位换算器、随机抽签器。做完的标准：任何人打开链接不看说明也能用对，核心功能能完整跑通一次。
3. 活动页。 一句话定义：为一件具体的事（聚会、发布会、征集活动）做一个「信息 + 下一步」页面。做完的标准：看完的人知道时间、地点、内容，并且知道接下来该点哪里。

选好之后，心里过一遍它长什么样、有哪几块内容——下一步会用得上。

第一步：装好客户端（约 15 分钟）

1. 打开 https://www.trae.cn/download，根据你的系统下载 Windows 或 macOS 安装包（2026-09-07 查阅官方下载页，确认两个系统的下载入口都在；安装与注册流程未实测）。
2. 安装、打开，用手机号注册并登录（这是 Trae 国内版唯一的门槛）。
3. 新建一个项目文件夹，起个英文名，比如 my-first-page——这个文件夹名字之后会出现在网址里，尽量用小写字母和短横线。

如果你更想用 VS Code：装好 VS Code 后，在插件市场搜「文心快码」或「Comate」，安装、用手机号登录即可，功能上和 Trae 内置的 AI 助手是同一类东西，后面的步骤照着做没有区别（未实测该插件在 VS Code 里的具体安装点击路径，按官方文档，https://comate.baidu.com/zh，2026-09-07 查阅）。

第二步：连上免费模型（约 10 分钟）

Trae 国内版把模型内置在客户端里，不用自己去申请 API Key、不用配置文件：

1. 在 Trae 里打开设置（或侧边栏的模型选择下拉框）。
2. 你会看到 Doubao-1.5-pro、DeepSeek-V3、DeepSeek-R1 几个选项——写网页用默认的 Doubao-1.5-pro 就够，它的定位就是日常对话与生成任务；如果某个页面它写得逻辑比较乱，可以换成 DeepSeek-R1 试试（这个模型更擅长一步步推理）。
3. 确认模型已经选中，这一步就完成了。

这就是「图形界面路线」的好处：一个客户端里编辑器和模型都装好了，不用单独去某个开放平台注册、复制 API Key、粘贴进配置文件。如果你想知道这条免费模型背后限速多少、能不能换成别的免费 API，那是进阶话题，留给这个系列的第二课（《零成本 AI 编程环境》）。

终端路线（进阶，可跳过）。 已经会用命令行的人，可以用 Qwen Code CLI（qwen-code-cli）这类开源终端客户端接免费模型，通过绑定魔搭 ModelScope 实名账号获取每日免费调用额度（核实于 2026-08-29）。这条路线需要自己敲命令、编辑配置文件，不适合第一次做网页的人，这里不展开。

这门课选 Trae 国内版做主线，不代表它是唯一免费选项。同类客户端还有 Qoder、Gemini CLI、Windsurf Free、GitHub Copilot Free，门槛和限速各不相同，装哪个都不影响这门课后面的步骤，挑一个你顺手的即可。完整的核实记录去情报站查：Trae 国内版 · Qoder · Gemini CLI · Qwen Code CLI · Windsurf Free · GitHub Copilot Free。完整对照表：免费客户端 × 免费模型。

第三步：让 AI 做出你的网页（约 20 分钟）

这一步是核心。分三次对话，每次目的不一样。

3.1 说清楚你要什么

把下面这段话改成你自己选的题目，整段复制粘贴给 AI：

我要做一个单页网页，主题是：个人主页。
页面需要包含这几块内容：
1. 顶部：我的名字和一句话介绍
2. 中间：三件我做过的事，每件配一句话说明
3. 底部：怎么联系到我（邮箱或社交账号占位符）
风格要求：简洁、留白多、配色用两三种颜色就够，不要花哨的动画。
请先不要写代码，用几句话跟我确认你理解的结构对不对。

关键是最后一句「先不要写代码，先确认结构」——这是在教它「理解你」，而不是让它直接猜。AI 回复确认后，你觉得哪里不对就直接说，比如「第二块换成两件事就够」。

如果你是带着第零步下载的那一页来的，把它拖进项目文件夹，在上面这段话后面再加一句：「照着这个 HTML 文件的结构和风格，改成……」——AI 会照着你已经做出来的版本继续写，而不是从空白重新猜。

3.2 让它开工

结构没问题之后，发这一句：

结构没问题，开始写吧。用一个 index.html 文件，样式写在同一个文件的 <style> 里，不需要额外的 JS 框架，不需要联网请求任何外部资源。写完之后告诉我在项目文件夹里的哪个文件。

「不需要额外的 JS 框架、不需要联网请求外部资源」这句很重要——它决定了你等下能不能直接把文件夹拖去托管平台就用，不用额外装依赖、不用联网下载包。Trae 会把文件真的写到你第一步建的项目文件夹里，写完你可以直接双击打开这个 HTML 文件，在浏览器里预览效果。

3.3 挑毛病，让它改

打开预览，你大概率会想改点什么。改的时候把「哪里不对」和「想要什么样」说清楚，而不是笼统地说「不好看」：

这几个地方需要改：
1. 标题字太小，再放大一些
2. 手机屏幕宽度下，三块内容挤在一起了，改成上下堆叠
3. 背景颜色换成更浅的米白色
其他地方不要动。

「其他地方不要动」这句是习惯性的保护——每次改动都明确划定范围，AI 就不会顺手把你已经满意的部分也重写一遍。

3.4 改坏了怎么退回

这门课不需要你学任何版本管理工具，退回只靠两个笨办法，配合用最省心：

• 改之前先备份。 每次要做比较大的改动前，把 index.html 复制一份改名成 index-备份.html，改坏了就用备份文件覆盖回去。
• 让 AI 自己退回去。 因为它记得你们的整段对话，可以直接说：

刚才那次修改效果不对，把文件恢复成上一步（改标题字号那次）之前的样子，其他改动都保留。

AI 客户端在同一个对话里通常能记住之前生成过的版本（这一步未实测，不同客户端表现会有差别）；如果它记不清具体是哪一步，直接把备份文件的内容贴给它，让它对着备份重新生成，也一样能退回去。

第四步：把它放到公网上（约 10 分钟）

前面三步做完，你手上有一个能在本地浏览器打开的网页文件夹。这一步只是把这个文件夹搬到网上。

主线：腾讯云 EdgeOne Pages。

1. 打开 https://pages.edgeone.ai/zh，用邮箱或微信注册一个账号（注册字段我还没有逐项实测，按官方页面填写即可）。
2. 找到「Pages Drop」或「直接上传」入口，把第一步建的整个项目文件夹拖进去。
3. 等待部署完成，平台会给你一个 你的项目名.edgeone.app 格式的地址——这就是你的公网网页，不用买域名、不用备案。
4. 在手机浏览器里打开这个地址，确认页面正常显示。

以上四步按官方文档操作（https://pages.edgeone.ai/zh/resources/announcing-pages-drop-free-static-website-hosting，2026-09-07 查阅），完整的注册与上传流程我还没有实测，所以只写到这一层，不编造具体点击路径。

备选：Cloudflare Pages 直接上传。 如果打不开 EdgeOne 的页面，换成 https://developers.cloudflare.com/pages/get-started/direct-upload/：注册账号后进入 Workers & Pages，选择「上传资源」，同样把文件夹拖进去，部署完得到 你的项目名.pages.dev 地址。这条路线同样按官方文档，未实测，国内访问速度取决于当时网络环境，打不开就换回主线。

两条路线都不需要绑定自己的域名，也不需要备案——这一步的目标只是「有一个公网地址」，不是「有一个正式域名」，域名和备案留到你真的要把它当产品做的时候再处理。

下一步

页面上线之后，还能做三件小事，不算这堂课里，但值得知道：换一个自己买的域名（需要备案或选择海外托管商）、加一段访问统计代码看看有没有人打开过、把它从「一个页面」变成「一个能重复用的模板」。这些，还有更进阶的做法，会在后面的课里展开——比如怎么零成本搭一整套 AI 编程环境，以及从零做一个能上架的 iOS App。

系列陆续更新，订阅拿更新。