> 目标读者：已经用 AI（v0、ChatGPT、Claude、Windsurf 等）生成了一组网页文件，但不知道怎么把 `index.html` 真正发布到互联网上，让别人可以通过域名访问。 📺 **视频教程同步上线哔哩哔哩**，配合图文食用更佳 👇
> 视频链接：[https://b23.tv/kUBOrLl](https://b23.tv/kUBOrLl) ## 一、为什么还需要"部署"？ 用 AI 写网站只是第一步。你最终得到的是一堆文件： ``` my-website/ ├── index.html ├── style.css ├── script.js └── images/ ``` 这些文件现在还只躺在你的电脑里。别人想访问，需要三样东西同时就位： 1. **网站文件**：已经由 AI 生成好了； 2. **域名**：别人在浏览器里输入的网址； 3. **托管服务器**：存放文件，并在有人访问域名时把文件发送过去。 本教程的组合是： - **KataBump**：免费获取一个二级域名（如 `yourname.kdns.fr`）； - **Cloudflare Drop**：把本地文件夹拖拽/选择上传，直接生成一个可访问的网站； - **Cloudflare**：负责域名解析、HTTPS 证书和全球 CDN 加速。 整个过程不需要信用卡、不需要购买服务器、不需要懂 Linux。 --- ## 二、准备材料 开始前请确认： 1. 一个可正常接收邮件的邮箱（用于注册 KataBump 和 Cloudflare）。 2. 一个由 AI 生成的**静态网站文件夹**，根目录下必须有 `index.html`。 3. 网络可以访问 `dashboard.katabump.com` 和 `cloudflare.com`。 ### 什么是"静态网站"？ 静态网站指的是只包含 HTML、CSS、JavaScript、图片等前端文件，没有后端数据库、没有 Node.js/Python 服务。大多数 AI 生成的落地页、个人主页、作品集、博客模板都属于静态网站。 如果你的 AI 工具输出的是一个 `.zip` 压缩包，请先解压到电脑里，确保文件夹根目录有 `index.html`。 --- ## 三、整体流程一览 整个过程可以分成四大阶段： | 阶段 | 平台 | 目标 | | :--- | :--- | :--- | | 1 | KataBump | 免费获取一个域名 | | 2 | Cloudflare | 把域名托管到 Cloudflare，获取名称服务器地址 | | 3 | KataBump | 把 Cloudflare 名称服务器填回 KataBump | | 4 | Cloudflare Drop | 上传网站文件夹，部署并绑定自己的域名 | 下面按顺序详细说明每一步。 --- ## 四、第一阶段：在 KataBump 获取免费域名 ### 1. 打开 KataBump 并登录 访问官方控制台： ```text https://dashboard.katabump.com/ ``` 如果你还没有账号，点击页面上的 **"Create an account"** 用邮箱注册；如果已有账号，直接输入邮箱和密码登录。登录页面也支持 Discord 快捷登录。 ![KataBump 登录页面，输入邮箱和密码后点击 Login 登录](https://cdn.sanity.io/images/z4mv7hi8/production/922647fd6ac5abd939890915106a28acddfec843-1912x948.png) ### 2. 进入"我的域名" 登录成功后，在左侧菜单点击 **"My Domains（我的域名）"**。 ![KataBump 控制台左侧菜单高亮"我的域名"](https://cdn.sanity.io/images/z4mv7hi8/production/e044930850d49cea1afcd76517d3cf9d6ce56d80-1912x948.png) ### 3. 获取第一个域名 点击页面中的 **"Get my first domain（获取我的第一个域名）"** 按钮。 ![页面中"获取我的第一个域名"按钮](https://cdn.sanity.io/images/z4mv7hi8/production/1c013a4bbe4c4bbc54e7e18ea65b1c60819fa878-1912x948.png) ### 4. 填写域名信息 在域名输入框中填写你想要的的前缀，并选择可用的免费后缀。建议： - 前缀只使用英文、数字或连字符，避免中文和特殊符号； - 选择 `.kdns.fr` 等标记为 Free 的后缀； - 把最终得到的完整域名记下来，例如 `yourname.kdns.fr`。 ![填写域名前缀并选择免费后缀，勾选服务条款后点击 Order the domain](https://cdn.sanity.io/images/z4mv7hi8/production/a8e59e05e98f10e775cc78fd9306a046f6b68ddc-1912x948.png) ### 5. 获取成功 如果域名可用，你会看到绿色的成功提示，并进入域名管理页面。页面会显示你的完整域名、到期时间以及名称服务器配置入口。 ![KataBump 域名创建成功页面，提示 Domain created](https://cdn.sanity.io/images/z4mv7hi8/production/895cc996286171a55ac6da352b3d70b5ccf2c51b-1912x948.png) > **重要提示**：把完整域名（如 `yourname.kdns.fr`）复制下来，接下来在 Cloudflare 添加域名时会用到。 --- ## 五、第二阶段：把域名托管到 Cloudflare Cloudflare 是全球知名的 CDN 和 DNS 服务商，提供免费的域名解析、SSL 证书和 DDoS 基础防护。我们需要把刚拿到的免费域名"托管"到 Cloudflare，然后才能使用 Cloudflare Drop 部署并绑定自定义域名。 ### 1. 登录 Cloudflare 访问： ```text https://dash.cloudflare.com/login ``` 用邮箱注册或登录。如果已有账号，直接登录即可。 ![Cloudflare 登录页面，输入邮箱后点击登录](https://cdn.sanity.io/images/z4mv7hi8/production/c0f18276f06ffeea0aea25dfab231d4ed15ec4b1-1912x948.png) ### 2. 添加站点 登录后，点击 **"添加站点" / "Add a site"**。 先点击 **"添加域"** 按钮，进入添加域名的流程；在域名输入框中粘贴刚才从 KataBump 获得的完整域名，例如 `yourname.kdns.fr`，然后点击继续。 ![Cloudflare 添加域名流程中的"添加域"按钮](https://cdn.sanity.io/images/z4mv7hi8/production/5804f804e2de79fee01c8c09d37b84b4677aa6df-1912x948.png) ![在 Cloudflare"连接您的域名"页面填写刚才获取的免费域名](https://cdn.sanity.io/images/z4mv7hi8/production/068209c67961f72b2569853e00486bff5fed40ec-1912x948.png) ### 3. 选择免费计划 Cloudflare 会让你选择计划。直接选择 **"Free（免费）"** 即可。 ![Cloudflare 选择免费计划页面，选中 Free 后点击继续](https://cdn.sanity.io/images/z4mv7hi8/production/0a40fdea778d1e192bbc60fc2f2ff41cb4252af4-1912x948.png) ### 4. 继续激活 点击继续激活，进入名称服务器设置页面。 ![Cloudflare 域名激活流程，点击"继续"前往下一步](https://cdn.sanity.io/images/z4mv7hi8/production/8d9810b736b12d881b25cd8c52cf1f85f2f59bef-1912x948.png) ### 5. 获取 Cloudflare 名称服务器 Cloudflare 会分配两个名称服务器（Nameserver），例如： ```text ada.ns.cloudflare.com greg.ns.cloudflare.com ``` 不同账号、不同域名分配到的服务器可能不同，请以页面显示为准。 ![Cloudflare 页面显示两个名称服务器地址，提示用户复制](https://cdn.sanity.io/images/z4mv7hi8/production/293e7d025a8525d34ba16e6355c5827ad840d335-1912x948.png) 把这两个地址复制下来，下一步要填回 KataBump。 ### 6. 回到 KataBump 填写名称服务器 打开 KataBump 的域名管理页面，找到 **Nameservers** 区域。 把 Cloudflare 给你的两个名称服务器地址分别填入 NS1 和 NS2，然后点击 **"Save nameservers"** 保存。 ![在 KataBump 域名管理页的 Nameservers 区域填入 Cloudflare 名称服务器](https://cdn.sanity.io/images/z4mv7hi8/production/8736d971123dd99ecee79f7b225b4fbe5af0619d-1912x948.png) > **注意**：名称服务器修改通常需要几分钟到几小时才能全球生效。如果 Cloudflare 马上提示未检测到更新，请耐心等待，不必反复修改。 ### 7. 在 Cloudflare 确认已更新 名称服务器生效后，回到 Cloudflare 的激活页面，点击 **"我已更新名称服务器"** 按钮。 ![Cloudflare 激活页面提示"我已更新名称服务器"](https://cdn.sanity.io/images/z4mv7hi8/production/63dcc31abbb80fdfd0f8b9570bc346ff236bd60a-1912x948.png) Cloudflare 会检查你的域名。如果配置正确，域名状态会变为"活跃（Active）"。 --- ## 六、第三阶段：用 Cloudflare Drop 部署网站 Cloudflare Drop 是 Cloudflare 官方推出的静态网站上传工具，允许你直接把本地文件夹或 zip 包上传，即可生成一个可访问的网站。 ### 1. 打开 Cloudflare Drop 访问： ```text https://www.cloudflare.com/drop/ ``` 你会看到一个简洁的橙色拖拽上传页面，上面写着： > Drop a folder. Or a zip. ![Cloudflare Drop 首页，提示可以拖拽文件夹或 zip 包上传](https://cdn.sanity.io/images/z4mv7hi8/production/8ed78ef3b554262cf732a3b87be93ce1acc58a8e-1912x948.png) ### 2. 选择上传方式 页面提供两个按钮：**"Browse folders"** 和 **"Browse zip"**。因为我们已经解压了网站文件夹，所以点击 **"Browse folders"**。 ![Cloudflare Drop 页面，蓝色箭头指向"Browse folders"按钮](https://cdn.sanity.io/images/z4mv7hi8/production/01dbc0ee85cee8c2ae244cb00d952385d5af83f7-1912x948.png) ### 3. 选择你的网站文件夹 在弹出的文件选择器中，找到并选中存放 AI 生成网站文件的文件夹。 > **关键提醒**：一定要选择文件夹本身，而不是单个 `index.html`。并且文件夹根目录必须包含 `index.html`，否则部署后会报错或显示空白。 ![系统文件选择器，选中网站文件夹](https://cdn.sanity.io/images/z4mv7hi8/production/45d83c2354dbd1f4059a63797850e358d4f6174b-1912x1028.png) ### 4. 等待上传 上传过程会显示进度。根据文件大小和网速，可能需要几秒到几分钟。 ![Cloudflare Drop 上传进度界面，显示文件上传中](https://cdn.sanity.io/images/z4mv7hi8/production/67f4f54d6878cb561f43109951dd24a311303670-1912x948.png) ### 5. 部署成功 上传完成后，Cloudflare 会自动部署并生成一个临时域名，例如 `xxxxx.pages.dev`。 ![Cloudflare Drop 部署成功页面，显示临时域名](https://cdn.sanity.io/images/z4mv7hi8/production/c76d0c0277f7c0fb189078d1e8a055b363329606-1912x948.png) 此时你可以用临时域名先访问网站，但还没绑定自己的域名。 --- ## 七、第四阶段：认领站点并绑定自己的域名 为了让网站使用刚才在 KataBump 获取的免费域名，还需要把 Cloudflare Drop 站点认领到自己的 Cloudflare 账号，并添加自定义域名。 ### 1. 点击 Claim 认领 部署成功后，点击页面上的 **"Claim"** 按钮。 ![Cloudflare Drop 部署成功页面，点击"Claim"按钮认领站点](https://cdn.sanity.io/images/z4mv7hi8/production/1a17f0dcf83fa244b96587c37c89a5b5044130bd-1912x948.png) ### 2. 再次确认认领 系统会跳转到新页面，再次点击认领按钮完成确认。 ![跳转后的认领页面，再次点击 Claim 按钮](https://cdn.sanity.io/images/z4mv7hi8/production/2aa1d6981d1047a136fd5d0b41e9520ccee85e27-1912x948.png) ### 3. 选择 Cloudflare 账号 选择你刚才登录的 Cloudflare 账号。 ![选择把站点添加到哪个 Cloudflare 账号](https://cdn.sanity.io/images/z4mv7hi8/production/f2e8a230b703eaeb30aa3082313eaf56ddc218b0-1912x948.png) ### 4. 立即添加域名 认领成功后，进入 Cloudflare Drop 的网站管理界面。点击 **"立即添加域名"**。 ![Cloudflare Drop 网站管理页面，点击"立即添加域名"](https://cdn.sanity.io/images/z4mv7hi8/production/3514a7a3596bde3292d7c2c6a30fd98b430b46a2-1912x948.png) ### 5. 选择你的免费域名 在弹出的域名列表中，选择你之前在 KataBump 获取的域名。 ![域名选择弹窗，勾选刚才获取的免费域名](https://cdn.sanity.io/images/z4mv7hi8/production/c8e34f70dbd7efa6d98c8b8040b7355733ff35e9-1912x948.png) ### 6. 确认域名添加成功 添加成功后，你会在"网站管理"页面看到自己的域名已经列在"添加的域名"区域。 ![Cloudflare Drop 网站管理页，域名已成功添加](https://cdn.sanity.io/images/z4mv7hi8/production/2d75b6750648e7056f52a885f2a1f8ddc6a0defd-1912x948.png) ### 7. 使用域名访问网站 现在打开浏览器，输入你的域名，例如： ```text https://yourname.kdns.fr ``` 如果一切正常，你的 AI 网站就已经正式上线了！ ![浏览器中使用自定义域名访问部署好的网站](https://cdn.sanity.io/images/z4mv7hi8/production/a1139ba8a2fe901103cafcb1aa9a38fc3f3e3d9c-1189x493.png) --- ## 八、常见问题与排查 ### 1. 域名访问显示"站点未找到"或 404 - 确认 Cloudflare Drop 已经成功部署，并且页面显示"Deploy successful"； - 确认域名已经添加到 Cloudflare Drop 站点； - 等待 5–10 分钟，让 DNS 全球生效； - 在 Cloudflare 域名概览页面确认域名状态为"活跃（Active）"。 ### 2. 域名打开后还是 Cloudflare 的默认页面 - 检查 KataBump 里的名称服务器是否确实改成了 Cloudflare 提供的两个地址； - 检查名称服务器保存后是否等待了足够的生效时间（最长 24 小时）。 ### 3. 上传后网站样式或图片丢失 - 检查 `index.html` 中引用的 CSS/JS/图片路径是否正确； - 如果 AI 生成的是相对路径（如 `./style.css`），通常没问题； - 如果是绝对路径（如 `/style.css`），请确保文件实际存在，或改为相对路径。 ### 4. 网站打开后空白 - 确认文件夹根目录有 `index.html`； - 确认文件编码为 UTF-8； - 按 `F12` 打开浏览器控制台，查看是否有 JavaScript 错误。 ### 5. 如何更新已部署的网站？ Cloudflare Drop 目前不支持自动同步本地文件。当你修改了网站后，需要重新打包/选择文件夹，再次上传。上传成功后，原来的域名会自动指向最新版本。 --- ## 九、总结 通过本教程，你已经完成了： 1. 在 KataBump 免费获取一个域名； 2. 把域名 DNS 托管到 Cloudflare； 3. 使用 Cloudflare Drop 上传并部署静态网站； 4. 把域名绑定到 Cloudflare Drop 站点； 5. 通过自定义域名访问上线的网站。 整个过程不需要购买服务器、不需要配置 Nginx/Apache、不需要绑定信用卡。对于用 AI 快速生成网站的新手来说，这是目前最便宜的上线方案之一。 如果你希望获得更长久的免费域名，也可以参考另一篇文章《零成本建站：免费获取永久二级域名并一键托管 Cloudflare 详尽指南》。