Terra Studio Session

Ship It: From Claude Code to a Live Website

Set up your machine so you can build with AI and deploy to the web in under 30 minutes.

Last updated: March 3, 2026

C
Claude Code
Build with AI
→
GitHub
Store & version
→
Vercel
Deploy live
+
Supabase
Database & auth

First: Why These Four Tools?

If you're not from a tech background, the number of tools can feel overwhelming. Here's the thing: each one does one specific job, and together they give you a complete system for building and sharing things on the web. Think of it like a kitchen — you need a stove, a fridge, a sink, and counter space. Each has a role.

C

Claude Code — Your AI Builder

What it is: An AI assistant that lives in your terminal (that black window where you type commands). You describe what you want in plain English, and it writes the code for you.

Real-world analogy: It's like having an expert developer sitting next to you who does exactly what you ask. "Make me a website with a blue header and a contact form" — and it just does it.

Why not just use ChatGPT? ChatGPT gives you code snippets you'd need to copy-paste into files. Claude Code actually creates and edits the files directly on your computer. It sees your whole project and makes changes in context.

GitHub — Your Backup & History

What it is: A place on the internet that stores your code safely. It keeps a complete history of every change you've ever made, so you can always go back if something breaks.

Real-world analogy: It's like Google Docs for code. Your work is saved in the cloud, you can see every version, and multiple people can collaborate on the same project.

Why do I need it? Without GitHub, your code only lives on your laptop. If your laptop dies, your work is gone. GitHub also connects to Vercel (below) to make your site go live automatically.

Vercel — Your Website Host

What it is: A service that takes your code from GitHub and turns it into a live website that anyone in the world can visit.

Real-world analogy: If GitHub is where you store your manuscript, Vercel is the printing press that publishes it. Every time you update your manuscript (push code to GitHub), Vercel automatically publishes a new edition.

Why not just use Squarespace or Wix? Those work great for standard websites. But they can't host the custom tools, dashboards, and AI-powered apps you'll build. Vercel can host anything, and it's free for personal projects.

Supabase — Your Database & User Accounts

What it is: A service that stores data (like user accounts, form submissions, survey responses, or any information your app needs to remember) and handles login/signup for your users.

Real-world analogy: If your website is a restaurant, Supabase is the kitchen's filing system and the front desk combined. It remembers who your customers are (user accounts) and stores all your orders and inventory (data).

Do I always need this? No! A simple landing page or portfolio doesn't need Supabase. You need it when your app has to remember things — user accounts, submitted data, saved preferences, etc. You can add it later when you're ready.

💡 How they all connect

Here's the flow in plain English: You tell Claude Code what to build. It writes the code on your computer. You save that code to GitHub (like hitting "save to cloud"). Vercel sees the new code on GitHub and automatically makes your website live. If your app needs to store data or have user logins, it talks to Supabase behind the scenes. You set this up once, and then it just works.

0

Before You Start

What you need to have ready before the session.

⏱
Total setup time: ~25-35 minutes. Most of it is one-time setup. Once done, future deploys happen automatically when you push code.
💡 Cost Expectations

Claude Code is included with your Claude Pro subscription ($20/month) — no extra charges for this session. GitHub is free. Vercel's Hobby tier is free for non-commercial projects. Supabase's free tier is generous (50,000 monthly active users, 500MB database). A domain name is optional at ~$8-12/year.

1

Install Claude Code

Claude Code is Anthropic's AI coding tool that runs in your terminal. It can read your files, write code, run commands, and help you build entire projects through conversation.

Step 1: Install Node.js

Claude Code requires Node.js version 18 or higher. The native Claude Code installer doesn't strictly require it, but you'll need Node.js for most web projects anyway — so let's install it now.

Open Terminal (press Cmd + Space, type "Terminal", hit Enter).

# Check if you already have Node.js installed $ node --version # If you see v18+ or v20+, skip to Step 2! # If not installed, the easiest way is to download from nodejs.org: # Go to https://nodejs.org and download the LTS version (v24) # Run the .pkg installer and follow the prompts # After installing, close and reopen Terminal, then verify: $ node --version v24.x.x

Open PowerShell (press Win + X, select "Terminal" or "PowerShell").

# Check if you already have Node.js installed > node --version # If you see v18+ or v20+, skip to Step 2! # If not installed: # Go to https://nodejs.org and download the LTS version (v24) # Run the .msi installer # IMPORTANT: Check the box "Automatically install necessary tools" # After installing, close and reopen PowerShell, then verify: > node --version v24.x.x
⚠️ Windows users

Make sure to check "Add to PATH" during installation. If node --version doesn't work after installing, restart your computer.

# Install using NodeSource (works on Ubuntu/Debian) $ curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash - $ sudo apt-get install -y nodejs # Verify installation $ node --version v24.x.x

Step 2: Install Claude Code

Now install Claude Code globally using npm (the package manager that came with Node.js).

# Install Claude Code globally $ npm install -g @anthropic-ai/claude-code # This may take a minute. When done, verify: $ claude --version
⚠️ Permission error on Mac/Linux? (EACCES)

Do NOT use sudo to fix this. Instead, use one of these two approaches:

Option A — Use nvm (recommended):

# Install nvm (Node Version Manager) $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # Close and reopen your terminal, then install Node $ nvm install --lts $ nvm use --lts # Now this will work without sudo: $ npm install -g @anthropic-ai/claude-code

Option B — Fix npm's global prefix:

$ mkdir -p ~/.npm-global $ npm config set prefix '~/.npm-global' # Add to your shell profile (~/.zshrc on Mac, ~/.bashrc on Linux): $ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc # Reload your shell and retry: $ source ~/.zshrc $ npm install -g @anthropic-ai/claude-code

Step 3: Launch and Sign In

Start Claude Code and sign in with your Claude Pro subscription. No API key needed.

# Create a project folder and navigate into it $ mkdir my-first-project $ cd my-first-project # Launch Claude Code $ claude

Claude Code will open in your terminal. The first time, it will ask you to sign in:

  1. It will open a browser window — sign in with the same account you use for claude.ai
  2. Authorize Claude Code to use your subscription
  3. Return to your terminal — you should see the Claude Code prompt ready
💡 Subscription vs. API key

If you have a Claude Pro, Team, or Enterprise subscription, Claude Code is included — just sign in. You do not need an API key or to set up billing separately. API keys are a separate pay-per-use billing path, mainly for developers building applications.

✅ You'll know it's working when...

You see a prompt where you can type messages to Claude, like a chat interface in your terminal. Try typing: What files are in this directory?

Step 4: Build Your First Project

Let's have Claude Code create a simple website for you. Type this into the Claude Code prompt:

# Type this into Claude Code (not your regular terminal): Create a simple personal landing page with my name, a short bio, and links to my social profiles. Use HTML, CSS, and make it look modern and clean. Create an index.html file.

Claude Code will:

  1. Write the HTML and CSS for you
  2. Create the file(s) in your project folder
  3. Ask for your approval before writing each file

You can iterate! Ask Claude to change colors, add sections, fix things. This is the power of building with AI — you describe what you want in plain English.

💡 Pro tip

You can open the generated index.html file in your browser to preview it. On Mac: open index.html. On Windows: start index.html. Keep Claude Code running in your terminal and keep iterating until you're happy with it.

🎥 Watch: Claude Code Beginner's Tutorial (17 min)

Peter Yang — "Claude Code Beginner's Tutorial: Build a Movie App in 15 Minutes" • See also: Anthropic's official Claude Code training

2

Set Up GitHub

GitHub stores your code in the cloud and keeps a history of every change. It's also how Vercel knows what to deploy.

Step 1: Create a GitHub Account

If you don't have one already:

  1. Go to github.com
  2. Click Sign up
  3. Enter your email, create a password, choose a username
  4. Free plan is perfect — you don't need to pay

Step 2: Install Git

Git is the version control tool that GitHub is built on. You need it on your machine.

# Mac usually has git pre-installed. Check: $ git --version git version 2.x.x # If not installed, macOS will prompt you to install # Command Line Tools. Click "Install" and wait.

Git for Windows is required (per the official Claude Code docs). Download from git-scm.com/download/win

# Run the installer with default settings # After installing, open a NEW PowerShell window and verify: > git --version git version 2.x.x.windows.x
$ sudo apt-get install git $ git --version git version 2.x.x

Step 3: Configure Git with Your Identity

Tell Git who you are (this shows up in your code history):

$ git config --global user.name "Your Name" $ git config --global user.email "your-email@example.com" # Use the same email you used for GitHub

Step 4: Push Your Project to GitHub

The easiest way: let Claude Code do it for you! In Claude Code, type:

# Type this into Claude Code: Initialize a git repo, create a .gitignore file, make an initial commit, then help me create a new GitHub repository and push this code to it.

Claude Code will walk you through the process. It may ask you to install the GitHub CLI (gh) or authenticate with GitHub. Follow its prompts.

If you prefer to do it manually:

# 1. Initialize git in your project folder $ git init $ git add . $ git commit -m "Initial commit" # 2. Go to github.com, click "+" in the top-right, "New repository" # Name it (e.g., "my-first-project"), keep it Private, DON'T add a README # Click "Create repository" # 3. GitHub will show you commands. Copy and run them: $ git remote add origin https://github.com/YOUR-USERNAME/my-first-project.git $ git branch -M main $ git push -u origin main
✅ You'll know it's working when...

You can go to github.com/YOUR-USERNAME/my-first-project and see your files there.

🎥 Watch: Git & GitHub Crash Course for Beginners (~1 hour)

freeCodeCamp.org — "Git and GitHub for Beginners - Crash Course" (you only need the first 15-20 min for this session)

3

Deploy to Vercel

Vercel takes your GitHub repo and turns it into a live website. Every time you push new code, it automatically redeploys.

Step 1: Create a Vercel Account

  1. Go to vercel.com
  2. Click Sign Up
  3. Choose "Continue with GitHub" — this is important! It connects your accounts.
  4. Authorize Vercel to access your GitHub
  5. Select the Hobby plan (free)
⚠️ Hobby plan = non-commercial only

Vercel's Hobby plan is free for personal, non-commercial projects. If you later monetize your project or use it for a business, you'll need to upgrade to their Pro plan ($20/month). For learning and building prototypes, Hobby is perfect.

💡 Why sign up with GitHub?

This creates the link between the two services. Vercel will be able to see your repos and automatically deploy when you push new code.

Step 2: Import Your GitHub Repository

  1. On the Vercel dashboard, click "Add New..." → "Project"
  2. You'll see your GitHub repos listed. Find my-first-project and click Import
  3. On the configuration page:
    • Project Name: keep the default or rename it
    • Framework Preset: leave as "Other" for a plain HTML project
    • Build and Output Settings: leave defaults
  4. Click Deploy

Step 3: Watch It Go Live

Vercel will build and deploy your site. This usually takes 30-60 seconds. When it's done:

🎉 Your site is live!

Vercel gives you a URL like my-first-project.vercel.app. Click it — that's your site, live on the internet. Share it with anyone.

Step 4: The Magic — Automatic Deployments

From now on, every time you push code to GitHub, Vercel automatically redeploys. Try it:

# Make a change to your project using Claude Code: # (type this in the Claude Code prompt) Change the background color to dark blue and make the text white. # Then push to GitHub (in your regular terminal): $ git add . $ git commit -m "Update colors" $ git push # Within ~60 seconds, your live site updates automatically!

This is the full workflow: edit with Claude Code → push to GitHub → Vercel deploys automatically. You never have to manually upload files or deal with hosting.

🎥 Watch: Deploy GitHub Project on Vercel (5 min)

Tech Express — "How To Deploy GitHub Project on Vercel | Step By Step"

4

Set Up Supabase (When You Need a Database)

You don't need Supabase for a simple website. Add it when your project needs to store data (form responses, user-generated content) or have user logins. Many learners come back to this step in week 2 or 3.

Step 1: Create a Supabase Account

  1. Go to supabase.com
  2. Click Start your project
  3. Sign up with GitHub — same as with Vercel, this keeps everything connected.
  4. The free tier is very generous — you won't need to pay unless you're building something with thousands of users.

Step 2: Create a New Project

  1. Click New Project
  2. Give it a name (e.g., "my-first-project")
  3. Set a database password — save this somewhere safe (a password manager is ideal). You'll need it later.
  4. Choose a region close to your users (e.g., "East US" or "West EU")
  5. Click Create new project and wait ~2 minutes for it to set up

Step 3: Get Your Connection Details

Your app needs two pieces of information to talk to Supabase. Think of them as an address and a key to the building:

  1. In your Supabase dashboard, go to Settings (gear icon) → API
  2. You'll see two values you need:
    # Project URL (the "address" of your database) https://xyzcompany.supabase.co # anon/public key (the "visitor key" - safe to use in browser code) eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
⚠️ Two keys, different purposes

Supabase gives you two API keys:

  • anon (public) key — Safe to use in your website/frontend code. It can only do what your Row Level Security (RLS) policies allow. Think of RLS as rules you set in Supabase that say "users can only read/write their own data." With RLS enabled, even if someone sees this key, they can't access other people's data.
  • service_role key — This is a master key that bypasses all security rules. Never put it in your frontend code, never commit it to GitHub. Only use it in server-side code (like Vercel serverless functions) or as a Vercel environment variable.

Rule of thumb: If code runs in the browser, use the anon key. If code runs on the server, you can use the service_role key. When in doubt, use the anon key.

Step 4: Connect Supabase to Your Project

The easiest way — ask Claude Code to do it! In Claude Code, type:

# Type this into Claude Code: Add Supabase to this project. My Supabase URL is [paste your URL] and my anon key is [paste your anon key]. Set up the client library and create a .env.local file for the credentials. Don't commit the .env.local file to git.

Claude Code will:

  1. Install the Supabase client library
  2. Create a .env.local file to store your credentials safely
  3. Add .env.local to your .gitignore so it doesn't get uploaded to GitHub
  4. Set up the connection code

Step 5: Add Credentials to Vercel

Your live website also needs to know how to reach Supabase. Since we don't put secrets in GitHub, we add them to Vercel directly:

  1. In Vercel, go to your project → Settings → Environment Variables
  2. Add two variables:
    Name: NEXT_PUBLIC_SUPABASE_URL Value: https://xyzcompany.supabase.co Name: NEXT_PUBLIC_SUPABASE_ANON_KEY Value: eyJhbGciOi...
  3. Click Save
  4. Redeploy your project (Vercel → Deployments → click "..." on the latest → Redeploy)
✅ You'll know it's working when...

Your live site can save and retrieve data. Try adding a simple form that saves submissions — ask Claude Code: "Add a contact form that saves submissions to Supabase."

What Can You Build With Supabase?

Once connected, ask Claude Code to help you add any of these:

  • User signup and login — "Add Google sign-in using Supabase Auth"
  • Save form data — "Create a feedback form that saves responses to Supabase"
  • Data dashboards — "Store climate survey results in Supabase and show a chart"
  • File uploads — "Let users upload images using Supabase Storage"
  • Real-time features — "Show a live counter of how many people have signed a pledge"
5

Add Your Own Domain Name (Optional)

Want yourname.com instead of project.vercel.app? Here's how.

Step 1: Buy a Domain

If you don't have a domain yet, buy one from a registrar. Recommended options:

Registrar Price (approx.) Notes
Namecheap $8-12/year Popular, straightforward
Cloudflare Registrar $8-10/year At-cost pricing, great DNS
Porkbun $7-10/year Affordable, includes WHOIS privacy

Step 2: Connect to Vercel

  1. In Vercel, go to your project → Settings → Domains
  2. Type in your domain (e.g., yourname.com) and click Add
  3. Vercel will show you DNS records to add. You'll see something like:
    Type: A Name: @ Value: 76.76.21.21
  4. Go to your domain registrar's DNS settings and add those records
  5. Wait 5-30 minutes for DNS to propagate
  6. Vercel will automatically set up HTTPS (free SSL certificate)
💡 Tip

If you're not sure how to change DNS records at your registrar, search for "[your registrar name] add A record" — every registrar has slightly different steps.

Frequently Asked Questions

Why not use Lovable, Bolt, or v0 instead of Claude Code?

Short answer: Those tools are great for quick prototypes. This stack gives you real skills and full control.

Lovable / Bolt / v0 Claude Code + GitHub + Vercel + Supabase
Best for Quick demos, mockups, one-off prototypes Real projects you'll maintain and grow
Code ownership Code lives in their platform Code is fully yours, on your machine and GitHub
Flexibility Limited to what the platform supports Use any framework, library, or tool
Skill building Minimal — the platform does it for you You learn the workflow real developers use
Collaboration Within their platform Standard Git/GitHub — any developer can jump in
Cost at scale Monthly subscription ($20-50+/mo) Claude Pro ($20/mo) + free hosting
Deploy to custom domain Sometimes, with caveats Full control, free on Vercel

Our recommendation: Use Lovable/Bolt for quick throwaway prototypes. Use Claude Code + GitHub + Vercel + Supabase for anything you want to keep, customize, or collaborate on. The skills you learn with this stack transfer to every tech job and project.

Think of it this way: Lovable is like using a meal kit delivery service. Claude Code is like learning to cook with an expert chef standing next to you. Both get food on the table, but one teaches you skills that last.

What about Cursor? Isn't that similar to Claude Code?

Cursor is an AI-powered code editor (a modified version of VS Code). It's excellent and many developers use it daily. Here's the difference:

  • Cursor = a full editor with AI built in. Better if you're comfortable with code editors and want to write code alongside the AI.
  • Claude Code = runs in your terminal, purely conversational. Better for beginners who want to describe what they want in plain English and have the AI write all the code.

As you advance, you might use both! But for getting started, Claude Code's conversational approach is simpler.

How much does this cost?
ServiceCost
Claude Pro subscription (includes Claude Code)$20/month — no extra usage charges
GitHubFree (public and private repos)
Vercel (Hobby plan)Free for non-commercial use (includes custom domains, HTTPS, 100GB bandwidth/mo)
Supabase (Free tier)Free (up to 50,000 monthly active users, 500MB database, 1GB file storage)
Domain name (optional)~$8-12/year

Bottom line: With your existing Claude Pro subscription, the rest of the stack is free. You can run a full-featured web app with a database at no additional cost.

Do I need an API key for Claude Code?

No, not if you have a Claude Pro (or Team/Enterprise) subscription. When you launch Claude Code for the first time, choose to sign in with your subscription account — the same login you use at claude.ai. Claude Code usage is included in your subscription at no extra cost.

API keys are a separate billing path for developers who want pay-per-use access (e.g., building apps that call Claude programmatically). You don't need one for using Claude Code as a coding assistant. If you accidentally set up API billing, you can switch back to subscription login by running claude logout and then claude again.

Why Vercel instead of Netlify or GitHub Pages?

All three are good options! We chose Vercel because:

  • Simplest GitHub integration — one click to connect, auto-deploys on every push
  • Works with everything — plain HTML, React, Next.js, Python (serverless functions). As you grow, Vercel grows with you
  • Free custom domains + HTTPS — no configuration needed
  • Preview deployments — every branch gets its own URL, great for testing changes before going live

Netlify is very similar and a fine alternative. GitHub Pages is more limited (static sites only, no serverless functions).

Can I use this stack to build more than a simple website?

Absolutely. This same stack scales to serious applications:

  • Full web applications with databases and user accounts (via Supabase)
  • API endpoints and backend logic (Vercel serverless functions)
  • React/Next.js applications
  • Data dashboards that pull from live databases
  • AI-powered tools (using Anthropic's API in your app)
  • Apps where users can sign up, log in, and save their own data

Many production applications used by thousands of people run on exactly this stack. Supabase alone powers apps with millions of users.

I already have a domain on GoDaddy/Squarespace/Wix. Can I use it?

Yes, but it depends on what you mean:

  • If you own the domain and it's currently pointing to a GoDaddy/Squarespace/Wix site: you can change the DNS records to point to Vercel instead, but this will replace your existing site.
  • If you want to keep your existing site and add this as a separate project: buy a new domain or use a subdomain (e.g., project.yourname.com). You can point a subdomain to Vercel while keeping your main site on Squarespace.

To set up a subdomain, add a CNAME record in your registrar pointing project to cname.vercel-dns.com.

Why Supabase instead of Firebase or a regular database?

A few reasons we chose Supabase:

  • It uses standard SQL (PostgreSQL) — the most common database language in the world. What you learn transfers everywhere.
  • Generous free tier — 50,000 monthly active users, 500MB database, built-in authentication. That's enough for most projects.
  • Dashboard for non-coders — you can browse and edit your data in a spreadsheet-like interface, not just through code.
  • Open source — your data isn't locked into a proprietary system. You can always move it.
  • Auth built in — user signup/login (including Google, GitHub sign-in) works out of the box with a few clicks.

Firebase (Google) is also good but uses a non-standard database that makes it harder to switch later. Traditional databases (MySQL, plain PostgreSQL) require you to set up and manage your own server, which is complex. Supabase gives you the power without the headache.

I got an error! What do I do?

The beautiful thing about Claude Code: just tell it about the error. Copy-paste the error message into Claude Code and ask it to fix the problem. It's remarkably good at debugging.

Common issues and quick fixes:

  • "command not found: node" → Close and reopen your terminal after installing Node.js
  • "EACCES permission denied" → Do NOT use sudo. Use nvm instead (see the Claude Code install section above)
  • "remote origin already exists" → Run git remote remove origin then try again
  • Vercel build fails → Check the build logs in your Vercel dashboard for the specific error
  • "Authentication failed" for GitHub → You may need to set up a Personal Access Token. Ask Claude Code to help you with this.
What should I build next?

Now that you have the deployment pipeline set up, here are ideas that use the same stack:

  • A project portfolio — showcase your Terra Studio work
  • A climate data dashboard — pull in public climate APIs and visualize data
  • An AI-powered tool — use the Anthropic API to build a domain-specific chatbot
  • A landing page for a climate initiative or nonprofit you're working with

Ask Claude Code to help you build any of these. The workflow is always the same: describe what you want, iterate, push to GitHub, and it's live.

Quick Reference: Your Daily Workflow

Once everything is set up, this is what your workflow looks like day-to-day:

# 1. Open your project folder $ cd my-first-project # 2. Start Claude Code $ claude # 3. Make changes by chatting with Claude Code # "Add a contact form to the homepage" # "Fix the mobile layout" # "Make the header sticky" # 4. When happy with changes, exit Claude Code (type /exit or Ctrl+C) # 5. Push to GitHub (this triggers auto-deploy to Vercel) $ git add . $ git commit -m "Add contact form" $ git push # 6. Your site updates automatically in ~60 seconds!
💡 Even faster with Claude Code

You can also ask Claude Code to commit and push for you! Just say: "Commit these changes with a good message and push to GitHub"

Helpful Resources

Bookmark these for when you need them.

Claude Code

GitHub

Vercel

Supabase

Community

Built for Terra Studio learners. Last updated March 2026.

Questions? Ask your cohort facilitator or drop a message in the community Slack.