本地静态网站如何在 Vercel 部署

本文将详细介绍如何将本地开发的静态网站项目推送到 GitHub，并通过 Vercel 实现自动化部署。

前提条件

• 已安装 Git
• 拥有 GitHub 账号
• 拥有 Vercel 账号（可使用 GitHub 账号直接登录）
• 本地已有可运行的静态网站项目

第一步：初始化 Git 仓库

如果你的项目还没有初始化 Git，首先在项目根目录执行：

# 进入项目目录
cd your-project

# 初始化 Git 仓库
git init

# 查看当前状态
git status

第二步：配置 .gitignore

创建或编辑 .gitignore 文件，排除不需要提交的文件：

# 依赖目录
node_modules/

# 构建输出
out/
dist/
build/
.next/

# 环境变量
.env
.env.local
.env.*.local

# 系统文件
.DS_Store
Thumbs.db

# IDE 配置
.vscode/
.idea/

# 日志文件
*.log
npm-debug.log*

第三步：提交代码到本地仓库

# 添加所有文件到暂存区
git add .

# 创建首次提交
git commit -m "Initial commit: 项目初始化"

第四步：在 GitHub 创建远程仓库

方式一：通过 GitHub 网页创建

1. 登录 GitHub
2. 点击右上角 + 号，选择 New repository
3. 填写仓库信息：
   • Repository name: 输入仓库名称（如 my-blog）
   • Description: 可选，添加项目描述
   • Public/Private: 选择公开或私有
   • 不要勾选 "Add a README file"（因为本地已有项目）
4. 点击 Create repository

方式二：使用 GitHub CLI

如果安装了 GitHub CLI，可以直接在命令行创建：

# 创建公开仓库
gh repo create my-blog --public --source=. --remote=origin

# 或创建私有仓库
gh repo create my-blog --private --source=. --remote=origin

第五步：关联远程仓库并推送

如果是通过网页创建的仓库，需要手动关联：

# 添加远程仓库（替换为你的仓库地址）
git remote add origin https://github.com/你的用户名/仓库名.git

# 重命名默认分支为 main（如果需要）
git branch -M main

# 推送代码到远程仓库
git push -u origin main

推送成功后，刷新 GitHub 仓库页面，应该能看到你的代码。

第六步：在 Vercel 导入项目

6.1 登录 Vercel

1. 访问 Vercel
2. 点击 Log In，选择 Continue with GitHub
3. 授权 Vercel 访问你的 GitHub 账号

6.2 导入 GitHub 仓库

1. 在 Vercel Dashboard 点击 Add New... -> Project
2. 在 Import Git Repository 区域找到你的仓库
3. 如果看不到仓库，点击 Adjust GitHub App Permissions 授权访问
4. 点击仓库旁边的 Import 按钮

6.3 配置项目设置

在项目配置页面，根据你的项目类型进行设置：

Framework Preset: Vercel 通常能自动检测框架类型

• Next.js 项目会自动识别
• 纯静态 HTML 选择 Other

Build and Output Settings:

设置项	Next.js 项目	纯静态项目
Build Command	npm run build	留空或自定义
Output Directory	自动检测	out 或 dist
Install Command	npm install	npm install

Environment Variables: 如果项目需要环境变量，在此添加

6.4 部署项目

1. 确认配置无误后，点击 Deploy
2. Vercel 会自动执行构建和部署
3. 等待几分钟，部署完成后会显示预览链接

第七步：配置自动部署

Vercel 默认已配置自动部署，每次推送代码到 GitHub 都会触发：

• Production 部署: 推送到 main 分支
• Preview 部署: 推送到其他分支或创建 PR

验证自动部署

# 修改一些文件后
git add .
git commit -m "Update: 测试自动部署"
git push

推送后访问 Vercel Dashboard，可以看到新的部署正在进行。

第八步：配置自定义域名（可选）

8.1 添加域名

1. 在 Vercel 项目页面，点击 Settings -> Domains
2. 输入你的域名（如 blog.example.com）
3. 点击 Add

8.2 配置 DNS

根据 Vercel 提示，在你的域名服务商处添加 DNS 记录：

方式一：CNAME 记录（推荐子域名）

类型: CNAME
名称: blog (或 www)
值: cname.vercel-dns.com

方式二：A 记录（适用于根域名）

类型: A
名称: @
值: 76.76.21.21

DNS 生效后（通常几分钟到 48 小时），即可通过自定义域名访问网站。

常见问题

Q1: 构建失败怎么办？

1. 查看 Vercel 的构建日志，定位错误信息
2. 确认 package.json 中的构建命令正确
3. 检查 Node.js 版本是否兼容（可在项目设置中指定）

Q2: 环境变量不生效？

• 确保在 Vercel Dashboard 中正确添加了环境变量
• 环境变量修改后需要重新部署才能生效
• 前端可访问的变量需要以 NEXT_PUBLIC_ 开头（Next.js 项目）

Q3: 如何回滚到之前的版本？

1. 进入 Vercel 项目的 Deployments 页面
2. 找到想要回滚的部署版本
3. 点击右侧 ... 菜单，选择 Promote to Production

Q4: 构建时间太长？

• 检查是否有不必要的依赖
• 使用 npm ci 替代 npm install 可加快安装速度
• 考虑使用增量构建（如 Next.js 的 ISR）

总结

通过以上步骤，你已经成功将本地静态网站部署到了 Vercel：

1. 初始化 Git 并提交代码
2. 创建 GitHub 仓库并推送
3. 在 Vercel 导入项目
4. 配置构建设置并部署
5. （可选）绑定自定义域名

Vercel 的 Git 集成让部署变得非常简单，每次推送代码都会自动触发部署，真正实现了 CI/CD 自动化。