How to Build Your Own Website with Claude Code, GitHub, Vercel and Supabase

The 4 tools and their jobs

• VS Code + Claude CodeYour workshop and your builder. VS Code is a free code editor. Claude Code is an AI assistant inside it that writes the code and makes changes when you ask.
• GitHubA safe online storage box with an undo history. It stores your code and keeps every version.
• VercelThe shop window. It takes your code from GitHub and puts your website on the internet.
• SupabaseYour filing cabinet. A database that saves information from your site, like contact-form messages.

How the pieces fit together

Step 1: Install the basic tools

1. 01

   Install VS Code

   Go to code.visualstudio.com and click Download for your computer. Open the downloaded file and follow the installer. On Windows, keep the defaults and tick Add "Open with Code" action if you see it. Open VS Code. You can close the Welcome tab.

2. 02

   Install Node.js

   Go to nodejs.org. Download the version marked LTS (long-term support, the stable version). Run the installer and keep all the defaults.

3. 03

   Install Git

   Windows: download Git for Windows from git-scm.com/downloads/win and install it with the defaults. Claude Code also works better on Windows when Git is installed. Mac: Git is often already installed. If not, the check below will offer to install it.

4. 04

   Check that everything works

   VS Code has a built-in terminal: a window where you type commands. Open it from the top menu: Terminal → New Terminal. Type each line and press Enter:

node --version

npm --version

git --version

Each one should print a version number, like v22.x.x. If you see "not recognized" or "command not found", close VS Code completely and open it again. Programs installed while VS Code was open only show up after a restart.

Step 3: Plan your website

Claude does its best work when it knows exactly what you want. Before building, write a short brief.

1. 01

   Write your website brief

   A few lines for each:

   Who is the site for?

   Business name, what it does, where it is

   Who are the visitors?

   For example: local homeowners looking for a plumber

   What should visitors do?

   Call, book, send a message or buy

   Pages and sections

   Home, about, services, reviews, contact

   Style

   Colors, mood (modern, friendly, luxury), a website you like

   Content

   Your real text, phone, email, hours and photos

1. 02

   Ask Claude for a plan first

   Switch to Plan mode and send something like this (with your own brief):

I want to build a simple, modern website. Here is my brief:
Business: Bright Smile Dental, a family dental clinic in Austin, Texas.
Visitors: local families looking for a friendly dentist.
Goal: visitors should send us a message through a contact form or call us.
Sections: hero with a clear headline and button, about us, services, why choose us, contact form, footer with phone, email and address.
Style: clean, calm, light blue and white, mobile friendly.
Please use Next.js with Tailwind CSS. Do not connect a database yet; just build the form design for now.
Explain your plan in simple words before you start.

Read the plan. If something is missing, say so in plain words, like "Add a section for patient reviews" or "Use green instead of blue". When you're happy, approve it.

Step 5: Add a database with Supabase

Right now the form looks good but does nothing. Here you connect it to Supabase so every message is saved.

1. 01

   Create a Supabase project

   Go to supabase.com and sign in with Continue with GitHub. Click New project. Give it a name (like my-website), create a strong database password and save it somewhere safe, then choose the region closest to your visitors. Click Create new project and wait a minute or two.

1. 02

   Create the table for contact messages

   A table is like a spreadsheet inside the database. Each message is one row. In your Supabase project, open the SQL Editor from the left menu. Create a new query, paste the code below and click Run.

-- Create a table to store contact form messages
create table contact_messages (
  id bigint primary key generated always as identity,
  created_at timestamptz not null default now(),
  name text not null,
  email text not null,
  message text not null
);

-- Let website visitors ADD a message (but not read others)
grant insert on public.contact_messages to anon;

-- Turn on security rules for this table
alter table contact_messages enable row level security;

-- Rule: anyone can send a message
create policy "visitors can send messages"
on public.contact_messages
for insert to anon
with check (true);

In plain words: this creates a contact_messages table with a security rule. Visitors can send a message but can't read anyone else's. Only you can read them, from your Supabase dashboard.

1. 03

   Copy your project keys

   In Supabase, click the Connect button at the top of the page. Copy two values: the Project URL and the publishable key (starts with sb_publishable_). Older projects may show an anon key instead. It works the same way.

1. 04

   Connect the form with Claude Code

   Back in VS Code:

Connect the contact form to Supabase.
The table is called contact_messages with columns name, email and message.
Use the @supabase/supabase-js package.
Create a .env.local file with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, and leave the values empty for me to fill in.
Make sure .env.local is listed in .gitignore so it is never uploaded to GitHub.
Show a friendly success message after sending, and a clear error message if something goes wrong. Also check that the email looks valid before sending.

When Claude finishes, open the .env.local file (in the file list on the left) and paste your values after the = signs:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxxxxxxxxxx

Save (Ctrl+S / Cmd+S), then ask Claude to restart the preview so it picks up the new values.

1. 05

   Test it

   Open http://localhost:3000, fill in the contact form and send it. In Supabase, open the Table Editor and click contact_messages. Your test message should be there as a new row.

If it doesn't work, copy the error from the page or terminal and paste it into Claude: "The contact form gives this error. Please find and fix the problem."

Step 7: Put your website live with Vercel

1. 01

   Import your project

   Go to vercel.com and log in with Continue with GitHub. Click Add New… → Project. If asked, let Vercel access your GitHub repositories (you can choose just this one). Find your project and click Import. Vercel detects that it's a Next.js site. No need to change the build settings.

2. 02

   Add your Supabase keys

   Your .env.local isn't on GitHub (good), so Vercel doesn't know your keys yet. Before deploying, open Environment Variables on the same page and add:

   NEXT_PUBLIC_SUPABASE_URL

   Your Supabase Project URL

   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

   Your Supabase publishable key

   Forgot? In Vercel go to your project → Settings → Environment Variables, add them, then open Deployments and click Redeploy on the latest one.

3. 03

   Deploy

   Click Deploy and wait about a minute. On the congratulations screen, click the preview to open your live site. The address looks like my-website.vercel.app. Test the contact form on the live site and check that the message shows up in Supabase.

Your website is now on the internet. Share the link with anyone.

Troubleshooting

• "node", "npm" or "git" is not recognized

  Restart VS Code (or your computer) after installing. Still failing? Reinstall that tool with the defaults.

• The Claude Code panel or Spark icon doesn't appear

  Restart VS Code, or press Ctrl+Shift+P and run Developer: Reload Window. Make sure VS Code is up to date (Help → Check for Updates).

• Claude asks me to sign in again ("Not logged in")

  Click Sign in and finish in your browser. Make sure your Claude plan includes Claude Code.

• The contact form says "Something went wrong"

  Check the two values in .env.local (no spaces, no quotes), restart the preview, and make sure you ran the SQL in Step 5.2. Paste the exact error into Claude.

• The form works on my computer but not on the live site

  The keys are missing in Vercel. Add them in Settings → Environment Variables, then redeploy.

• Vercel deployment failed

  Open the failed deployment, copy the error from the build log and paste it into Claude: "My Vercel build failed with this error. Please fix it." Then commit and push again.

• I don't understand what Claude did

  Ask: "Explain the change you just made in simple words, as if I am a beginner."

Good habits and safety rules

• Keep secrets secretNever put passwords, the Supabase secret key or bank details in your code or on GitHub.
• Read before you allowWhen Claude asks to run a command or change a file, take a few seconds to read it.
• One change at a timeCheck each one in the preview before asking for the next.
• Commit oftenSmall saved versions make it easy to go back.
• Check the content yourselfYou're responsible for prices, phone numbers, claims and legal information on your site.
• Collect only what you needIn forms, and add a short privacy note if you collect personal details.