轻松上手：使用 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 文件、图片等。

18994f293bf04a6199d3b47aef0c8d78.png

 

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”**按钮。

d65adb426cb44152b5d95692b2b4e636.png

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

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

五、在 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 账号，并选择要部署的仓库。

888f14a5f3bb46139d4c266cd1516d3f.png

6cfacdd3bdc24070a8d34e416da3593b.png

6.2 对 Vercel 项目进行设置

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

b1bc8ac81a6340f6a554cccbeb3b8982.png

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

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

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

7.1 教程前需了解的内容

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

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

7.2 推荐平台

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

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

7.3 在 Vercel 控制台添加域名

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

b4854fc5ec424ce1924776a659c2cf7e.png

当您输入域名并点击 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。

d7c4306b2b1f4ea2a07d4420475e7511.png

在域名管理后台，我将主机记录设置为“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 上，为学习和实践提供更好的支持。

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

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/64766.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【中标麒麟服务器操作系统实例分享】java应用DNS解析异常分析及处理

【中标麒麟服务器操作系统实例分享】java应用DNS解析异常分析及处理

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 情况描述 中标麒麟服务器操作系统V7运行在 ARM虚…
阅读更多...
基于Transformer的自编码器模型在故障检测中的应用

基于Transformer的自编码器模型在故障检测中的应用

在现代工业和制造领域&#xff0c;故障检测是保证设备和生产线安全、高效运行的关键。传统的故障检测方法往往依赖于人工经验或规则&#xff0c;然而&#xff0c;这些方法的准确性和泛化能力有限。随着深度学习技术的迅速发展&#xff0c;越来越多的智能故障检测方法应运而生&a…
阅读更多...
Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导 Sigrity System Explorer Snip Via Pattern From Layout模式支持从其它设计中截取过孔模型用于仿真分析，同样以差分模板为例 具体操作如下 双击打开System Explorer软件…
阅读更多...
2024年度个人总结

2024年度个人总结

一转眼已经2024年度最后一个月了&#xff0c;今年基本没有在CSDN发布内容&#xff0c;包括其他平台&#xff08;B站&#xff09;&#xff0c;倒是在其他地方&#xff08;我的个人网站和V2EX&#xff09;发布一些零碎的东西&#xff0c;主要是因为今年换了工作后太累了&#xff…
阅读更多...
汽车IVI中控开发入门及进阶（42）：OpenVG

汽车IVI中控开发入门及进阶（42）：OpenVG

概览： OpenVG是一个无版权、跨平台的API，它为高级用户界面和矢量图形库（如SVG）提供了一个低级硬件加速接口。OpenVG主要针对需要便携式加速高质量矢量图形以获得引人注目的用户界面和文本的消费电子产品、手持设备、可穿戴设备和汽车设备，同时使硬件加速能够在非常低的功…
阅读更多...
基于微信小程序的消防隐患在线举报系统

基于微信小程序的消防隐患在线举报系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有实…
阅读更多...
如何重新设置VSCode的密钥环密码？

如何重新设置VSCode的密钥环密码？

故障现象&#xff1a; 忘记了Vscode的这个密码&#xff1a; Enter password to unlock An application wants access to the keyring “Default ke... Password: The unlock password was incorrect Cancel Unlock 解决办法&#xff1a; 1.任意terminal下&#xff0c;输入如下…
阅读更多...
springcloud-gateway获取应用响应信息乱码

springcloud-gateway获取应用响应信息乱码

客户端通过springcloud gateway跳转访问tongweb上的应用&#xff0c;接口响应信息乱码。使用postman直接访问tongweb上的应用&#xff0c;响应信息显示正常。 用户gateway中自定义了实现GlobalFilter的Filter类&#xff0c;在该类中获取了上游应用接口的响应信息&#xff0c;直…
阅读更多...
JS萤石云录像回放拖动进度条无法正常播放

JS萤石云录像回放拖动进度条无法正常播放

问题描述&#xff1a; 本项目版本&#xff1a;vue2.6.12&#xff0c;webpack3.6.0&#xff0c;ezuikit-js0.7.2 在使用萤石云的JavaScript SDK做监控的直播、录像回放时&#xff0c;遇到部分设备的录像回放&#xff0c;无法根据控制面板的拖动进度条查看某时间段的录像。 官方…
阅读更多...
2024.12.21辩论赛感受

2024.12.21辩论赛感受

背景 今天辩论赛的双方论点是&#xff1a; 正方&#xff1a;寒假留在研发中心的收获大 反方&#xff1a;寒假去做其他事情的收获 辩论赛&#xff0c;为了锻炼自己&#xff0c;选择了不想选择以及相对不好辩论的反方。出现的状况有一下几点&#xff1a; 1.发现自己脑子完全跟不…
阅读更多...
混元大模型简介及个人运行方案

混元大模型简介及个人运行方案

一、混元大模型简介 混元大模型&#xff08;HunyuanVideo&#xff09;是一个开源的视频生成基础模型&#xff0c;专为高质量的视频生成任务设计。它融合了多项先进技术和创新架构&#xff0c;在视觉质量、多样性、文本与视频的对齐度&#xff0c;以及生成的稳定性方面表现出色…
阅读更多...
图漾相机-ROS1_SDK_ubuntu版本编译(新版本)

图漾相机-ROS1_SDK_ubuntu版本编译(新版本)

文章目录 官网编译文档链接官网SDK下载链接1、下载 Camport ROS1 SDK1.下载git2、下载链接 2、准备编译工作1、安装 catkin2、配置环境变量3. 将Camport3中的linux库文件拷贝到 user/lib目录下4、修改lunch文件制定相机&#xff08;可以放在最后可以参考在线文档&#xff09;**…
阅读更多...
基于Redis的网关鉴权方案与性能优化

基于Redis的网关鉴权方案与性能优化

文章目录 前言一、微服务鉴权1.1 前端权限检查1.2 后端权限检查1.3 优缺点 二、网关鉴权2.1 接口权限存储至Redis2.2 网关鉴权做匹配 总结 前言 在微服务架构中&#xff0c;如何通过网关鉴权结合Redis缓存提升权限控制的效率与性能。首先&#xff0c;文章对比了两种常见的权限…
阅读更多...
leetcode-283.移动零-day13

leetcode-283.移动零-day13

方法一&#xff1a;双指针遇 0 交换 1. 基本思路回顾 该方法使用了两个指针m和i&#xff0c;m用于标记当前已经处理好的非零元素应该放置的位置&#xff0c;i用于遍历整个数组。当遇到nums[m]为0时&#xff0c;会通过内层while循环找到下一个非零元素&#xff08;如果存在的话…
阅读更多...
【Python入门】Python控制成分

【Python入门】Python控制成分

文章一览 一 、顺序结构二、分支结构多分支结构 三、循环结构1. for语句循环结构range&#xff08;&#xff09;函数 2. while语句构成循环1&#xff09;while 循环流程 3、for 循环和 while 循环的区别4、for 循环和 while 循环效率比较 四、函数1、函数定义1) 内置函数2) 非内…
阅读更多...
scala中模式匹配的应用

scala中模式匹配的应用

package test34object test6 {case class Person(name:String)case class Student(name:String, className:String)// match case 能根据 类名和属性的信息&#xff0c;匹配到对应的类// 注意&#xff1a;// 1 匹配的时候&#xff0c;case class的属性个数要对上// 2 属性名不需…
阅读更多...
【D3.js in Action 3 精译_046】DIY 实战：在 Observable 平台利用饼图布局函数实现 D3 多个环形图的绘制

【D3.js in Action 3 精译_046】DIY 实战：在 Observable 平台利用饼图布局函数实现 D3 多个环形图的绘制

当前内容所在位置&#xff1a; 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 ✔️ 5.1.1 准备阶段&#xff08;一&#xff09;5.1.2 饼图布局生成器&#xff08;二&#xff09;5.1.3 圆弧的绘制&#xff08;三&#xff09;5.1.4 数据标签的添加&#xff08;四&#…
阅读更多...
IP地址查询的背后②：IP地址（IPv4）的构成、类型以及子网划分

IP地址查询的背后②：IP地址（IPv4）的构成、类型以及子网划分

自从各大平台将IP地址显示之后&#xff0c;相信广大网友对于IP地址相当不陌生了。而我们见到的IP地址往往只会显示在某市&#xff0c;更仔细的会看到有一段段字节所显示的字符串&#xff0c;而IP地址看似由很简单的1-255之间的数字所组成的四个部分&#xff0c;但其实质上则是二…
阅读更多...
使用 DeepSpeed 微调 OPT 基础语言模型

使用 DeepSpeed 微调 OPT 基础语言模型

文章目录 OPT 基础语言模型Using OPT with DeepSpeedmain.py 解析1、导入库和模块2、解析命令行参数3、main 函数3.1 设备与分布式初始化3.2 模型与数据准备3.3 定义评估函数3.4 优化器与学习率调度器设置3.5 使用 deepspeed 进行模型等初始化3.6 训练循环3.7 模型保存 4、dsch…
阅读更多...
计算机网络-GRE Over IPSec实验

计算机网络-GRE Over IPSec实验

一、概述 前情回顾&#xff1a;上次基于IPsec VPN的主模式进行了基础实验&#xff0c;但是很多高级特性没有涉及&#xff0c;如ike v2、不同传输模式、DPD检测、路由方式引入路由、野蛮模式等等&#xff0c;以后继续学习吧。 前面我们已经学习了GRE可以基于隧道口实现分支互联&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023