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

# Deploy Birthday Wall to Vercel

> Push your fork to GitHub, import the repo into Vercel, add environment variables, and go live — the entire process takes under ten minutes.

Vercel is the recommended hosting platform for Birthday Wall. It is purpose-built for Next.js, handles the build and runtime automatically, and offers a generous free hobby plan that is more than sufficient for a personal birthday site. This page walks you through every step from GitHub push to live URL.

## Local development

Before deploying, you can run Birthday Wall locally to verify your configuration:

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

The dev server starts at `http://localhost:3000`. To test a production build locally before pushing:

```bash theme={null}
npm run build && npm run start
```

If the build succeeds locally with your `.env.local` in place, the Vercel deployment will succeed too.

## Deploying to Vercel

<Steps>
  <Step title="Push your fork to GitHub">
    Make sure your repository is pushed to GitHub (or GitLab / Bitbucket — Vercel supports all three). Vercel needs access to the repository to pull source code and set up automatic deployments.

    ```bash theme={null}
    git add .
    git commit -m "initial setup"
    git push origin main
    ```
  </Step>

  <Step title="Import the repository into Vercel">
    1. Log in to [vercel.com](https://vercel.com) and click **Add New… → Project**.
    2. Under **Import Git Repository**, click **Continue with GitHub** (or your Git provider) and authorize Vercel if prompted.
    3. Find your Birthday Wall repository in the list and click **Import**.
  </Step>

  <Step title="Confirm the framework preset">
    Vercel automatically detects Next.js projects and sets the correct build configuration:

    * **Framework Preset**: Next.js
    * **Build Command**: `next build`
    * **Output Directory**: `.next`
    * **Install Command**: `npm install`

    You do not need to change any of these settings.
  </Step>

  <Step title="Add environment variables">
    Before clicking **Deploy**, scroll down to the **Environment Variables** section and add all five required variables:

    | Variable                        | Value                                                                      |
    | ------------------------------- | -------------------------------------------------------------------------- |
    | `NEXT_PUBLIC_SUPABASE_URL`      | Your Supabase project URL                                                  |
    | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Your Supabase anon key                                                     |
    | `SUPABASE_SERVICE_ROLE_KEY`     | Your Supabase service role key                                             |
    | `NEXT_PUBLIC_SITE_URL`          | Leave as a placeholder for now — you will update it after the first deploy |
    | `ADMIN_PASSWORD`                | Your chosen admin panel password                                           |

    See the [environment variables page](/self-hosting/environment) for descriptions of each variable and where to find the Supabase values.
  </Step>

  <Step title="Deploy">
    Click **Deploy**. Vercel clones your repository, runs `npm install`, then `next build`, and publishes the result. The first build typically takes two to three minutes.

    When the deployment finishes, Vercel shows a **Congratulations** screen with your live URL (e.g. `https://birthday-wall-abc123.vercel.app`).
  </Step>

  <Step title="Set NEXT_PUBLIC_SITE_URL and redeploy">
    Copy the production URL Vercel just assigned to your project. Then:

    1. Go to **Project Settings → Environment Variables**.
    2. Edit `NEXT_PUBLIC_SITE_URL` and paste the production URL as its value.
    3. Trigger a redeployment: go to the **Deployments** tab, find the latest deployment, click the **…** menu, and select **Redeploy**.

    This ensures auth redirects and any absolute URL generation point to your actual domain.
  </Step>

  <Step title="(Optional) Add a custom domain">
    If you want the site to live at a custom domain (e.g. `happy-birthday-alex.com`):

    1. In your Vercel project, go to **Settings → Domains**.
    2. Enter your domain name and click **Add**.
    3. Follow the instructions to add the DNS records at your domain registrar (Vercel provides the exact records to create).
    4. Update `NEXT_PUBLIC_SITE_URL` to your custom domain and redeploy.

    Vercel automatically provisions and renews a TLS certificate for your domain.
  </Step>
</Steps>

## Automatic deployments

<Tip>
  Once your project is connected to GitHub, Vercel automatically deploys every push to the `main` branch as a new production deployment. Every push to other branches gets a unique preview URL, so you can review changes before they go live.
</Tip>

## Admin subdomain (optional)

Birthday Wall supports an optional admin subdomain. Requests to `admin.<your-domain>` are automatically routed to the `/admin` panel. If you want to access the admin panel via a subdomain:

1. In Vercel, go to **Settings → Domains**.
2. Add `admin.<your-domain>` as an additional domain and follow the DNS instructions.

The rewrite happens automatically — no code changes are required.

<Note>
  The free Vercel hobby plan is fully sufficient for a personal birthday site. There are no bandwidth or build minute concerns for typical personal use.
</Note>