公告

👇 QQ 👇 --- 👇 赞赏 👇


Skip to content

Vercel | 静态部署网站

更新: 3/17/2025 字数: 0 字 时长: 0 分钟

前言

一个网站托管服务平台,可以轻松的一键部署项目,且自带CDN加速

官网:https://vercel.com/

Vercel静态部署网站

准备工作

注册

点击 Sign UP 注册,选择 Hobby 个人爱好者,再取一个昵称,点继续

说明

这里为什么不直接用Github关联登录呢,因为登录不了

至少我是,没关系自己注册后再关联一样的

Vercel静态部署网站

这里选择 Continue With Email 邮箱注册,一会再来关联Github

Vercel静态部署网站

输入邮箱后会发邮件,我们再邮箱点击验证,成功即可

Vercel静态部署网站

Vercel静态部署网站

Vercel静态部署网站

验证成功,我们去重新登录账号,会要手机验证码,选 Chinese +86

Vercel静态部署网站

输完验证码,我们就注册完成了

Vercel静态部署网站

使用

部署项目

在 GitHub 仓库上传好代码,点击 Add a New Project 新增一个项目

Vercel静态部署网站

我们再选择 Github ,跳出关联确认

Vercel静态部署网站

Vercel静态部署网站

这里还是没有加载出仓库,我们选择底部 导入第三方仓库

Vercel静态部署网站

粘贴我们的仓库地址,并授权对Giithub仓库进行修改

Vercel静态部署网站

Vercel静态部署网站

我们先返回去看,仓库就都有了,我们选择想要的仓库 import 导入

Vercel静态部署网站

这里一般都默认不用改,会自动识别框架

说明

如果你是源文件还未构建,需要打开下方按键并填入

已经是静态文件了,不用打开按钮

Vercel静态部署网站

我是VitePress,根据文档命令改正确,然后 Deploy 发布

特别注意

依赖、构建命令和静态文件夹保证都是对的,否则会失败

如果你安装了插件,也必须和依赖整合在一起安装!!!

Vercel静态部署网站

耐心等待一会就自动部署完成啦,还能看到我们的首页

Vercel静态部署网站

点击 Continue to Dashboard 进入面板, Domains 就是我们的访问链接

说明

是不是发现访问不了,因为自带域名被墙了,我们需要使用自己的域名

Vercel静态部署网站

点击 Domains 进入域名管理,这里输入我们自己的域名 Add 添加

Vercel静态部署网站

这里我只选择新增一个一级域名,不喜欢用www,可以根据自己的需求

说明

前两个实际就是一个重定向的区别

第一个:输入 www.yiov.top ,实际访问 yiov.top

第二个:输入 yiov.top ,实际访问 www.yiov.top

第三个:就只访问 yiov.top

Vercel静态部署网站

现在他要求我们去解析域名,添加A记录

Vercel静态部署网站

我以腾讯云为例,添加域名解析 @ ,记录值为 76.76.21.21

说明

官方的其他解析值,任选一即可

  • A记录:76.223.126.88

  • cname记录: cname-china.vercel-dns.com

Vercel静态部署网站

等一会它解析完成就可以了

Vercel静态部署网站

我们访问看看,完全OK

Vercel静态部署网站

部署失败

部署失败后,可以点击 Error 查看什么原因

Vercel静态部署网站

这里告诉我是有23条死链,展开看一下

Vercel静态部署网站

已经告诉你在哪个文件中,哪一段是有问题的,依次修改即可

非常贴心,Vercel!YYDS!

Vercel静态部署网站

延迟优化

先使用 炸了么 测一下自己网站的速度

可以看到即便有vercel自带的cdn加成,仍还有超时的区域

Vercel静态部署网站

使用 @Fgaoxing 维护的Vercel节点,类似cf的优选节点

我们解析这里修改成 CNAME 记录,值 vercel.cdn.yt-blog.top,确认添加

Vercel静态部署网站

返回炸了么,再次测速,发现基本上都绿了

有超时的节点是没办法的,已经很不错了

Vercel静态部署网站

特别鸣谢

贡献者

The avatar of contributor named as XingJi-love XingJi-love

页面历史