跳转到主要内容

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.

本指南将带你从零开始，在 10 分钟内上线一份 Birthday Wall。你将完成 Fork 仓库、安装依赖、连接 Supabase 数据库、自定义生日配置，并部署到 Vercel。
第 3–5 步（Supabase 设置和环境变量）只有在你希望祝福墙保存留言时才是必需的。倒计时、音乐电台和游戏在没有数据库连接时也能正常工作 — 你可以直接跳到第 6 步先在本地运行应用。
1

Fork 并克隆仓库

在 GitHub 上 Fork Birthday Wall 仓库，然后把你的 Fork 克隆到本地。
git clone https://github.com/your-username/birthday-web.git
cd birthday-web
从 github.com/helloxiaozhen/birthday-web Fork 之后，把 your-username 替换成你自己的 GitHub 用户名。
2

安装依赖

Birthday Wall 基于 Next.js 14 和 Supabase。使用 npm 安装所有依赖。
npm install
3

设置 Supabase

创建一个 Supabase 项目，并为祝福墙和页面配置创建所需的数据库表。完整步骤请参阅 Supabase 设置指南，其中包括：
  • 创建新的 Supabase 项目
  • 运行迁移 SQL 创建所有必需的数据表
  • 启用行级安全策略（RLS）
  • 获取项目 URL 和 API 密钥
4

设置环境变量

在项目根目录创建一个 .env.local 文件，并添加以下变量。变量值可以在 Supabase 项目的 Project Settings → API 中找到。
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访问管理后台的密码
切勿在客户端代码中暴露 SUPABASE_SERVICE_ROLE_KEY，也不要将其提交到版本控制 — 它拥有完整的数据库访问权限。
5

自定义生日配置

打开 lib/birthday-config.ts，用寿星的信息更新 person 对象。
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显示在倒计时下方的简短祝福语
6

本地运行

启动开发服务器，并在浏览器中打开应用。
npm run dev
访问 http://localhost:3000 查看生日倒计时。访问 /radio、/write、/report 和 /games 可以预览所有五个页面。
7

部署到 Vercel

当你准备好分享 Birthday Wall 时，就可以将其部署到 Vercel。完整步骤请参阅 Vercel 部署指南，其中包括：
  • 将代码推送到 GitHub
  • 在 Vercel 中导入仓库
  • 在 Vercel 仪表板中添加所有环境变量
  • 配置自定义域名（可选）
在 Vercel 设置过程中，记得把 NEXT_PUBLIC_SITE_URL 更新为你的生产环境 URL，而不是 http://localhost:3000。

​
下一步

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

自定义生日配置

修改寿星姓名、日期、问候语和倒计时文案。

为电台添加歌曲

创建包含歌曲标题、艺人、歌词和封面图的精选歌单。

祝福墙

了解访客如何提交祝福，以及如何在后台管理它们。

环境变量参考

全部必选与可选环境变量的完整列表。