轻松上手：使用 Vercel 部署 HTML 页面教程

😀 在学习前端的过程中，部署项目往往是一个令人头疼的问题。然而，Vercel 为我们提供了一个便捷且免费的解决方案。

Vercel 是一个强大的云平台，专门用于前端项目的部署和托管。它不仅支持多种前端框架和静态网站生成器，还能够自动进行构建和部署，为开发者提供了高效、便捷的开发体验。而且，Vercel 提供了一定的免费额度，每个月有[100G]的免费流量资源，对于学习和小型项目来说已经足够，甚至是个人博客站点也完全可以满足（eg：本博客即部署在Vercel平台）

接下来，我将详细介绍如何使用 Vercel 部署 HTML 页面。

本文示例项目为本人开源项目：

https://github.com/BDTA-zky/GeoWelcome

本文同步更新于个人博客：blog.buzzchat.tophttps://blog.buzzchat.top

一、引言

1.1 Vercel 简介

Vercel 作为现代化的云平台，在前端项目部署方面具有显著优势。它能够快速构建和部署项目，同时保证良好的性能和稳定性。

Vercel: Build and deploy the best web experiences with the Frontend Cloudhttps://vercel.com/

1.2 本教程的主要内容和目标

本教程将引导您完成以下关键步骤：

1. 准备所需的账号和工具。
2. 通过两种方式（Git 方式和直接在页面中上传方式）将项目上传至 GitHub 仓库。
3. 在 GitHub 仓库中添加 vercel.json 文件进行配置。
4. 将 GitHub 仓库连接到 Vercel 并完成部署。
5. 解决国内访问的问题，实现域名解析以确保在国内能够正常访问。

二、准备工作

2.1 注册 Vercel 账号

访问 Vercel 官网（https://vercel.com/） ，点击“Sign Up”按钮，使用电子邮件地址进行注册。注册完成后，记得查看验证邮件并进行验证。

2.2 注册 GitHub 账号（若选择使用 Git 上传）

前往 GitHub 官网（https://github.com/），点击“Sign up for GitHub”按钮，按照提示完成注册流程。

三、上传项目至 GitHub 仓库（Git 方式）

3.1 在本地创建包含 HTML 文件及相关资源的项目文件夹

打开您常用的代码编辑器（推荐VS Code），创建一个新文件夹作为项目目录。在该文件夹中，创建一个 HTML 文件（如 index.html），并添加您的 HTML 代码。同时，您还可以添加其他相关资源文件，如 CSS 文件、JavaScript 文件、图片等。

3.2 初始化 Git 仓库并进行必要配置

在项目文件夹中，打开终端或命令提示符，执行以下命令：

git init
git add.
git commit -m "Initial commit"

• git init：用于在当前项目文件夹中初始化一个 Git 仓库，使其可以进行版本控制操作。
• git add.：将当前文件夹中的所有文件添加到暂存区，准备进行提交。
• git commit -m "Initial commit"：将暂存区的文件提交到本地仓库，并添加一条提交信息"Initial commit"，用于描述这次提交的内容。

3.3 将项目推送到 GitHub 远程仓库

在 GitHub 上创建一个新的仓库。然后，在终端或命令提示符中，运行以下命令将本地仓库与远程仓库关联：

git remote add origin <你的 GitHub 仓库 URL>
git branch -M main
git push -u origin main

• git remote add origin <你的 GitHub 仓库 URL>：将本地仓库与远程的 GitHub 仓库进行关联，其中 <你的 GitHub 仓库 URL> 是你在 GitHub 上创建的仓库的链接。
• git branch -M main：将本地仓库的当前分支重命名为 main，以保持与 GitHub 仓库默认分支的一致性。
• git push -u origin main：将本地的 main 分支推送到关联的 GitHub 仓库的 main 分支上，并设置上游分支，以便后续的推送操作更加方便。

四、上传项目至 GitHub 仓库（直接在页面中上传方式）

4.1 在 GitHub 中创建新仓库

登录 GitHub 账号，点击**“New repository”按钮，创建一个新仓库。填写仓库名称、描述等信息后，点击“Create repository”**按钮。

4.2 通过网页界面直接上传项目文件

在创建好的仓库页面中，点击“Upload files”按钮，选择本地的项目文件进行上传。您可以上传单个文件或整个文件夹。

五、在 GitHub 仓库中添加 vercel.json 文件

5.1 解释 vercel.json 文件的作用

vercel.json 文件是用于配置 Vercel 项目的重要文件，它可以指定项目的构建选项、路由规则、环境变量等信息，确保项目在 Vercel 上能够正确构建和运行。

5.2 提供 vercel.json 文件的示例内容及配置说明

以下是一个简单的 vercel.json 文件示例：

{
    "version": 2,
    "builds": [
        {
            "src": "index.html",
            "use": "@vercel/static"
        }
    ],
    "routes": [
        {
            "src": "/",
            "dest": "/index.html"
        }
    ]
}

在这个示例中:

• "version": 2：表示这个vercel.json文件的版本是2。这有助于Vercel识别和正确处理该配置文件。
• "builds"：这个部分用于指定项目的构建信息。
  • "src": "index.html"：表示要构建的源文件是index.html。这意味着Vercel会将这个文件作为构建的基础。
  • "use": "@vercel/static"：指定了使用@vercel/static构建器来处理构建过程。这个构建器可能会对index.html文件进行一些处理，以确保它能够在Vercel上正确运行。
• "routes"：用于定义路由规则，决定了不同的URL路径如何映射到实际的文件或处理逻辑。
  • "src": "/"：表示当访问根路径（即/）时。
  • "dest": "/index.html"：表示将根路径的请求重定向到/index.html文件。也就是说，当用户访问您的网站的根目录时，Vercel会将其指向index.html文件，从而显示该文件的内容。

六、将 GitHub 仓库连接到 Vercel 并进行部署

6.1 在 Vercel 平台中关联 GitHub 仓库

登录 Vercel 账号，点击“Import Project”按钮，选择“GitHub”作为导入源。然后，授权 Vercel 访问您的 GitHub 账号，并选择要部署的仓库。

6.2 对 Vercel 项目进行设置

导入项目后，您可以对项目进行一些设置，如项目名称、环境变量等。根据实际需求进行相应的配置。(没有其余特殊文件的话，直接修改名字部署即可）

6.3 启动部署过程并监控部署状态

完成项目设置后，点击“Deploy”按钮启动部署过程。Vercel 将自动进行构建和部署，并在部署完成后提供一个访问链接。您可以通过该链接查看您部署的 HTML 页面。

七、解决国内访问问题 - 域名解析

7.1 教程前需了解的内容

vercel.app 作为一个广泛使用的域名，由于其使用量较大，可能在国内部分地区出现访问受限的情况。为了确保在国内能够顺利访问通过 Vercel 部署的网站，进行域名解析是必要的操作。

域名解析可以帮助我们将自定义的域名与 Vercel 提供的服务进行关联，从而提高国内访问的稳定性和流畅性。

7.2 推荐平台

在进行域名解析之前，您需要先购买一个域名。这里为您推荐两个常用的域名购买平台：

1. 阿里云：阿里云是国内领先的云服务提供商，其域名服务功能丰富，操作简便。您可以通过访问阿里云域名购买页面来选购您心仪的域名。
2. 腾讯云：腾讯云也是一个不错的选择，它提供了多种域名后缀可供选择，并且价格相对较为合理。您可以前往腾讯云域名购买页面进行域名购买。

7.3 在 Vercel 控制台添加域名

在 Vercel 控制面板中，依次点击 Settings → Domains → Add，在此处您可以输入您想要绑定的域名。需要注意的是，一个项目可以绑定多个域名。

当您输入域名并点击 Add 后，如果出现提示（Invalid Configuration），这意味着域名已经成功添加，但还需要您根据提示通过添加 CNAME 或 Nameserver 的方式来激活该域名。

7.4 域名解析

在进行域名解析时，Vercel 官方虽然提供了默认的解析方式，但为了获得更好的国内访问效果，我们推荐使用 Vercel 为国内用户提供的单独的 IP 和 CNAME 地址。这些中国特供的地址能够更快地提升国内用户的访问速度和稳定性。中国特供的地址如下：

<aside> 💡

• A 记录地址：76.223.126.88 或 76.76.21.98 等
• CNAME 记录地址：cname-china.vercel-dns.com 

A 记录和 CNAME 记录的区别：

• A 记录：将域名直接指向一个 IPv4 地址。
• CNAME 记录：将域名作为别名指向另一个域名。

域名解析示例：

我购买的域名是 buzzchat.top，现在我将其解析为一个子域名 geowelcome。

在域名管理后台，我将主机记录设置为“geowelcome”，记录类型选择“CNAME”，在“记录值”中填入“cname-china.vercel-dns.com”。

通过这样的设置，我以后如果做其他网页，比如 a.buzzchat.top，b.buzzchat.top，都可以重复上述步骤，复用同一个域名 buzzchat.top，只需将主机记录分别设置为“a”和“b”，并按照相同的方式设置 CNAME 记录即可。

7.5 提升 Vercel 站点在国内的访问效率

使用 Vercel 时，可能会遇到在国内访问速度一般且不稳定的情况，尤其是对于部分地区的用户来说，访问可能会受到一定的限制。为了提升 Vercel 站点在国内的访问效率，我们可以采取一些措施。

一种方法是将网站进行备案，然后购买国内服务商的 CDN 服务，如腾讯云的 CDN 或 EdgeOne。这样可以通过国内的节点来加速访问，提高用户的体验。

另一种较为简便的方法是利用一些国人开放的 CDN 项目，例如：

提升部署在cloudflare、vercel或netlify的网站在中国国内的访问速度和稳定性

https://github.com/xingpingcn/enhanced-FaaS-in-China

这些项目可以在一定程度上改善国内访问的速度和稳定性。

八、总结

通过本教程，我们学习了如何使用 Vercel 部署 HTML 页面，并解决了国内访问的问题。希望同学们能够顺利地将自己的前端项目部署到 Vercel 上，为学习和实践提供更好的支持。

💡 有关本篇博客的任何问题、或者任何想法和建议等，欢迎您在底部评论区留言，一起交流~