部署上线 GitHub+Vercel+CloudFlare

2026/6/30 23:18:58

Vercel 是全球主流的前端静态网站 / 全栈项目免费托管平台，支持绑定 GitHub/GitLab 仓库，代码提交后自动打包、上线、分配免费域名，常用于部署 Vue/React/HTML/Next.js 等网页项目。

准备
1，GitHub账号
2，要部署的项目
3，Vercel账号

1，登录GitHub账号，创建一个新的Project项目，例如名称为todo。
2，将自己要部署的项目直接使用git提交，或者手动给todo仓库中新增添一个简单的index.html的网页作为测试。
3，登录Vercel账号，关联自己的Github账号，然后选择导入刚才创建的github项目，如下图：

点击之后弹框如下：

部署完之后弹框如下：

现在在浏览器中输入链接即可直接访问了：

上面的域名是Vercel自己免费分配的，所以会带上Vercel.app的后缀，如果我们有自己的独特的域名，可以使用我们自己的域名。

使用自己的域名代替Vercel的默认域名

1，购买域名

购买域名（任何域名购买渠道均可，例如：Namesilo）
在Namesilo海外平台购买域名的好处：可以省去国内的备案流程，因为通常备案比较耗时。

购买成功之后备用。

2，在Vercel中配置购买的域名

点击新增的两条记录后面的Edit会看到如下默认的配置（不用更改，默认配置就是行业规范的方案）：

3，在Cloudflare中配置域名

页面如下：

从上面页面我们可知：
自动扫描结果：未检测到任何 DNS 解析记录（同步失败，需要我们手动添加）。
下方黄色文案提示：
Cloudflare 扫描可能遗漏小众、自定义子域名；建议你去域名注册商后台核对，补全缺失记录。
意思就是：我们刚把域名接入 Cloudflare，自动同步时没有识别到任何 DNS 解析记录，系统弹出 3 条缺失提醒，需要补充记录才能正常访问网站。
分别是：
1，缺少根域名@（example.com）CNAME/A记录
影响：想要直接用裸域名 shengshiyouxuan.com 打开网站，必须添加根域名（空主机记录）的 A/AAAA/CNAME 解析记录，否则会报找不到服务器打不开网站。
2，缺少www子域名记录
影响：想要通过 www.shengshiyouxuan.com 打开网站，必须添加一条 www 的 A/AAAA/CNAME 解析记录，否则会报404等异常无法访问。
3，缺少MX邮件记录
影响：如果你要使用 xxx@shengshiyouxuan.com 后缀邮箱收发邮件，必须添加 MX 解析记录。如果你不需要企业邮箱，这条可以忽略。

⚠️ 注意：现在还不能直接点最下面的继续按钮，当前缺少必要网站解析记录，需要先添加对应 Vercel 的 CNAME 记录，否则域名激活后网站依然打不开。

添加DNS解析记录

从Vercel中复制对应的记录，如下：

添加后，点击继续：

如下图所示：用Cloudflare nameservers替换你当前的nameservers，你的域名是在哪买的就去哪里替换，比如我的域名是阿里云买的，就去阿里云替换：

打开阿里云域名查看：

修改成功后如下：

配置完之后，刷新就能看到此时显示如下：

说明配置成功了，直接访问 https://www.shengshiyouxuan.com/ 此时也是可以直接访问的。