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

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

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

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

一、为什么还需要”部署”？#

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

1
my-website/
2
├── index.html
3
├── style.css
4
├── script.js
5
└── 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 并登录#

访问官方控制台：

1
https://dashboard.katabump.com/

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

KataBump 登录页面，输入邮箱和密码后点击 Login 登录

2. 进入”我的域名”#

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

KataBump 控制台左侧菜单高亮"我的域名"

3. 获取第一个域名#

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

页面中"获取我的第一个域名"按钮

4. 填写域名信息#

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

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

填写域名前缀并选择免费后缀，勾选服务条款后点击 Order the domain

5. 获取成功#

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

KataBump 域名创建成功页面，提示 Domain created

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

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

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

1. 登录 Cloudflare#

访问：

1
https://dash.cloudflare.com/login

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

Cloudflare 登录页面，输入邮箱后点击登录

2. 添加站点#

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

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

Cloudflare 添加域名流程中的"添加域"按钮

在 Cloudflare"连接您的域名"页面填写刚才获取的免费域名

3. 选择免费计划#

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

Cloudflare 选择免费计划页面，选中 Free 后点击继续

4. 继续激活#

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

Cloudflare 域名激活流程，点击"继续"前往下一步

5. 获取 Cloudflare 名称服务器#

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

1
ada.ns.cloudflare.com
2
greg.ns.cloudflare.com

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

Cloudflare 页面显示两个名称服务器地址，提示用户复制

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

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

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

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

在 KataBump 域名管理页的 Nameservers 区域填入 Cloudflare 名称服务器

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

7. 在 Cloudflare 确认已更新#

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

Cloudflare 激活页面提示"我已更新名称服务器"

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

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

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

1. 打开 Cloudflare Drop#

访问：

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

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

Drop a folder. Or a zip.

Cloudflare Drop 首页，提示可以拖拽文件夹或 zip 包上传

2. 选择上传方式#

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

Cloudflare Drop 页面，蓝色箭头指向"Browse folders"按钮

3. 选择你的网站文件夹#

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

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

系统文件选择器，选中网站文件夹

4. 等待上传#

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

Cloudflare Drop 上传进度界面，显示文件上传中

5. 部署成功#

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

Cloudflare Drop 部署成功页面，显示临时域名

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

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

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

1. 点击 Claim 认领#

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

Cloudflare Drop 部署成功页面，点击"Claim"按钮认领站点

2. 再次确认认领#

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

跳转后的认领页面，再次点击 Claim 按钮

3. 选择 Cloudflare 账号#

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

选择把站点添加到哪个 Cloudflare 账号

4. 立即添加域名#

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

Cloudflare Drop 网站管理页面，点击"立即添加域名"

5. 选择你的免费域名#

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

域名选择弹窗，勾选刚才获取的免费域名

6. 确认域名添加成功#

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

Cloudflare Drop 网站管理页，域名已成功添加

7. 使用域名访问网站#

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

1
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 详尽指南》。