Vault
The Lab · Vault · Blueprint · About an hour

Your page, online.

From a file on your computer to a link that opens on your phone, with a real sign-in and a real database when you need them. Vercel or Netlify for the page, Supabase for the data, the CLIs for the work.

Series
Ship It, part 2 of 2.

Before this: Keys, the First Time. Each part works on its own.

In plain English

A page on your computer only works on your computer. This blueprint puts it on the internet at its own address. Your agent asks what the page needs, then does the work from the terminal: it styles the page from your own DESIGN.md if you want, sets up a small database with email sign-in, locks it so each person sees only their own data, tries it on your computer, walks a short safety checklist with you, and deploys it. You create the accounts, do every sign-in yourself, and say yes at each step. It ends with the page open on your phone.

What you get

A live address on Vercel or Netlify, a Supabase project with email sign-in and one locked table, your page in your own look, and a checklist that proves no secret key went out with it.

Why it matters

A page people can open on their phone is a page people use. And once you know the steps, every later page, tool or dashboard you build can go live the same way.

How it works

The host serves the page. The page talks to Supabase with a key that is made to be public. Row Level Security, a rule on each table, decides what that key can reach.

Your seat

You make the accounts, run each sign-in, paste two values into one file, and approve every install, database change and deploy. The agent runs the commands and shows you the proof.

First, what does your page need?

Three questions decide the route: who should see it, whether anyone signs in or saves anything, and whether it is for a business. Your agent asks them and recommends one of these.

  • Just to be seen or shared, and a vendor link is fine. A quick option, below. Nothing to install.
  • A normal public website. Your own page on Netlify or Vercel. Netlify's free plan allows business use; Vercel's free plan is for personal, non-commercial use only.
  • Sign-in and saved data. The starter page in the blueprint, on Vercel or Netlify, with Supabase. This is the main path, and the rest of this page.

The quick options, and what they cost you

Both AI apps can now publish a page for you in one step. They are good for a quick share. They are not your own website.

  • A Claude artifact. Claude Code publishes one self-contained page to claude.ai. Private until you share it, it updates at the same link, and it opens in the Claude phone app. Included with Pro, Max, Team and Enterprise. One page, no backend, and outside images and most scripts are blocked.
  • A ChatGPT Site. Built with Codex on Plus, Pro, Business, Enterprise or Edu. It can include a small database and Sign in with ChatGPT, and it can use a domain you already own. Since 10-15-2026 there is no cap on how many you make; usage limits still apply.
Note
The trade is control.

Quick options live at the vendor's address, under the vendor's limits, with the vendor's sign-in. When you want your own domain, sign-ins you own and data you can take with you, keep reading.

Make it look like you

Optional, about fifteen minutes. A DESIGN.md is one file that holds your colors, fonts and spacing, then a short do's and don'ts. Google published the format openly in April 2026; it is still marked early, so small changes are expected.

  • Collect your look. Hand your agent your website, a logo, a screenshot you like, or answer five questions. It copies from what you give it; it does not invent.
  • It writes DESIGN.md and stops to show you the palette and fonts. Nothing changes until you say yes.
  • It makes itself read it. Neither app reads DESIGN.md on its own: one line, @DESIGN.md, goes in CLAUDE.md; for Codex, one line goes in AGENTS.md.
  • It restyles the page from those values, then checks text contrast and shows you the page at phone and desktop width.

The real build: Vercel and Supabase

Nine checkpoints. Here are the main ones, so none of it is a stranger.

  • It installs the CLIs. The Vercel CLI from npm; the Supabase CLI only if you want database changes kept as files. It says what and where first.
  • You make the Supabase project, in the browser, on the free plan. You read two values off its API Keys page: the project address and the publishable key.
  • You paste those two into config.js yourself. The publishable key is made to be public. The secret key never goes in the page, and this starter never needs it.
  • It locks the table. One SQL file turns on Row Level Security and adds three rules: you can read, add and delete only your own notes. Then it proves every table says locked.
  • You try it on this computer, signing in with the link Supabase emails you.
  • It walks the checklist with you, then deploys. On Vercel, the first deploy of a new project goes live at a public address right away, so the checklist comes first. You add the live address to Supabase's sign-in settings, and open it on your phone: use the short address, <project-name>.vercel.app. The long address and previews may ask you to sign in to Vercel; that is normal.
You'll see
These are the real commands, in the order they run.
npm i -g vercel
vercel whoami
# only if that fails, you run: vercel login
npx serve -l 3000 starter
# try it at http://localhost:3000
vercel deploy --yes
# from starter/: creates the project and puts it live at a public address (after the checklist)
vercel deploy
# later changes: a preview address to check first
vercel deploy --prod
# replaces the live page, on your yes

Your agent checks vercel whoami before anything else and asks you to sign in only if it fails. Signing in over and over gets an account rate-limited.

Note
Want database changes as files? The Supabase CLI.

Simplest is pasting the SQL into Supabase's SQL editor. If you would rather keep every change as a file you can rerun, your agent uses supabase link, supabase migration new and supabase db push --dry-run first. You run supabase login yourself; it needs a real terminal.

Walkthrough
Prefer to watch the clicks? Two walkthrough decks.

Step through Deploy to Vercel and Vault your Supabase keys, screen by screen. They were made before Supabase's new keys, so the Supabase screens show the older key names (anon and service_role). New projects only have the publishable and secret keys; follow this page for which one goes where.

Or Netlify

Same page, same Supabase project, different host. Pick Netlify when the page is for your business and you want to start free: its free plan allows commercial use and includes a custom domain. Vercel's free plan does not allow business use.

npm install -g netlify-cli
# needs Node 22.13 or newer
netlify status
# if not signed in, you run: netlify login
# first time only, from starter/, you run: netlify sites:create
netlify deploy --dir . --no-build
# a draft address to check
netlify deploy --dir . --no-build --prod
# live, on your yes
Know this
Netlify's free plan runs on monthly credits.

A production deploy costs credits, and so does traffic. When they run out, every site on your account shows "Site not available" until the next month. About twenty deploys a month is the ceiling on their own. Netlify's Supabase add-on still sets the old key names, so this blueprint has you paste the new publishable key yourself.

Your keys, without the agent seeing them

Signing in at each terminal is fine to start. If you set up Keys, the First Time, your Vercel, Netlify and Supabase tokens can live in Infisical instead, and your agent runs the CLIs through it.

infisical run -- vercel deploy --prod
infisical run -- netlify deploy --dir . --no-build --prod
infisical run -- supabase db push

You run infisical init once at the root of your workbench to link it to your Infisical project; if you already did it in Keys, the First Time, you are set. After that, the token reaches the one command that needs it and nothing else: not the chat, not a file, not your shell history. Your workbench's secrets guard already allows exactly this.

What you can ask your agent, from now on

Five asks that work once it is live.

Is it live?

Is my page live, at what address, and which deploy is it running? Show me the last three deploys and when each went out.

Is it locked?

List every table in my Supabase project and whether Row Level Security is on for each. Show me the policies on any table that has them.

Preview first

Deploy my latest change to a preview address only, open it at phone width, and tell me what changed before I decide whether it goes live. If the preview asks for a Vercel sign-in, tell me and I'll open it myself.

Any keys out?

Search my page folder for anything that looks like a secret key or token. Show me only the file name and line number of each match, never the line itself.

If I start charging

If I use this page for my business, which plan on my host do I need and what does it cost? Check the current plan pages and give me the dates you read them.

Words you now own

  • Deploy. Sending your page to the host so it is live at an address. Each one is kept, so you can go back.
  • Preview. A deploy at its own temporary address, for checking a change before it replaces the live page.
  • CLI. A tool you run by typing commands. Your agent drives vercel, netlify and supabase this way.
  • Publishable key. Supabase's key for the page itself, starting sb_publishable_. Made to be public.
  • Secret key. Supabase's key that skips every lock, starting sb_secret_. Never in a page, never in the chat.
  • Row Level Security. A rule on a table that decides, row by row, who may read or change it. What makes the publishable key safe.
  • Redirect URL. An address Supabase is allowed to send people back to after the sign-in link. Your live address has to be on the list.
  • DESIGN.md. One file with your colors, fonts and spacing that your agent reads before any visual change.

Before it goes live

Your agent walks this list with you and shows proof for each line. A line without proof is a no.

  • No secret key in the page, and only the publishable key in config.js.
  • Row Level Security on for every table, and signed out, the page shows nothing private.
  • Your live address in Supabase's redirect list, or the sign-in link sends people to the wrong place.
  • Your own email sender before anyone else signs in (SMTP, an email account the page sends from). Supabase's built-in one sends about two emails an hour, only to members of your Supabase organization. Fine for testing with your own address. To test with a second address, invite it to your Supabase organization first (Organization settings, Team), or set up your own sender first.
  • The plan fits the use. Business use on Vercel means Vercel Pro (paid). A free Supabase project pauses after about a week with no activity.
Never
Never paste a key, token or password into the chat.

You sign in to each tool yourself, in your terminal or browser. If an agent ever offers to type a code or a password in for you, the answer is no. The one key you put in a file is the publishable key, and you paste it yourself.

Fair questions

FAQ
Can my agent sign in for me?

No. The sign-in is the one step that proves it is you. The agent runs everything after it, and with Infisical it can run the CLIs without a sign-in session at all.

FAQ
The sign-in email never arrived.

Supabase's built-in sender is slow on purpose: about two an hour, one request a minute, and only to people in your Supabase organization. Use your own address to test, check spam, and set up your own sender before inviting anyone. A second address only gets the link once it is invited to your Supabase organization (Organization settings, Team).

FAQ
Can I put a password on the whole page?

Not on the free plans of Vercel or Netlify; both charge for it. The starter's sign-in protects the data instead. The page itself is public, and shows nothing private to anyone signed out.

FAQ
Why not Next.js?

The starter is one HTML file so it deploys the same way on both hosts with no build step. When you outgrow it, the same Supabase project works with a framework app, and Vercel's Marketplace can then create the project and copy its keys for you.