MyBlog 部署指南 — 从零部署到 Vercel

前置准备

在开始部署之前，你需要准备以下账号和工具：

• GitHub 账号 — 用于托管代码仓库
• Vercel 账号 — 部署平台（vercel.com，可用 GitHub 登录）
• Neon 账号 — Serverless PostgreSQL 数据库（neon.tech，免费额度足够个人博客）
• Node.js 18+ — 本地开发环境

第一步：创建数据库

1. 注册 Neon 并创建项目

1. 访问 neon.tech，注册并登录
2. 点击 New Project，选择离你最近的区域（如 Singapore）
3. 创建完成后，在 Dashboard 中找到 Connection string
4. 复制连接字符串，格式类似：postgresql://user:pass@ep-xxx.region.neon.tech/dbname?sslmode=require

2. 初始化数据库表结构

# 克隆项目
git clone https://github.com/jinlong5201314/blog_vercel.git
cd blog_vercel

# 安装依赖
npm install

# 创建 .env.local 文件
echo 'DATABASE_URL="你的Neon连接字符串"' > .env.local
echo 'JWT_SECRET="你的随机密钥"' >> .env.local
echo 'ADMIN_PASSWORD="你的管理密码"' >> .env.local
echo 'BLOB_READ_WRITE_TOKEN="稍后配置"' >> .env.local

# 推送数据库结构
npx prisma db push

第二步：配置 Vercel Blob 存储

1. 在 Vercel Dashboard 中进入你的项目
2. 点击 Storage → Create Database → 选择 Blob
3. 创建完成后会自动获得 BLOB_READ_WRITE_TOKEN
4. 将 Token 填入 .env.local 文件中

第三步：部署到 Vercel

方式一：通过 GitHub 自动部署（推荐）

1. 将代码推送到 GitHub 仓库
2. 登录 Vercel，点击 New Project
3. 导入你的 GitHub 仓库
4. 在 Environment Variables 中添加以下变量：

变量名	说明	示例
DATABASE_URL	Neon 数据库连接字符串	postgresql://...
JWT_SECRET	JWT 签名密钥（随机字符串）	my-super-secret-key-2026
ADMIN_PASSWORD	后台登录密码	your-strong-password
BLOB_READ_WRITE_TOKEN	Vercel Blob 读写 Token	（自动生成）

5. 点击 Deploy，等待构建完成

方式二：通过 Vercel CLI 手动部署

# 安装 Vercel CLI
npm i -g vercel

# 登录
vercel login

# 首次部署（会引导项目配置）
vercel

# 后续部署到生产环境
vercel --prod

第四步：绑定自定义域名

1. 在 Vercel 项目设置中点击 Domains
2. 输入你的域名（如 blog.example.com）
3. 按提示在域名 DNS 中添加 CNAME 记录，指向 cname.vercel-dns.com
4. 等待 DNS 生效（通常几分钟到几小时）
5. Vercel 会自动配置 HTTPS 证书

第五步：验证部署

1. 访问博客首页，确认页面正常加载
2. 访问 /admin/login，用设置的密码登录后台
3. 创建一篇测试文章，确认前台能看到
4. 上传一张测试图片，确认 Blob 存储正常

环境变量汇总

变量	必填	说明
DATABASE_URL	是	PostgreSQL 连接字符串
JWT_SECRET	是	JWT 签名密钥
ADMIN_PASSWORD	是	管理后台登录密码
BLOB_READ_WRITE_TOKEN	是	Vercel Blob 存储 Token
REVALIDATE_SECRET	否	手动缓存刷新接口的密钥

常见问题

Q: 构建时报 Prisma 连接错误？

确保 DATABASE_URL 环境变量已在 Vercel 中正确配置，且 Neon 数据库处于活跃状态（免费版会在无活动后暂停）。

Q: 部署后前台看不到新发布的文章？

这是 ISR 缓存延迟。系统已集成 revalidatePath，后台操作会自动刷新缓存。如仍有问题，可通过 POST /api/revalidate?secret=YOUR_SECRET 手动刷新。

Q: 图片上传失败？

检查 BLOB_READ_WRITE_TOKEN 是否正确配置。在 Vercel Dashboard → Storage 中确认 Blob 存储已启用。

Q: 如何更新到最新版本？

# 拉取最新代码
git pull origin main

# 如有数据库结构变更
npx prisma db push

# 部署
vercel --prod

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 打开浏览器访问 http://localhost:3000

本地开发时会自动读取 .env.local 中的环境变量。