How to put your project on the internet

Your project works. You’ve been building it for days, maybe weeks. You open it in the browser, click around, everything does what it should. It feels real.

It’s not real. It lives on your machine. Close the laptop and it’s gone. Send someone a link? There is no link. Whether your browser says localhost:4321 or file:///Users/you/project/index.html, it means the same thing: only you can see it.

This post is about fixing that. One setup, no maintenance, and every time you save your changes your site updates automatically.

What “deploy” actually means

When you build locally, your computer runs a small server that only you can see. Deploy means putting your project on someone else’s computer - one that’s always on, always connected, and gives your site a real URL.

There are dozens of ways to do this. Most of them are painful. I’m skipping all of that.

The setup: GitHub stores your code. Vercel turns it into a website. You connect them once and never think about it again. Vercel isn’t the only option - Netlify and Cloudflare Pages work the same way. I picked Vercel because it felt the most straightforward.

Step 1: Push your code to GitHub

If you already have a repo, skip to step 2.

If you don’t, I wrote a whole post about this: Why you should use GitHub (even if you don’t code)Why you should use GitHub (even if you don't code)GitHub basics for vibe-coders: what a repo is, what a commit does, and why your project needs version control, backup, and more than a folder and a prayer.. Short version: GitHub is an undo button for your entire project.

Here’s what the push looks like in practice. I tell Claude:

push to github

That’s it. Claude stages the changes, writes a commit message, and pushes. Three words in a terminal and my code is online.

Step 2: Deploy on Vercel

Go to vercel.comvercel.com and sign up with your GitHub account. Free tier is more than enough.

Click “Add New Project.” Vercel shows your GitHub repos. Pick the one you want to deploy. It detects your framework automatically and sets up the build. Not sure which framework you’re on? I wrote about how to pick the right techHow to pick the right tech for your projectA vibe-coder's guide to choosing technology. When HTML is enough, when you need a framework, and when you should probably reconsider the whole idea. in a separate post.

Click “Deploy.”

Vercel builds your site in about a minute and gives you a live URL ending in .vercel.app. Open it. That’s your project on the internet.

From now on, every push to GitHub triggers a new deploy. You push, Vercel builds, your site updates.

If Vercel doesn’t detect your framework correctly, tell Claude:

Vercel can't detect my framework, help me set the build command

It’ll figure it out. If a deploy fails for any reason, Vercel shows you an error log - copy it and paste it to Claude.

What you get for free

The free tier includes more than just hosting.

Automatic deploys. Push your code, site updates. Push to a separate branch (a copy of your project you’re experimenting with), you get a preview URL to test before it goes live. I caught broken pages in preview more than once before they hit the real site.

Analytics. Visitor data: where they come from, which pages they visit, bounce rate. Enable it in your Vercel dashboard, then tell Claude “add Vercel Analytics to my project.” One component, done.

Speed Insights. How fast your site loads for real people on real phones. Not a simulation.

HTTPS. Your site is secure by default. No certificates to buy or configure.

Custom domain. Vercel gives you yourproject.vercel.app immediately, which is fine for testing and sharing. When you want a real domain, buy one from any registrar - Vercel sells them directly, but Cloudflare and Namecheap are popular too. Then tell Claude “connect my domain to Vercel” and it’ll walk you through the DNS setup. Mine took five minutes.

Lighthouse

My colleague Maciej - the same one who got me into Claude Code in the first placeHow to install and run Claude Code in VS CodeHow to install Claude Code in VS Code's terminal and start building. Step-by-step setup to your first prompt in under 5 minutes. No dev background needed. - taught me that scoring 100/100/100/100 on Lighthouse isn’t some unrealistic goal. It takes more time, sure. But it’s the same logic as testing your site on different browsers. You do it because it’s worth doing, not because it’s quick.

That stuck with me. So I started checking Lighthouse scores. Eventually I told Claude to set up a rule: if any score drops below 100, don’t deploy.

Here’s why that matters. When you ship with AI, you don’t read every line of code. Claude writes it, it works, you move on. But “works” and “works well” are different things. A page can load, look fine, and still have invisible problems: missing alt texts, slow fonts, broken heading hierarchy, images without dimensions that make the layout jump. If you haven’t run security checks5 security checks before you ship your vibe-coded appAI writes your code, but it doesn't think about who might break it. Five security holes in almost every vibe-coded project, and what to do about each. either, you might be shipping more than just performance issues.

Lighthouse catches the quality stuff. You can save this kind of rule in your project instructionsCLAUDE.md - how to set up project instructions for Claude CodeA study said CLAUDE.md makes AI agents worse. Here's what the research actually found, why /init is the problem, and how to write instructions that work. so Claude checks automatically every time.

check lighthouse scores before pushing

That’s the prompt. Claude runs Lighthouse, reads the scores, and if anything is below 100 it fixes the issue before pushing. I don’t review the code. I review the scores.

When 100 drops to 99

My blog was 100/100/100/100 for weeks. Then I added a page with interactive components and Performance dropped to 99. One point.

It wasn’t a heavy page or a massive file. It was one script installed the wrong way.

Vercel has an analytics tool you add to your site. I installed it the wrong way. That created a chain: the page loaded one file, which loaded another file, which loaded the actual tracking code. Three files in a row, each waiting for the previous one to finish. Lighthouse calls this a “critical request chain” and it costs you a point.

Claude replaced seven lines with one. Here’s what it looks like (you don’t need to understand the syntax, just notice it’s shorter):

---
import Analytics from "@vercel/analytics/astro";
---

<Analytics />

One line. No chain. Back to 100.

The system caught it. Without Lighthouse checking every deploy, that 99 would have been invisible. Left unchecked, 99 drops to 97, then 94. Three months later you’re wondering why your site is slow.

Your next 10 minutes

1. Push your code to GitHubWhy you should use GitHub (even if you don't code)GitHub basics for vibe-coders: what a repo is, what a commit does, and why your project needs version control, backup, and more than a folder and a prayer. if it isn’t there already
2. Sign up at vercel.comvercel.com with your GitHub account
3. Import your repo and click Deploy
4. Tell Claude to check Lighthouse scores before every push

Your project stops being a folder on your laptop. It becomes a URL you can send to anyone.