How to Put Your Website Online for Free (2026)

Why your localhost link doesn't work

Every computer calls itself "localhost". It's the computer's name for itself, the way you'd say "me". So when Leo sent everyone localhost:3000, each friend's computer read it as "go to me, door 3000". There was nothing behind that door on their machine, so they got an error.

The number after the colon is the port. Think of it as a door number. When you run your project, it opens one door on your own computer and waits there. Next.js uses 3000 by default and Vite uses 5173, which is why you see those numbers so often.

So your site lives on your laptop, behind a door only your laptop can reach. Close the laptop and the site is gone too. Going live means copying it to a computer that's always on and has a real address anyone can type. That's the job Vercel does.

Leo, sending localhost:3000 is like inviting the whole group chat to a party "at my place". Everyone showed up at their own place. Twelve parties, zero guests.

New to Claude Code? Start hereWhat you need before installing anything

A free Vercel account. The free plan is called Hobby. You'll log in once from your browser when Claude asks.
A free GitHub account for Step 2. This is where your code gets its save points.
Claude Code open in your project folder. If you built in Cursor, Lovable or Bolt, get the code into a folder on your computer first and open Claude Code there.
Node.js installed. The npx command comes with Node.js. If your terminal says it can't find npx, install Node.js first.
Where things go: lines that start with npx, vercel or gh are terminal commands. Plain-English prompts go in the Claude Code chat. Not sure? Paste the command into Claude Code and ask it to run it for you.

The 3 steps

Deploy with Vercel's skill

You have no real link to send anyone. This is Vercel's official deploy skill for coding agents. You say "deploy my app" and Claude handles the rest: it checks your setup, logs you in to Vercel, links your project and hands you a real link. It lives in Vercel's agent-skills repo, which has 32K+ stars on GitHub and an MIT license (per its README).

github.com/vercel-labs/agent-skills/tree/main/skills/deploy-to-vercel

Install it
Paste this in your terminal. It installs only the deploy skill, for Claude Code, in your user folder so every project can use it.
Paste in Terminal
```
npx skills add vercel-labs/agent-skills --skill deploy-to-vercel -g -a claude-code
```
If Claude doesn't seem to know the skill afterwards, restart Claude Code.

Try it

Paste this in the Claude Code chat.

You, to Claude

Deploy my app to Vercel using the deploy-to-vercel skill.
Before you upload anything:
1. Make sure no .env files get uploaded. If there's no .vercelignore file, create one that lists .env and .env.* and keeps .env.example allowed.
2. Run the build on my computer first and fix any errors you find.
Then deploy and give me the link. Tell me if it's a production or a preview deployment. If you had to use the no-login fallback, give me the claim link too.
Never print my keys or secrets in the chat.

Why the .vercelignore line? When you deploy from the Vercel CLI, Vercel skips files like .env.local by default, but a plain .env file isn't on that list. Your keys belong in Vercel's settings (Step 3), never in an uploaded file.

Heads up The skill uses the Vercel CLI. More

It may install it (npm install -g vercel) and open your browser so you can log in. Say yes. Vercel makes the first deploy of a new project a production deployment, so you get a clean your-project.vercel.app style link. Later deploys from the CLI are previews, and new projects keep preview links behind a Vercel login by default. So send friends the production link, never the long preview one. If the CLI can't log in, the skill uses a fallback script that gives you a Preview URL and a Claim URL. Open the Claim URL while logged in to Vercel to move the project into your account, and do it the same day. Vercel's docs say claim codes made through its transfer API last 24 hours.

That link works on every phone on Earth. Even your uncle's. Especially your uncle's. He will find the typo.

Connect GitHub so it updates itself

Right now every change means asking Claude to deploy again. Once your project is on GitHub and connected to Vercel, every push deploys by itself. Push to main and your live site updates. Push to any other branch and you get a preview link to test first.

vercel.com/docs/git

Paste this

In the Claude Code chat.

You, to Claude

Connect this project to GitHub so Vercel updates my site every time I push.
1. Check .gitignore. It must list .env and .env.* (keep .env.example allowed), node_modules and .vercel. Add anything missing.
2. Run git status and confirm no .env file, key or password is about to be committed. If a .env file was ever committed in the past, stop and tell me.
3. If this folder isn't a git repo yet, set one up and make the first commit.
4. Create a PRIVATE GitHub repo with the GitHub CLI: gh repo create <name> --private --source=. --push. If gh isn't installed or I'm not logged in, tell me exactly what to run.
5. If this folder isn't linked to my Vercel project yet, link it with vercel link. Then connect the repo with vercel git connect.
Ask me before every push.

Prefer clicking? In Vercel, open your project, go to Settings, then Git, and connect your GitHub repository there.

Try it

Test the loop with one tiny change.

You, to Claude

Change the homepage headline to "Leo's site is LIVE", commit it with a clear message and push to main. Then check whether Vercel started a new deployment and tell me when the live link shows the new headline.

Heads up Never commit .env to GitHub, even in a private repo. More

If it ever gets committed, deleting the file later doesn't help, because Git keeps the old save points. Treat those keys as leaked and make new ones. On the free Hobby plan, keep the repo on your personal GitHub account: Vercel says Hobby can't deploy from a private repo owned by a GitHub organization.

Git is save points for your code. Break the site at 2am? Load the save from 1am. Pretend it never happened.

Move your database online

The site loads, but login fails and nothing saves. Your keys live in .env on your laptop, and that file stays behind (the .gitignore and .vercelignore from Steps 1 and 2 make sure of it). So the live site has no keys. And if your database runs on your laptop, the live site can't reach it at all. The fix: put the database online with Supabase (free to start), then give Vercel the keys.

supabase.com/docs/guides/api/api-keys

Supabase's free plan, per its pricing page: $0, 2 active projects, a 500 MB database and 50,000 monthly active users. Free projects pause after 1 week of inactivity.

Open your project in the Vercel dashboard.
Select Environment Variables in the sidebar.
Type the Name exactly as your code uses it, for example NEXT_PUBLIC_SUPABASE_URL.
Paste the Value, pick the environments (Production, and Preview if you use preview links), and click Save.
Redeploy. Vercel only applies variable changes to new deployments, so go to Deployments, click the three dots on your latest one and pick Redeploy.

Paste this

In the Claude Code chat.

You, to Claude

My site is live on Vercel but login and saving data don't work there.
1. Read my code and list every environment variable it uses. For each one, tell me if the browser can see it (names starting with NEXT_PUBLIC_ or VITE_) or if it's server-only.
2. If my database runs on my computer, help me move it to a Supabase project. Write the SQL for my tables with Row Level Security turned ON for every table, plus policies so each user can only read and write their own data.
3. Check that no secret key (Supabase secret or service_role key, or any private API key) has a NEXT_PUBLIC_ or VITE_ name or is used in browser code. Move it to server code if it is.
4. Give me a checklist: each variable name, which Vercel environments it needs (Production, Preview) and where in Supabase I find its value.
Never print my key values in the chat and never write them into a file that gets committed.

In Supabase, click Connect in your project to see the project URL and publishable key for your framework. All your keys live under Settings, then API Keys.

Try it
Add each variable in Vercel by hand.
Like the terminal better? vercel env add NEXT_PUBLIC_SUPABASE_URL production adds one variable and asks you for the value. To copy your Vercel variables back down to your laptop, run vercel env pull, which writes them into .env.local. Don't pipe secrets in with echo, since that saves them in your terminal history.

Heads up Supabase has two kinds of keys. More

The publishable key (starts with sb_publishable_, the older name is anon) is safe in the browser, but only if Row Level Security is on for every table. Supabase says to enable it on every table before you deploy. The secret key (starts with sb_secret_, the older name is service_role) skips every security rule. It goes in server code only, never in a NEXT_PUBLIC_ or VITE_ variable, never in GitHub, and never in a screenshot, chat or forum post. If a secret key leaks, make a new one in Supabase right away.

If it still breaks

You added the keys but nothing changed. Redeploy. Old deployments keep their old variables. Any variable starting with NEXT_PUBLIC_ gets baked in when the site builds, so it only updates after a new build.
The deployment failed. In Vercel, open Deployments, click the failed one and expand Building to read the log. Scroll to the red part that says "Error". The real cause is often a few lines above the last error. Paste that part into Claude and ask it to fix it. Running npm run build on your laptop first catches most of these early.
A variable is "undefined" on the live site. Check the name matches your code letter for letter, including the NEXT_PUBLIC_ or VITE_ part, and that you ticked the right environment (Production or Preview). Then redeploy.
Login sends you back to localhost. In Supabase, open Authentication, then URL Configuration. Set Site URL to your live link and add it under Redirect URLs, for example https://your-project.vercel.app/**.
Friends see a Vercel login screen. They opened a preview link. Send them the production link instead. You can see what's protected in your Vercel project under Settings, then Deployment Protection.
It worked last week and now the database is gone. Free Supabase projects pause after a week with no activity. Open the Supabase dashboard, select the paused project, click Resume project and confirm. Your data comes back with it.

Questions people ask

Why can't my friend open my localhost link?

Because localhost means "this computer". When your friend clicks localhost:3000, their computer looks at itself, finds nothing running on door 3000, and shows an error. Your site only exists on your laptop, and only while it's running. To share it, you have to put it on a server, which is what Vercel does.

Is Vercel really free?

For personal projects, yes. Vercel's docs say the Hobby plan is free and restricts users to non-commercial, personal use only. Commercial means anyone makes money from the site: taking payments, advertising something you sell, getting paid to build or host it, running ads like Google AdSense, or a site that's mainly affiliate links. Asking for donations is allowed. A business site needs the paid Pro plan (or Enterprise).

Why does my login work on my laptop but not online?

Your database keys live in a .env file on your laptop, and that file stays behind on purpose. The live site starts with no keys, so it can't talk to your database. Add the same keys in your Vercel project's Environment Variables, redeploy, and login comes back. If your database itself runs on your laptop, move it online first (Step 3).

Is it safe to put my keys in Vercel?

Yes, that's where they belong. Vercel encrypts environment variable values at rest. The real danger is putting a secret key in the wrong place: in GitHub, in a public chat, or in a variable that starts with NEXT_PUBLIC_ or VITE_, because those get bundled into the page and anyone can read them in their browser.

Do I need to learn Git first?

No. You need a free GitHub account, and Claude runs the Git commands for you. Think of Git as save points for your code. The prompts below tell Claude to check your secrets are safe and to ask you before every push.

Where Ned does his homework

The tools are free. Knowing what to ask them for is the real skill. Professor Glitch teaches it from zero, in order, inside the community: 8 courses and 200+ lessons. These two are where Ned started.