如何通过Vercel部署简单静态网站

最近的两篇文章中,我分享了如何通过Github和Netlify部署简单静态网站,这次我们尝试使用Vercel部署简单静态网站。

Vercel 是由 Next.js 团队开发的云端部署平台,专注于静态网站、Serverless 函数和全栈 Web 应用的托管服务,其核心理念是让开发者专注于代码本身,无需繁琐的服务器配置,实现“一次提交,一键上线”的高效部署体验。

一、部署前准备

1.准备静态网站代码

我们需要准备一个,必须包含index.html首页文件的项目文件夹

准备静态网站代码

2.注册 Github 账号,并上传项目

我们需要注册一个Github账号,用于上传项目,并推送到Vercel

① 打击github,注册并登录

② 点击“NEW"新建项目

点击“NEW"新建项目

③输入项目名称和描述后,点击按钮创建项目

输入项目名称和描述后,点击按钮创建项目

④ 点击“uploading an existing file” → “Choose your files”,上传项目文件后,再点击“Commit changes”确定

uploading an existing file

Choose your files

如果是较为复杂的项目(有较多的资源文件夹)需要使用GitHub Desktop上传,详见:如何通过Github部署简单静态网站

二、通过GitHub导入并部署项目

1.注册并关联 Vercel

进入Vercel 官网:https://vercel.com,点击 Sign Up → 选择 Continue with GitHub

2.导入项目

① 点击“Add New…” → “Project”

点击“Add New…” → “Project”② 选择Continue with Github

选择Continue with Github③ 选择刚刚上传到GitHub的项目,点击Import(导入),导入刚刚的项目

导入Github项目④ 点击Deploy部署项目

点击Deploy部署项目⑤ 在项目面板中的Domains下,就能看到系统分配的域名,点击打开就能看到已部署的项目

查看已分配的域名

三、绑定域名

点击Domains旁边的加号,就能进入域名管理页面,添加购买域名

点击Domains旁边的加号

添加或购买域名

上一篇 如何通过Netlify部署简单静态网站
下一篇 写了一个网站图标下载工具