Vercel 是 Birthday Wall 推荐的托管平台,因为它为 Next.js 而生,自动处理构建和运行时,并提供慷慨的 Hobby 免费套餐,对一个个人生日站来说绰绰有余。本页将带你完成从 GitHub 推送到上线 URL 的每一步。Documentation Index
Fetch the complete documentation index at: https://help.helloazhenweb.top/llms.txt
Use this file to discover all available pages before exploring further.
本地开发
部署前可以先在本地运行 Birthday Wall 来验证你的配置:http://localhost:3000。在推送前如需本地测试生产构建:
.env.local 在本地构建成功,Vercel 上的部署也会成功。
部署到 Vercel
把 Fork 推送到 GitHub
确保你的仓库已经推送到 GitHub(或 GitLab / Bitbucket — Vercel 这三家都支持)。Vercel 需要访问仓库以拉取源代码并设置自动部署。
在 Vercel 中导入仓库
- 登录 vercel.com,点击 Add New… → Project。
- 在 Import Git Repository 下点击 Continue with GitHub(或你的 Git 服务商),按提示授权 Vercel。
- 在列表中找到你的 Birthday Wall 仓库,点击 Import。
确认框架预设
Vercel 会自动识别 Next.js 项目并设置正确的构建配置:
- Framework Preset:Next.js
- Build Command:
next build - Output Directory:
.next - Install Command:
npm install
添加环境变量
在点击 Deploy 之前,请向下滚动到 Environment Variables 区域,添加全部五个必需变量:
每个变量的说明以及如何在 Supabase 中找到对应值,请参阅 环境变量页面。
| 变量 | 值 |
|---|---|
NEXT_PUBLIC_SUPABASE_URL | 你的 Supabase 项目 URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY | 你的 Supabase anon 密钥 |
SUPABASE_SERVICE_ROLE_KEY | 你的 Supabase service role 密钥 |
NEXT_PUBLIC_SITE_URL | 暂时留作占位 — 首次部署完成后再回来更新 |
ADMIN_PASSWORD | 你为管理后台选定的密码 |
部署
点击 Deploy。Vercel 会克隆你的仓库,运行
npm install,然后执行 next build 并发布结果。首次构建通常需要 2 到 3 分钟。部署完成后,Vercel 会显示 Congratulations 页面,并给出你的上线 URL(如 https://birthday-wall-abc123.vercel.app)。设置 NEXT_PUBLIC_SITE_URL 并重新部署
复制 Vercel 刚刚分配给你项目的生产 URL。然后:
- 进入 Project Settings → Environment Variables。
- 编辑
NEXT_PUBLIC_SITE_URL,把生产 URL 粘贴为它的值。 - 触发一次重新部署:在 Deployments 标签页找到最新部署,点击 … 菜单并选择 Redeploy。
自动部署
管理员子域名(可选)
Birthday Wall 支持一个可选的管理员子域名。指向admin.<your-domain> 的请求会被自动路由到 /admin 后台。如果你希望通过子域名访问后台:
- 在 Vercel 中前往 Settings → Domains。
- 添加
admin.<your-domain>作为附加域名,并按提示配置 DNS。
Vercel 的 Hobby 免费套餐对个人生日站来说完全够用。在典型的个人使用场景下,无需担心带宽或构建时长。