如何部署一个HTML项目到 Vercel - 详解

如果你 没有使用 React、Vite 或任何前端框架，只是普通的 HTML、CSS 和 JavaScript 项目，那么你可以使用 Vercel 进行部署。以下是完整的操作流程。

---

Step 1: 创建你的项目

在你的电脑上创建一个文件夹，例如：

mkdir my-web-project
cd my-web-project

然后，在该目录下创建你的 HTML、CSS 和 JavaScript 文件：

my-web-project/
│── index.html
│── style.css
│── script.js
│── assets/  （放图片、图标等）
│── README.md

示例 index.html：

Welcome to My Website
This is a static website deployed on Vercel.
<script src="script.js"></script>

示例 style.css：

body {font-family: Arial, sans-serif;text-align: center;padding: 20px;background-color: #f4f4f4;
}

示例 script.js：

console.log("Hello, Vercel!");

---

Step 2: 初始化 Git 并上传到 GitHub

1️⃣ 初始化 Git

在终端（PowerShell / Git Bash / Terminal）执行：

git init

2️⃣ 添加远程 GitHub 仓库

在 GitHub 上创建一个新的仓库（Repository），

然后逐行执行：

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin 
git push -u origin main

此时，你的代码已经上传到 GitHub！

---

Step 3: 在 Vercel 部署

1. 进入 Vercel
2. 点击 "New Project"
3. 选择你的 GitHub 仓库
4. 配置部署
   • Framework Preset:Other（因为不是 React/Vite）
   • Build Command: （空）
   • Output Directory:/（直接使用根目录）
5. 点击 "Deploy"

Vercel 会自动部署，并生成一个 URL，例如：

---

Step 4: 让 Vercel 自动更新部署

以后你只需要修改代码，然后提交到 GitHub：

git add .
git commit -m "Updated content"
git push origin main

Vercel 会自动重新部署你的最新代码！

---

Step 5: 配置 Vercel 自定义域名（可选）

如果你想使用 自己的域名，可以：

1. 进入 Vercel Dashboard
2. 选择你的项目
3. 进入 "Settings" → "Domains"
4. 点击 "Add Domain"
5. 输入你的域名，例如 www.mywebsite.com
6. 更新 DNS 记录，Vercel 会提供 CNAME 记录

---

总结

✅ 本地写好 index.html、style.css、script.js

✅ GitHub 创建仓库并推送代码

✅ Vercel 选择 Other 进行部署

✅ Vercel 自动生成网站 URL

✅ 每次修改代码，GitHub push 后 Vercel 自动更新