The Zero-Dollar Stack: How to Create and Manage a Website with Claude (For Free)

You don't need to be a developer to launch a real, production-quality website. With Claude as your coding partner and a handful of free services, you can go from idea to live URL — with a database, user authentication, and automatic deployments — in a single afternoon.

Would you like to use this skill? Just download it right away.

And now the details…

The Free Stack

Every service below has a generous free tier that covers a serious project with thousands of monthly visitors.

The architecture is deliberately simple: a static frontend (HTML, CSS, JavaScript) served by Vercel, serverless API functions also on Vercel for any server-side logic, and Supabase as the database and auth backend. No servers to manage, no monthly bills for small traffic.

Step 1 — Create Your Accounts

Before writing a single line of code, register for the four services. This takes about ten minutes.

1. GitHub — github.com — Create an account and a new public repository for your project. Public repos work with Vercel's free tier without restrictions.
2. Vercel — vercel.com — Sign up with your GitHub account. This links the two services automatically.
3. Supabase — supabase.com — Create a project. Note your Project URL and your anon (public) key from Project Settings → API. You'll also need the service_role (secret) key later for server-side functions — never expose this in frontend code.
4. Google Cloud Console — console.cloud.google.com — Create a project, enable the Google+ API, and create OAuth 2.0 credentials. You'll need the Client ID and Client Secret for Supabase Auth.

Step 2 — Describe Your Website to Claude

Open Claude at claude.ai and describe what you want to build. Be specific about what the site does, who uses it, and what data it shows. Don't worry about technical details — that's Claude's job.

A good starting prompt looks like this:

“I want to build a website that lists local restaurants with their opening hours, cuisine type, and a user rating. It should have a search bar, filter buttons by cuisine, and a card layout. I want it to look modern and clean. The data will come from a local JSON file.”

Or another example for a more data-driven site:

“I want to build a project tracker where each item has a title, category, status (done / in progress / pending), and a deadline. Group items by category, show a summary bar with total counts, and let users filter by status. Dark header, clean card layout.”

Claude will generate three files: index.html, style.css, and app.js. Ask it to put each in a code block so you can copy them. Save them locally in a folder — this is your project folder.

How to Work With Claude Effectively

• Paste screenshots. If something looks wrong, take a screenshot and paste it directly into the chat. “The stats bar looks like this on mobile — fix it.”
• Share error messages verbatim. Copy the exact browser console error or terminal output.
• Ask for one thing at a time. Small, focused requests produce cleaner results than “do everything at once.”
• Say what you see, not what you think the fix is. “The numbers are misaligned” is better than “set margin-left to 12px.”

Step 3 — Connect to GitHub

GitHub is the bridge between your local files and your live website. Every time you push a change to GitHub, Vercel deploys it automatically within about 30 seconds.

Initialize your repository and push your files:

git init git add . git commit -m "Initial commit" git branch -M main git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git git push -u origin main

After the first push, your standard update workflow becomes just three commands:

git add CHANGED_FILE.html git commit -m "What I changed and why" git push origin main

Important: Never commit secret keys. Create a .gitignore file and add .env to it. Keep your Supabase service key and Google credentials out of any file that gets pushed to GitHub.

Step 4 — Deploy on Vercel

Vercel is where your site lives on the internet. Connecting it to GitHub takes two clicks.

1. Go to vercel.com/new
2. Select “Import Git Repository” and choose your GitHub repo
3. Leave all settings at their defaults and click Deploy

Vercel detects a static site automatically. Your site is now live at YOUR-REPO.vercel.app. Every future git push to the main branch triggers a new deployment — no configuration needed.

Custom Domain

In the Vercel project settings, go to Domains and add your own domain. Point your domain's DNS to Vercel following their instructions. HTTPS is provisioned automatically and for free.

Step 5 — Add a Database with Supabase

Supabase gives you a full PostgreSQL database with a clean web interface and a JavaScript SDK that works directly in the browser.

Create Your Tables

Go to the Table Editor in Supabase and create your tables using the visual interface, or paste SQL into the SQL Editor. For example, a comments table:

create table comments ( id bigint generated always as identity primary key, promise_id integer not null, comment text not null, fulfilled boolean default false, user_email text, created_at timestamptz default now() );

Row-Level Security (RLS)

Enable RLS on every table — it's Supabase's firewall. Without it, anyone with your anon key can read and delete all your data.

-- Allow anyone to insert (for public comment forms) create policy "Anyone can insert" on comments for insert with check (true); -- Only service role can read (for admin use) -- (no select policy = no public reads)

Connect Supabase to Your Frontend

In your app.js, initialize the Supabase client with your public anon key — this key is safe to include in frontend code:

import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm'; const sb = createClient( 'https://YOUR_PROJECT.supabase.co', 'YOUR_ANON_KEY' // safe — anon/publishable key only );

Step 6 — Add Google Login

Supabase Auth handles the entire OAuth flow. Users click a button, authenticate with Google, and land back on your site already logged in.

Configure Google OAuth in Supabase

1. In Supabase: go to Authentication → Providers → Google, toggle it on, and paste in your Google Client ID and Client Secret.
2. In Google Cloud Console: add your Supabase callback URL to the list of Authorized redirect URIs. The URL looks like: https://YOUR_PROJECT.supabase.co/auth/v1/callback
3. Also add your live site URL (e.g. https://yoursite.vercel.app) to Google's Authorized JavaScript origins.

The Login Button

document.getElementById('login-btn').addEventListener('click', () => { sb.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin } }); }); // Restore session on page load const { data: { session } } = await sb.auth.getSession(); if (session) console.log('Logged in as', session.user.email);

Step 7 — Serverless API Functions

Some operations must happen on the server — sending emails, using your secret database key, or validating requests. Vercel provides serverless functions for exactly this. Create an api/ folder in your project root.

// api/comment.js const { createClient } = require('@supabase/supabase-js'); const sb = createClient( process.env.SUPABASE_URL, process.env.SUPABASE_SERVICE_KEY // secret key — safe here, server only ); module.exports = async function handler(req, res) { if (req.method !== 'POST') return res.status(405).end(); const { comment, promise_id } = req.body; const { error } = await sb.from('comments').insert({ comment, promise_id }); if (error) return res.status(500).json({ error: error.message }); res.status(200).json({ ok: true }); };

Set your secret environment variables in Vercel → Project Settings → Environment Variables. They are never exposed to the browser.

The security rule: The Supabase anon key goes in your frontend JavaScript. The Supabase service_role key goes only in Vercel environment variables, used only in api/ functions.

Managing Your Site Day-to-Day with Claude

Once the site is live, Claude becomes your ongoing collaborator. The workflow is always the same:

1. Describe the change to Claude in plain language
2. Claude edits the file (or tells you exactly what to change)
3. You save, commit, and push — the site updates in 30 seconds

This works for everything: tweaking the design, adding a new feature, fixing a bug, updating content in a JSON file, writing a new API endpoint. You don't need to understand every line of code Claude produces — you need to be able to describe the outcome you want.

Keeping Claude in Context

Claude doesn't remember previous conversations. Start each session by sharing the relevant file contents. A practical habit: keep a short project-notes.md file in your repo that describes the stack, the key files, and any conventions. Paste it at the start of a new Claude session.

When Claude Makes a Mistake

It happens. Tell Claude exactly what went wrong — paste the error message, share a screenshot, describe what you expected versus what you see. Claude will diagnose and fix it. The faster you give specific feedback, the faster the iteration cycle.

---

---

Where To Start?

Download the Skill file (.md), drop it to Claude Code and start explain how your website should look like and how to function in plain words.