跳到主要内容

将 Docusaurus 网站部署到 Vercel

· 阅读需 7 分钟
Eureka X
Eureka X
Mr.Nobody

碎碎念🥱​

为了实现 git pages网站的流畅访问，我曾尝试了各种方法：

  1. 尝试用 cloudflare的 CDN 进行加速，一番折腾之后，加了一个寂寞，故放弃 cloudflare 方案；

后记：可能 cloudflare 加速是有一点作用的，但是之前或许由于这个问题，导致效果不太明显。由于后来部署在 Vercel 后已经能够实现流畅访问了，所以就不弄 cloudflare 了。

  1. 尝试用 阿里云 OSS + CDN的方式进行加速，未遂。原因是 OSS 服务需要域名备案，而域名备案需要ESC(云服务器)，得花钱买，没钱且暂时没精力去折腾什么服务器；

  2. 尝试用 七牛云 的免费 OSS + CDN 进行加速，依旧未遂，还是域名备案问题；

  3. 尝试将网站部署到 Gitee 的 Gitee pages上，以实现加速，但兴致冲冲将代码推送到 Gitee 之后发现，Gitee pages 似乎下线了。😑

以上问题对于有相关背景的程序员来说，也许根本不算什么，分分钟就解决了。但我只是个新手，完全小白，做这个网站完全是兴趣使然，就当图一乐吧。🤣

为什么选择 Vercel？​

主要原因依旧是部署到 git pages 上的网站在国内访问实在是太慢了，想换成 Vercel 看看能不能快一点，结果网站的部署异常的顺利！虽然不见得有多快，但部署实在是省心省力，我开始有点喜欢Vercel了，想写个博客总结一下。在这篇文章中，我将记录将 Docusaurus 网站部署到 Vercel 的主要过程。

准备工作：​

如果之前已经学会将 Docusaurus 网站部署到 git pages 上，那么 Vercel部署 自然就显得简单许多，可以说是易如反掌。反之，则起码需要满足下列三个要求：

  1. 能够构建 Docusaurus 项目；
  2. 能够将与网站相关的代码推送到 github ；
  3. 已购买域名；
特别提醒

如果没自己域名需要"梯子"才能访问部署成功的网站！自定义域名后方可解决该问题！

完成以上准备工作后，网站的文件内容大致是这样的：

如果使用的是 SSH 可以进行连接性测试：

bash
ssh -T git@github.com

预期结果大概是：

如果用的是 https 方式，就用不了上面的测试命令了，但只要 git push 能够成功便可。另外，对于仓库的名称，可以不用是 username.github.io，普通名称的公开仓库应该也可以（没试过，但我推断大概率可以）。

🚀 Vercel 部署步骤​

第一步：注册并连接 GitHub​

打开 Vercel 官网，注册账号（最好 continue with github）。

已安装的 Vercel：

权限设置：

第二步：导入项目​

引入包含 Docusaurus 项目的仓库：

Vercel 会自动检测项目类型并配置构建设置，直接点击部署：

第三步：访问部署结果​

部署成功后大致是这样的：

如果有梯子的话，点击 Vercel 给出的域名就可以访问已经成功部署的网站了。

🌐 域名配置​

为什么需要自定义域名​

没梯子无法访问默认域名，需要配置自定义域名后方可正常访问。

自定义域名的优势​

  • 🌍 全球访问：无需科学上网即可访问
  • 🏢 专业形象：提升网站专业性和品牌形象
  • 🔍 SEO友好：有利于搜索引擎优化
  • 🔗 品牌统一：统一品牌标识和用户体验
  • ⚡ 访问加速：通过 CDN 提供更快的访问速度

🌐 为 Vercel 部署的网站添加自定义域名​

为你的 Vercel 网站配置自定义域名，让用户可以通过你自己的域名访问网站，提升专业性和用户体验。

🔧 步骤一：在 Vercel 中添加域名​

  1. 进入 Vercel 控制台，选择你的项目
  2. 导航到 Settings → Domains
  3. 点击 Add Domain 按钮添加你的自定义域名

📋 步骤二：获取 Vercel 的 NameServers​

添加域名后，Vercel 会提供一组 NameServers 地址，我们需要将这些地址配置到域名注册商处。

⚙️ 步骤三：在阿里云修改 DNS 设置​

  1. 登录阿里云控制台
  2. 进入 域名列表 页面

  1. 找到你要配置的域名，点击 修改DNS

  1. 修改 DNS 服务器地址，将 Vercel 提供的 NameServers 填入此处：

  1. 保存设置，等待 DNS 生效（通常需要几分钟到几小时）

📝 步骤四：查看 Vercel DNS 记录​

Vercel 会提供两种类型的 DNS 记录用于验证和配置：

记录 1：A 记录（用于根域名指向）​

记录 2：CNAME 记录（用于 www 子域名）​

🔄 步骤五：在阿里云添加 DNS 记录​

进入阿里云的 域名解析 页面，添加上述两条记录：

✅ 步骤六：验证配置​

返回 Vercel 控制台，刷新域名配置页面。当所有配置正确时，你应该看到类似以下的成功状态：

🎉 完成！​

🎉 恭喜！ 现在你的 Vercel 网站已经可以通过自定义域名访问了！

⏰ 注意事项​

  • DNS 变更可能需要几分钟到几小时才能完全生效
  • 如果配置后仍无法访问，请检查防火墙设置
  • 建议同时配置根域名和 www 子域名的记录
  • 定期检查 DNS 配置确保正常运行

现在用户可以直接通过你的自定义域名访问网站，享受更快更稳定的访问体验！

后续部署​

之后对博客内容进行更新后，想要再进行部署时，git push 成功之后，Vercel会识别到仓库代码的变换然后自动进行部署了！没错，只需：

bash
git add .
git commit -m "commit message"
git push

性能洞察与网站分析​

此外，我还添加了 Speed Insights 和 Web Analytics 功能，按照 Vercel 提供的教程 进行操作即可，没啥难度。 唯一有点让人感到困惑的可能是第三步。以下是第三步的参考代码：

src/theme/Root.js
import React from 'react';
import { SpeedInsights } from '@vercel/speed-insights/react';
import { Analytics } from '@vercel/analytics/react';

function Root({ children }) {
  return (
    <>
      {children}
      <SpeedInsights />
	  <Analytics />
    </>
  );
}

export default Root;
加载评论中...