Vercel 是全球主流的前端静态网站 / 全栈项目免费托管平台支持绑定 GitHub/GitLab 仓库代码提交后自动打包、上线、分配免费域名常用于部署 Vue/React/HTML/Next.js 等网页项目。准备1GitHub账号2要部署的项目3Vercel账号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.comCNAME/A记录影响想要直接用裸域名 shengshiyouxuan.com 打开网站必须添加根域名空主机记录的 A/AAAA/CNAME 解析记录否则会报找不到服务器打不开网站。2缺少www子域名记录影响想要通过 www.shengshiyouxuan.com 打开网站必须添加一条 www 的 A/AAAA/CNAME 解析记录否则会报404等异常无法访问。3缺少MX邮件记录影响如果你要使用 xxxshengshiyouxuan.com 后缀邮箱收发邮件必须添加 MX 解析记录。如果你不需要企业邮箱这条可以忽略。⚠️ 注意现在还不能直接点最下面的继续按钮当前缺少必要网站解析记录需要先添加对应 Vercel 的 CNAME 记录否则域名激活后网站依然打不开。添加DNS解析记录从Vercel中复制对应的记录如下添加后点击继续如下图所示用Cloudflare nameservers替换你当前的nameservers你的域名是在哪买的就去哪里替换比如我的域名是阿里云买的就去阿里云替换打开阿里云域名查看修改成功后如下配置完之后刷新就能看到此时显示如下说明配置成功了直接访问 https://www.shengshiyouxuan.com/ 此时也是可以直接访问的。配置SSL证书需要更改默认策略时才需要配置这个提示Cloudflare 接入新域名时Automatic SSL/TLS (recommended)本身就是出厂默认值你不点开这个页面、不点 Save系统会一直沿用这套默认加密规则。除非你需要手动修改加密策略时才需要手动修改。提示Cloudflare 接入新域名时Automatic SSL/TLS (recommended)本身就是出厂默认值你不点开这个页面、不点 Save系统会一直沿用这套默认加密规则。除非你需要手动修改加密策略时才需要手动修改。