🚀大模型落地开发实战指南！请关注微信公众号：「AGI启程号」 深入浅出，助你轻松入门！
📚 数据分析、深度学习、大模型与算法的综合进阶，尽在CSDN博客主页

部署项目链接
最终结果

简介

本文档介绍如何将静态 HTML 项目部署到 Vercel，并在项目中绑定自定义域名，使你能快速拥有一个线上访问站点。

一、准备工作

1. 注册 GitHub 账号
2. 注册 Vercel 账号，并授予 GitHub 仓库访问权限
3. 确保本地已安装并配置好 Git（可选）和 Node.js（如果需要使用 Vercel CLI）

二、将静态 HTML 推送到 GitHub

1. 在本地创建项目文件夹，并将 index.html（入口文件）以及相关静态资源（CSS、JS、图片等）放入其中：

   mkdir my-static-site
   cp path/to/your-file.html my-static-site/index.html
   cd my-static-site
   

2. 初始化 Git 仓库并推送到 GitHub：

   git init
   git add .
   git commit -m "Add static HTML site"
   git branch -M main
   git remote add origin https://github.com/<你的用户名>/my-static-site.git
   git push -u origin main
   

三、在 Vercel 上部署项目

方法一：通过 Vercel 控制台

1. 登录 Vercel 仪表盘。
2. 点击 New Project → Import Git Repository，选择刚才的 my-static-site 仓库。
3. 保持 Build Command 和 Output Directory 为空（Vercel 会自动识别为静态站点）。
4. 点击 Deploy，几秒钟后即可获得 .vercel.app 域名，访问部署的页面。

方法二：使用 Vercel CLI

如果偏好命令行操作，可先全局安装 Vercel CLI：

npm install -g vercel

然后在项目根目录执行：

vercel       # 按提示登录并关联项目
vercel --prod  # 推送到生产环境

执行成功后，CLI 会输出访问 URL。

四、绑定自定义域名

1. 在 Vercel 控制台添加域名

   • 进入项目 Settings → Domains → Add a Domain，输入你的域名（如 example.com 或 www.example.com）并添加。

   • Vercel 会显示需要创建的 DNS 记录：

     • 根域 (example.com)：添加两条 A 记录，指向 76.76.21.21
     • 子域 (www)：添加 CNAME 记录，指向 cname.vercel-dns.com.

2. 在域名注册商处配置 DNS

   • 登录你的域名管理后台（如阿里云、GoDaddy、Namecheap 等），进入 DNS 管理：

     • 主机记录：@        记录类型：A       记录值：76.76.21.21
     • 主机记录：www     记录类型：CNAME   记录值：cname.vercel-dns.com.
     

   • 保存后一般 5–30 分钟内生效。

3. 验证并启用 HTTPS

   • 返回 Vercel 仪表盘，刷新域名状态，显示 “DNS Verified” 即表示解析成功。
   • Vercel 会自动申请 Let’s Encrypt 证书并启用 HTTPS，完成后即可通过自定义域名安全访问。

五、小结

• 静态站点：只需将 index.html 推送到 GitHub，Vercel 可自动部署。
• 自定义域名：在 Vercel 添加域名并在 DNS 提供商处配置 A/CNAME 记录，即可完成绑定与 HTTPS 启用。

通过上述步骤，你可以快速将静态 HTML 项目上线，并使用自己购买的域名访问。祝部署顺利！