🟦 NameSilo → Cloudflare → Vercel 完整教程
本文将带你从 零基础 开始，一步步完成：
购买域名 → 配置 DNS → 部署前端项目 → 绑定访问域名
采用的技术方案为：
- 域名商：NameSilo
- DNS 托管：Cloudflare（提供 CDN、SSL、加速）
- 部署平台：Vercel（适合前端项目）
只要跟着操作，你就能将你的前端项目顺利上线并拥有自己的专属域名。
🟩 一、购买域名（NameSilo）
🔹 1. 进入 NameSilo 官网
访问：https://www.namesilo.com
顶部选择 Register 或 Search 进入域名搜索页面。
🔹 2. 搜索你想要的域名
输入：
yourdomain.com
yourdomain.top
yourdomain.site
选择一个可以购买的后缀。
提示：
.top、.xyz价格非常便宜，适合练手。
🔹 3. 加入购物车
搜索结果出现后点击 Add 或 Register。
然后点击右上角购物车结账。
🔹 4. 结账（推荐使用支付宝）
NameSilo 支持支付宝，非常方便。
使用支付宝扫描二维码即可完成购买。
🔹 5. 完成域名购买
进入后台查看你的域名列表：
👉 控制台地址：
https://www.namesilo.com/account
这里可以看到你买到的域名。
🟩 二、将域名托管到 Cloudflare（使用 CDN + 加速）
默认 NameSilo 自带 DNS，但我们更推荐用 Cloudflare，因为它提供：
- 全球 CDN 加速
- 自动 HTTPS
- 免费防攻击
- 更快的 DNS 解析
- 更好用的 DNS 面板
🔹 1. 注册 Cloudflare
访问官网：https://dash.cloudflare.com
注册并登录。
🔹 2. 添加网站（Add a Site）
在 Cloudflare 控制台点击：
+ Add a Site
在输入框中填写你的域名，例如：
yourdomain.top
点击 Continue。
🔹 3. 选择免费计划
Cloudflare 提供免费套餐，选择：
Free Plan
即可。
🔹 4. Cloudflare 自动扫描 DNS
系统会自动扫描你当前在 NameSilo 的 DNS 记录，你会看到各种记录（A / CNAME / NS / MX / TXT）。
不用害怕，全部保留即可，后面我们会整理。
点击 Continue。
🔹 5. Cloudflare 提供新的 NameServers
Cloudflare 会给你两条 NS：
例如：
amy.ns.cloudflare.com
bob.ns.cloudflare.com
请保持这个页面不要关。
🟩 三、到 NameSilo 修改 NameServers
现在要让域名“听从 Cloudflare 的指挥”。
🔹 1. 打开 NameSilo → 域名管理
进入控制台：
Account > Domain Manager
如果是首次用户，NameSilo需要你完善一下AccountSetting的信息，完善之后再进入DomainManager
选择你刚买的域名（例如：yourdomain.top）。
🔹 2. 点击“Change Nameservers”
在域名详情页找到：
NameServers
[ Change ]
点击进入修改页面。
🔹 3. 删除原来的 NS，填写 Cloudflare 提供的两条
删除所有旧的（dnsowl 或 vercel-dns 等）。
填写 Cloudflare 的：
xxx.ns.cloudflare.com
xxx.ns.cloudflare.com
点击 Save。
🔹 4. 等待生效（10 分钟 ~ 24 小时）
一般 5〜10 分钟 Cloudflare 就会显示绿色 “Active”。
这表示：
✔ 你的域名已经完全托管到 Cloudflare
✔ 后续所有 DNS 配置都在 Cloudflare 里做
🟩 四、在 Cloudflare 设置 DNS（配置 Vercel 所需记录）
进入 Cloudflare：
网站 → 选择你的域名 → DNS → Records
现在我们要做的是：
❌ 删除不需要的记录（清理）
删除以下记录：
- 所有 NS 记录（Cloudflare 会自动管理，不需要手动添加）
- A 记录（如果是指向旧服务器或 IP）
- 其他无关记录
✔ 必留的记录
_vercel的 TXT 验证记录（Vercel 添加域名时生成）- 你要绑定的 CNAME 记录
🔹 添加主域名 CNAME（@）
点击：
+ Add record
添加：
| Type | Name | Content | Proxy |
|---|---|---|---|
| CNAME | @ | cname.vercel-dns.com | Proxied（橙色云） |
这表示：
yourdomain.top → Vercel
🔹 添加 www 子域名 CNAME
| Type | Name | Content |
|---|---|---|
| CNAME | www | cname.vercel-dns.com |
可选，但一般用于兼容：
www.yourdomain.top → Vercel
🔹 配置完成
你的 Cloudflare DNS 最后应该像这样：
CNAME @ cname.vercel-dns.com 🔶 proxied
CNAME www cname.vercel-dns.com 🔶 proxied
TXT _vercel vc-domain-verify=xxxx
这就是最完整、最标准、最稳定的方案。
🟩 五、在 Vercel 部署前端项目
如果你已经有项目（React/Vue/Vite/Next.js），直接继续。
🔹 1. 登录 Vercel
访问：
https://vercel.com
使用 GitHub 登录。
🔹 2. 导入项目（Import Project）
点击：
New Project → Import Git Repository
选择你的 GitHub 仓库。
🔹 3. 配置框架（无需特别配置）
Vercel 会自动识别：
- Vite
- Vue
- React
- Next.js
只要你的仓库结构正常即可。
点击 Deploy。
Vercel 会自动构建并生成一个 .vercel.app 的访问链接。
🟩 六、将域名绑定到 Vercel
你的项目部署完后，进入项目 → 设置：
Project → Settings → Domains
点击：
Add Domain
输入你的域名：
yourdomain.top
Vercel 会提示检测 DNS：
- 如果 Cloudflare DNS 设置正确 → 立即变绿色 ✔
- 如果不正确 → 会提示你需要的 CNAME / TXT 记录
绑定成功后，你就可以通过：
https://yourdomain.top
访问你的项目了！
🟦 七、可选：添加子域名（多个项目）
你可以为不同项目/后台/接口创建：
admin.yourdomain.top
api.yourdomain.top
h5.yourdomain.top
dev.yourdomain.top
在 Cloudflare 中：
CNAME admin cname.vercel-dns.com
在 Vercel → Add Domain → 填入 admin.yourdomain.top
即可绑定多个项目。
🟩 八、最终流程图
NameSilo（购买域名）
↓
修改 NameServers → Cloudflare 提供的 NS
↓
Cloudflare（DNS + CDN 管理）
↓
设置 CNAME → cname.vercel-dns.com
↓
Vercel（托管你的前端项目）
↓
用户访问 yourdomain.top
🟦 九、写在最后：你现在拥有完整专业级流程
通过本教程，你已经学会：
✔ 如何购买域名
✔ 如何使用最强 DNS（Cloudflare）
✔ 如何部署前端项目
✔ 如何绑定域名
✔ 如何管理子域名
这套流程是当前 最通用、最高质量 的前端项目上线方案。
