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

> 通过 Fork 仓库、配置 Supabase 并部署到 Vercel，在 10 分钟内上线一个个性化的生日倒计时、祝福墙和音乐电台。

本指南将带你从零开始，在 10 分钟内上线一份 Birthday Wall。你将完成 Fork 仓库、安装依赖、连接 Supabase 数据库、自定义生日配置，并部署到 Vercel。

<Tip>
  第 3–5 步（Supabase 设置和环境变量）只有在你希望祝福墙保存留言时才是必需的。倒计时、音乐电台和游戏在没有数据库连接时也能正常工作 — 你可以直接跳到第 6 步先在本地运行应用。
</Tip>

<Steps>
  <Step title="Fork 并克隆仓库">
    在 GitHub 上 Fork Birthday Wall 仓库，然后把你的 Fork 克隆到本地。

    ```bash theme={null}
    git clone https://github.com/your-username/birthday-web.git
    cd birthday-web
    ```

    从 [github.com/helloxiaozhen/birthday-web](https://github.com/helloxiaozhen/birthday-web) Fork 之后，把 `your-username` 替换成你自己的 GitHub 用户名。
  </Step>

  <Step title="安装依赖">
    Birthday Wall 基于 Next.js 14 和 Supabase。使用 npm 安装所有依赖。

    <CodeGroup>
      ```bash npm theme={null}
      npm install
      ```
    </CodeGroup>
  </Step>

  <Step title="设置 Supabase">
    创建一个 Supabase 项目，并为祝福墙和页面配置创建所需的数据库表。

    完整步骤请参阅 [Supabase 设置指南](/zh/self-hosting/supabase)，其中包括：

    * 创建新的 Supabase 项目
    * 运行迁移 SQL 创建所有必需的数据表
    * 启用行级安全策略（RLS）
    * 获取项目 URL 和 API 密钥
  </Step>

  <Step title="设置环境变量">
    在项目根目录创建一个 `.env.local` 文件，并添加以下变量。变量值可以在 Supabase 项目的 **Project Settings → API** 中找到。

    ```bash theme={null}
    NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
    SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
    NEXT_PUBLIC_SITE_URL=http://localhost:3000
    ADMIN_PASSWORD=your-admin-password
    ```

    | 变量                              | 说明                                       |
    | ------------------------------- | ---------------------------------------- |
    | `NEXT_PUBLIC_SUPABASE_URL`      | 你的 Supabase 项目 URL                       |
    | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | 用于客户端查询的公开 anon key                      |
    | `SUPABASE_SERVICE_ROLE_KEY`     | 用于服务端管理操作的 service role key — 必须保密       |
    | `NEXT_PUBLIC_SITE_URL`          | 应用运行所在的 URL（本地为 `http://localhost:3000`） |
    | `ADMIN_PASSWORD`                | 访问管理后台的密码                                |

    <Warning>
      切勿在客户端代码中暴露 `SUPABASE_SERVICE_ROLE_KEY`，也不要将其提交到版本控制 — 它拥有完整的数据库访问权限。
    </Warning>
  </Step>

  <Step title="自定义生日配置">
    打开 `lib/birthday-config.ts`，用寿星的信息更新 `person` 对象。

    ```typescript theme={null}
    export const birthdayConfig = {
      person: {
        name: "Your Person's Name",
        nickname: "Nickname",
        birthday: {
          month: 6,   // 1–12
          day: 19,    // 1–31
        },
        greeting: "A personal message for them",
      } as BirthdayPerson,

      countdown: {
        title: "Days until birthday",
        expiredTitle: "Today is your birthday",
      },
    };
    ```

    需要设置的字段：

    | 字段               | 说明             |
    | ---------------- | -------------- |
    | `name`           | 在倒计时页面显示的全名    |
    | `birthday.month` | 出生月份（1–12）     |
    | `birthday.day`   | 出生日期（1–31）     |
    | `greeting`       | 显示在倒计时下方的简短祝福语 |
  </Step>

  <Step title="本地运行">
    启动开发服务器，并在浏览器中打开应用。

    ```bash theme={null}
    npm run dev
    ```

    访问 `http://localhost:3000` 查看生日倒计时。访问 `/radio`、`/write`、`/report` 和 `/games` 可以预览所有五个页面。
  </Step>

  <Step title="部署到 Vercel">
    当你准备好分享 Birthday Wall 时，就可以将其部署到 Vercel。

    完整步骤请参阅 [Vercel 部署指南](/zh/self-hosting/vercel)，其中包括：

    * 将代码推送到 GitHub
    * 在 Vercel 中导入仓库
    * 在 Vercel 仪表板中添加所有环境变量
    * 配置自定义域名（可选）

    在 Vercel 设置过程中，记得把 `NEXT_PUBLIC_SITE_URL` 更新为你的生产环境 URL，而不是 `http://localhost:3000`。
  </Step>
</Steps>

## 下一步

Birthday Wall 上线后，可以浏览下面的指南进一步自定义。

<CardGroup cols={2}>
  <Card title="自定义生日配置" icon="calendar-heart" href="/zh/customization/birthday-config">
    修改寿星姓名、日期、问候语和倒计时文案。
  </Card>

  <Card title="为电台添加歌曲" icon="list-music" href="/zh/customization/music-config">
    创建包含歌曲标题、艺人、歌词和封面图的精选歌单。
  </Card>

  <Card title="祝福墙" icon="heart" href="/zh/features/wish-wall">
    了解访客如何提交祝福，以及如何在后台管理它们。
  </Card>

  <Card title="环境变量参考" icon="key" href="/zh/self-hosting/environment">
    全部必选与可选环境变量的完整列表。
  </Card>
</CardGroup>