How to Build a Website from Scratch with Claude Code (No Coding Required)

The guide

I built gagarank.com, a site that ranks every Lady Gaga song through head-to-head comparisons, without knowing how to code. Claude Code wrote every line; my job was describing what I wanted and giving feedback. Here is exactly how I did it, step by step, so you can do the same for your own idea.

---

1. What it costs

Let's be honest from the start:

Once the site is built, you can cancel Claude and keep only the domain. Vercel and Supabase stay free as long as your traffic is reasonable.

---

2. The building blocks, explained simply

Before starting, it helps to understand the pieces involved. You don't need to understand how they work in detail: Claude handles that. But knowing what each one is for lets you follow what's happening.

The basic vocabulary

The blocks we use

You do not need to learn these technologies. Claude knows them inside out and installs, configures, and codes everything. Your role is to describe what you want and validate the result.

How it all fits together

You describe → Claude codes → The site runs on your machine (localhost)
                                        ↓
              When it's ready → Push to GitHub → Vercel deploys → The site is live!
                                                        ↓
                                     The site reads/writes to Supabase (the database)

Localhost vs production

• Localhost (http://localhost:3000): the site runs on your machine, visible only to you. This is your draft. Command: npm run dev.
• Production (https://yoursite.com): the site is online, visible to everyone. It updates automatically when you push to GitHub.

---

3. The accounts to create

Create these accounts before starting. All are free except Claude.

1. Claude: the AI that codes for you

• Go to claude.com
• Take a Pro or Max subscription
• The free plan is not enough: you need Claude Code, the coding tool

Pro or Max? Pro is enough for a small project (a few sessions). Max gives much higher limits, ideal if you want to build everything in one weekend. You can take it for one month and cancel.

2. GitHub: to store your code

• Go to github.com
• Create a free account
• This is where your code lives, and it's what connects your project to Vercel

3. Vercel: to host the site

• Go to vercel.com
• Sign in with your GitHub account (important, it links the two)
• Pick the Hobby plan (free)

4. Supabase: for the database

• Go to supabase.com
• Create an account (2 free projects included)
• Create a new project:
  • Give it a name (e.g. "mysite")
  • Choose a password (write it down!)
  • Region: pick the one closest to your users
• Once the project is created, note two things (in Settings → API):
  • Project URL: https://xxxxx.supabase.co
  • anon public key: a long key starting with eyJ...

You'll need them later. Claude will ask for them when it wires up the database connection.

---

4. The software to install

1. A code editor (IDE)

Your workstation. You'll see the project files and the terminal where you run Claude.

What's the terminal? The panel (usually at the bottom of the IDE) where you type commands. That's where you launch Claude Code. Open it with Ctrl+` (backtick).

2. Node.js

Go to nodejs.org, download the LTS version (the green one, "Recommended For Most Users"), install it. That's it.

To check, in the terminal: node --version

3. Claude Code

Method 1: from the site (recommended)

Go to claude.com/claude-code and install Claude Code for your system. On first launch, sign in with your Anthropic account.

Method 2: via the terminal

npm install -g @anthropic-ai/claude-code

Then launch it once to sign in:

claude
# Follow the instructions to sign in with your Anthropic account

That's all. No need to install Next.js, React, Tailwind, or anything else. Claude does it for you when you start the project.

4. Git: ask Claude to check

Once Claude is running, ask it:

Check whether Git is installed on my machine and tell me how to install it if not.

Claude runs git --version in the terminal and, if Git is missing, gives you the exact instructions for your system. On Mac it's often already there. On Windows it will point you to git-scm.com.

---

5. MCPs: how Claude connects to your tools

MCP (Model Context Protocol) is what lets Claude connect directly to your tools (Supabase, GitHub, Vercel...) instead of just writing code. With an MCP, Claude can create tables in your database, deploy your site, or read production error logs, without you copy-pasting anything.

How to install them

Claude can install MCPs itself. In a Claude Code session, just ask:

Install the Supabase MCP so you can manage my database directly.

Claude configures the MCP (under the hood, the claude mcp add command). It will likely ask you to create an access token on the tool's site and paste it into the terminal. That's normal: the token is what authorizes Claude to access your account. You do it once.

The MCPs I recommend

• Supabase MCP (near-essential if you have a database). Claude creates your tables, writes the SQL, and verifies everything works, without you opening the Supabase interface. You'll need your Project URL and the service role key (Settings → API → service_role, not the anon key).
• GitHub MCP: repos, pushes, pull requests.
• Vercel MCP: deploys, domains, production errors. Useful once the site is live.
• Remotion MCP (if you make a demo video): gives Claude direct access to the Remotion documentation so it uses the right APIs.

In short: MCPs turn Claude from a "code writer" into an assistant that operates your tools. Tell it to install them, it will guide you.

---

6. Launch Claude and give it the brief

The key moment. You open Claude Code and give it a "mega prompt" describing the whole project. Claude takes care of installing and creating everything.

6.1 Prepare the folder

Create a folder on your computer named after your project. Open that folder in your IDE (File → Open Folder), open the built-in terminal, and launch Claude:

claude

6.2 The kickoff mega prompt

Here's a template you can adapt. The idea is to give everything at once so Claude has the full picture:

I want to build a website [DESCRIBE YOUR IDEA HERE].

Here's what I want:
- [Feature 1]
- [Feature 2]
- [Feature 3]

For the design:
- [Dark/light] theme
- Main colors: [your colors]
- Mood: [modern, elegant, fun, minimalist...]

Tools to use:
- Next.js with TypeScript and Tailwind CSS for the site
- shadcn/ui for components (buttons, cards, menus...)
- Supabase for the database
- Deployment on Vercel
- GitHub for the code

My Supabase info:
- URL: https://xxxxx.supabase.co
- Anon key: eyJ...

Start with a detailed plan before writing any code.
Install everything needed (Next.js, dependencies, shadcn/ui...).
Initialize a Git repo.

6.3 Plan mode

Before Claude starts coding, have it present a plan. Read it and validate it. That's far more efficient than letting it run in one direction and redoing everything.

Type /plan in Claude Code to enter plan mode directly (you can pass the task too, e.g. /plan build the comparison page). Claude then explores and proposes a plan without touching any file until you approve it.

---

7. The workflow: how you work with Claude

The basic loop

1. You describe what you want (plain language)
2. Claude edits the project files
3. You check in the browser (localhost:3000)
4. You give feedback ("too small", "change the color", "add a button")
5. Claude adjusts
6. Repeat

To see the site locally while developing, run this in another terminal:

npm run dev

Then open http://localhost:3000 in your browser. The site refreshes automatically on every change.

A real conversation looks like

You:    "Create the comparison page with two cards side by side.
         Clicking a card records the choice."

Claude: [creates the files, edits the code]

You:    "The text is too small and the cards are too close together"

Claude: [adjusts sizes and spacing]

You:    "Perfect. Now add an Undo button at the bottom"

Claude: [adds the button]

Environment variables

At some point Claude will ask you to create a .env.local file at the project root for your Supabase keys. It's a "secret" file that never gets pushed to GitHub.

If the Supabase MCP is configured, Claude can fetch these values itself. Otherwise it asks you, and you copy-paste them from the Supabase dashboard (Settings → API).

In production (on Vercel), the same variables must be added in the Vercel project settings. Claude can do it with the Vercel MCP, or you do it manually (Settings → Environment Variables).

---

8. Make it beautiful (design and UI)

Pick a color palette

• coolors.co: press Space to generate palettes
• colorhunt.co: palettes sorted by theme
• realtimecolors.com: preview your colors on a fake site

Then tell Claude:

Use these colors as the theme: [pink #FF1493] as primary,
[purple #9D4EDD] as secondary, black background.

Pick the fonts

• Google Fonts: thousands of free fonts
• fontpair.co: font pairing suggestions

Tell Claude: Use "Playfair Display" for headings and "Poppins" for body text.

shadcn/ui: the everyday components

ui.shadcn.com is the component library we use for buttons, cards, dropdowns, tables, modals... Claude knows it perfectly. Just mention what you want and it uses it automatically.

ReactBits: the secret for a "wow" site

reactbits.dev is a free collection of visual components: animated backgrounds, text effects, animations...

1. Browse the site, find an effect you like
2. Copy the link or the code
3. Tell Claude: I found this component on reactbits.dev: [link]. Integrate it as the page background with our colors.

The trap to avoid: don't spend 3 days on design before the site works. Make the features work first, then make it pretty. Claude is very good at "redesigning" a site that already exists.

---

9. Put the site online

9.1 Push the code to GitHub

If Claude hasn't already done it, ask:

Initialize Git, create a GitHub repo, and push the code.

9.2 Deploy on Vercel

Dashboard method:

1. Go to vercel.com
2. Click "Add New Project"
3. Import your GitHub repo
4. Click "Deploy"
5. Two minutes later your site is live at https://my-project.vercel.app

Claude method (with the Vercel MCP):

Deploy the site to Vercel.

9.3 Environment variables in production

Your .env.local file doesn't exist on Vercel. Add the variables:

• With the Vercel MCP: Claude does it directly
• Manually: Vercel Dashboard → your project → Settings → Environment Variables

After adding the variables, redeploy (Deployments → three dots → Redeploy).

9.4 Automatic deployments

From now on, every time you (or Claude) push code to GitHub, Vercel redeploys automatically.

---

10. Buy a domain name

Where to buy

My advice: buy on Vercel if you want zero configuration, on Cloudflare if you want the lowest price.

Connect the domain

Bought on Vercel: automatic.

Bought elsewhere: tell Claude Connect the domain mysite.com to Vercel, and it guides you or does it with the Vercel MCP. You add one DNS record at your registrar pointing to Vercel.

SSL (HTTPS, the padlock) is automatic. Nothing to do.

---

11. Make a demo video with Remotion

Remotion creates videos with code (instead of Premiere Pro). Perfect for product demos.

Tell Claude:

Add Remotion to the project. I want a 30-second demo video for LinkedIn showing:
1. The logo and site title
2. A demo of the main feature
3. The final result
4. A call to action with the site URL

Use the same colors and fonts as the site.

Claude installs Remotion and builds the scenes. You preview the video in the browser and export to MP4. For the full method, including CGI shots scripted in Blender, see my guide How I Make Product Demo Videos with Claude.

---

12. Using Claude Code well: commands and tips

The essential commands

The CLAUDE.md file: your project's memory

Create a CLAUDE.md file at the project root. Claude reads it automatically at every start. Put in it:

• The project description
• The technologies used
• The useful commands
• The important decisions

It's Claude's "permanent memory". Even after a /compact or a new session, it recovers the context.

Just ask Claude: Create a CLAUDE.md file that summarizes the project, and it will.

Managing context

Claude Code compacts the conversation automatically when it gets close to the context limit, so long sessions keep working. You can still run /compact yourself at a natural break point (after a big feature lands) to keep the summary focused on what matters.

Giving effective feedback

Most effective of all: look at the result in the browser, take a screenshot if needed, and describe exactly what's wrong.

---

Conclusion

You've just seen how to build a complete website with a database for about $30. The essential blocks:

• Claude Code to write all the code, with plan mode to validate before it builds
• MCPs so Claude operates your tools directly
• Supabase for the database
• Vercel for hosting
• Remotion for a demo video without touching an editing timeline
• GitHub to store the code
• A domain name for the address

The hard part isn't the tech: it's having a good idea. Claude handles the rest.