如何将自己做的网站部署上线

Sat, 04 Jul 2026 08:00:00 GMT

目标读者：已经用 AI（v0、ChatGPT、Claude、Windsurf 等）生成了一组网页文件，但不知道怎么把 index.html 真正发布到互联网上，让别人可以通过域名访问。

📺 视频教程同步上线哔哩哔哩，配合图文食用更佳 👇

视频链接：https://b23.tv/kUBOrLl

一、为什么还需要"部署"？

用 AI 写网站只是第一步。你最终得到的是一堆文件：

my-website/
├── index.html
├── style.css
├── script.js
└── images/

这些文件现在还只躺在你的电脑里。别人想访问，需要三样东西同时就位：

网站文件：已经由 AI 生成好了；
域名：别人在浏览器里输入的网址；
托管服务器：存放文件，并在有人访问域名时把文件发送过去。

本教程的组合是：

KataBump：免费获取一个二级域名（如 yourname.kdns.fr）；
Cloudflare Drop：把本地文件夹拖拽/选择上传，直接生成一个可访问的网站；
Cloudflare：负责域名解析、HTTPS 证书和全球 CDN 加速。

整个过程不需要信用卡、不需要购买服务器、不需要懂 Linux。

二、准备材料

开始前请确认：

一个可正常接收邮件的邮箱（用于注册 KataBump 和 Cloudflare）。
一个由 AI 生成的静态网站文件夹，根目录下必须有 index.html。
网络可以访问 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 并登录

访问官方控制台：

https://dashboard.katabump.com/

如果你还没有账号，点击页面上的 "Create an account" 用邮箱注册；如果已有账号，直接输入邮箱和密码登录。登录页面也支持 Discord 快捷登录。

2. 进入"我的域名"

登录成功后，在左侧菜单点击 "My Domains（我的域名）"。

3. 获取第一个域名

点击页面中的 "Get my first domain（获取我的第一个域名）" 按钮。

4. 填写域名信息

在域名输入框中填写你想要的的前缀，并选择可用的免费后缀。建议：

前缀只使用英文、数字或连字符，避免中文和特殊符号；
选择 .kdns.fr 等标记为 Free 的后缀；
把最终得到的完整域名记下来，例如 yourname.kdns.fr。

5. 获取成功

如果域名可用，你会看到绿色的成功提示，并进入域名管理页面。页面会显示你的完整域名、到期时间以及名称服务器配置入口。

重要提示：把完整域名（如 yourname.kdns.fr）复制下来，接下来在 Cloudflare 添加域名时会用到。

五、第二阶段：把域名托管到 Cloudflare

Cloudflare 是全球知名的 CDN 和 DNS 服务商，提供免费的域名解析、SSL 证书和 DDoS 基础防护。我们需要把刚拿到的免费域名"托管"到 Cloudflare，然后才能使用 Cloudflare Drop 部署并绑定自定义域名。

1. 登录 Cloudflare

访问：

https://dash.cloudflare.com/login

用邮箱注册或登录。如果已有账号，直接登录即可。

2. 添加站点

登录后，点击 "添加站点" / "Add a site"。

先点击 "添加域" 按钮，进入添加域名的流程；在域名输入框中粘贴刚才从 KataBump 获得的完整域名，例如 yourname.kdns.fr，然后点击继续。

3. 选择免费计划

Cloudflare 会让你选择计划。直接选择 "Free（免费）" 即可。

4. 继续激活

点击继续激活，进入名称服务器设置页面。

5. 获取 Cloudflare 名称服务器

Cloudflare 会分配两个名称服务器（Nameserver），例如：

ada.ns.cloudflare.com
greg.ns.cloudflare.com

不同账号、不同域名分配到的服务器可能不同，请以页面显示为准。

把这两个地址复制下来，下一步要填回 KataBump。

6. 回到 KataBump 填写名称服务器

打开 KataBump 的域名管理页面，找到 Nameservers 区域。

把 Cloudflare 给你的两个名称服务器地址分别填入 NS1 和 NS2，然后点击 "Save nameservers" 保存。

注意：名称服务器修改通常需要几分钟到几小时才能全球生效。如果 Cloudflare 马上提示未检测到更新，请耐心等待，不必反复修改。

7. 在 Cloudflare 确认已更新

名称服务器生效后，回到 Cloudflare 的激活页面，点击 "我已更新名称服务器" 按钮。

Cloudflare 会检查你的域名。如果配置正确，域名状态会变为"活跃（Active）"。

六、第三阶段：用 Cloudflare Drop 部署网站

Cloudflare Drop 是 Cloudflare 官方推出的静态网站上传工具，允许你直接把本地文件夹或 zip 包上传，即可生成一个可访问的网站。

1. 打开 Cloudflare Drop

访问：

https://www.cloudflare.com/drop/

你会看到一个简洁的橙色拖拽上传页面，上面写着：

Drop a folder. Or a zip.

2. 选择上传方式

页面提供两个按钮："Browse folders" 和 "Browse zip"。因为我们已经解压了网站文件夹，所以点击 "Browse folders"。

3. 选择你的网站文件夹

在弹出的文件选择器中，找到并选中存放 AI 生成网站文件的文件夹。

关键提醒：一定要选择文件夹本身，而不是单个 index.html。并且文件夹根目录必须包含 index.html，否则部署后会报错或显示空白。

4. 等待上传

上传过程会显示进度。根据文件大小和网速，可能需要几秒到几分钟。

5. 部署成功

上传完成后，Cloudflare 会自动部署并生成一个临时域名，例如 xxxxx.pages.dev。

此时你可以用临时域名先访问网站，但还没绑定自己的域名。

七、第四阶段：认领站点并绑定自己的域名

为了让网站使用刚才在 KataBump 获取的免费域名，还需要把 Cloudflare Drop 站点认领到自己的 Cloudflare 账号，并添加自定义域名。

1. 点击 Claim 认领

部署成功后，点击页面上的 "Claim" 按钮。

2. 再次确认认领

系统会跳转到新页面，再次点击认领按钮完成确认。

3. 选择 Cloudflare 账号

选择你刚才登录的 Cloudflare 账号。

4. 立即添加域名

认领成功后，进入 Cloudflare Drop 的网站管理界面。点击 "立即添加域名"。

5. 选择你的免费域名

在弹出的域名列表中，选择你之前在 KataBump 获取的域名。

6. 确认域名添加成功

添加成功后，你会在"网站管理"页面看到自己的域名已经列在"添加的域名"区域。

7. 使用域名访问网站

现在打开浏览器，输入你的域名，例如：

https://yourname.kdns.fr

如果一切正常，你的 AI 网站就已经正式上线了！

八、常见问题与排查

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 目前不支持自动同步本地文件。当你修改了网站后，需要重新打包/选择文件夹，再次上传。上传成功后，原来的域名会自动指向最新版本。

九、总结

通过本教程，你已经完成了：

在 KataBump 免费获取一个域名；
把域名 DNS 托管到 Cloudflare；
使用 Cloudflare Drop 上传并部署静态网站；
把域名绑定到 Cloudflare Drop 站点；
通过自定义域名访问上线的网站。

整个过程不需要购买服务器、不需要配置 Nginx/Apache、不需要绑定信用卡。对于用 AI 快速生成网站的新手来说，这是目前最便宜的上线方案之一。

如果你希望获得更长久的免费域名，也可以参考另一篇文章《零成本建站：免费获取永久二级域名并一键托管 Cloudflare 详尽指南》。

小海博客