> ## 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.

# 在 Vercel 和 Supabase 上自托管 Birthday Wall

> 通过 Next.js 在 Vercel 上托管，并使用 Supabase Postgres 数据库，免费部署自己的 Birthday Wall 实例 — 无需任何 DevOps 经验。

Birthday Wall 是一款基于 App Router 构建的 Next.js 应用。你可以使用 Vercel 的 Hobby 免费套餐承载应用层，再用 Supabase 的免费档承载数据库，以零成本上线一份完全可用的个人实例。本页给出整体架构概览，并指引你到每一步设置文档。

## 架构概览

Birthday Wall 把职责清晰地分到两个托管服务中：

| 层级  | 服务                 | 这里运行什么                 |
| --- | ------------------ | ---------------------- |
| 应用层 | Vercel（Next.js）    | 页面、API 路由、服务端逻辑        |
| 数据库 | Supabase（Postgres） | 生日祝福、页面可见性配置、管理员用户、注册码 |

Next.js App Router 负责所有页面渲染，并通过 `/api/` 暴露 API 路由。服务端路由专门使用 Supabase 的 service role key — 你的数据库凭据永远不会被发送到浏览器。公开读取使用 anon key，可以安全暴露。

可选的管理员子域名重写功能可以让你通过 `admin.<your-domain>` 访问管理后台，同时保留默认的 `/admin` 路径。

## 前置条件

开始前，请准备好：

* **Node.js 18 或更高版本** — 用于本地运行和构建 Next.js 应用
* **一个 Supabase 账号** — 免费档已经足够；无需信用卡
* **一个 Vercel 账号** — Hobby 免费套餐对个人生日站完全够用，不必担心用量
* **一个 GitHub 账号** — Vercel 直接从 GitHub 仓库部署

## 部署步骤

按以下三页文档顺序操作，从 Fork 仓库到上线一气呵成：

<Steps>
  <Step title="创建并配置 Supabase 项目">
    创建 Supabase 项目，运行数据库迁移，并收集 API 凭据。

    [设置 Supabase →](/zh/self-hosting/supabase)
  </Step>

  <Step title="设置环境变量">
    为本地开发和 Vercel 部署配置五个必需的环境变量。

    [配置环境变量 →](/zh/self-hosting/environment)
  </Step>

  <Step title="部署到 Vercel">
    在 Vercel 中导入仓库、添加环境变量，然后点击 Deploy。

    [部署到 Vercel →](/zh/self-hosting/vercel)
  </Step>
</Steps>

<Note>
  倒计时、电台、报告和游戏页面都不需要 Supabase 连接也能正常工作。只有祝福墙（`/write` 页面和留言展示）需要数据库。如果你跳过 Supabase 设置，这些功能会报错，但站点其他部分仍然完全可用。
</Note>