Put It on the Internet

"It works" doesn't count until someone else's phone can load it

There's a gap between "my app works" and "my app is on the internet," and it's smaller than it looks: pick a hosting path (hosting means a computer that keeps your app running and reachable 24/7 so yours doesn't have to), press one or two buttons, then point a domain at it. Total cost: $0 for hosting on every path below, $10-15/yr for the domain if you want one.

First, pick your path. It depends entirely on where your code lives right now:

Path A: Lovable, Bolt, Replit. The button already exists

These tools host for you. Lovable: click Publish, top right, and you get a live yourproject.lovable.app URL. Bolt: click Deploy, top right (it publishes through Netlify, a hosting company, behind the scenes) and you get a *.netlify.app URL. Replit: click Deploy, pick Autoscale for most apps, get a *.replit.app URL; deployments need Replit Core, around $25/mo as of July 2026.

Custom domain settings, as of July 2026 (if a button has moved, it will be under something named Domains in settings): Lovable: Publish button again, then Settings, then Connect domain (needs a paid plan, ~$25/mo). Bolt: claim the site in Netlify, then Domain management, then Add a domain. Replit: open your deployment, Settings tab, look for Link a domain. Each shows you the exact DNS records to add; the domain chapter below explains what those records mean, and the connect prompt does the clicking with you.

Path B: built locally? Vercel's free tier is genuinely free

Your code lives in a folder on your computer. The route online: push it to GitHub (a website that stores your code), then connect Vercel (a hosting company that turns GitHub code into a live website, automatically, forever).

If your project isn't on GitHub yet, don't learn git today. Delegate:

My project is not on GitHub yet. Walk me through putting it there, one step at a time, waiting for me to confirm each step before giving the next. I have never used git. Use the GitHub website or the simplest possible commands, and after each step tell me exactly what I should see if it worked. Before we push anything, check that no secret files (like .env, the file that holds API keys) will be uploaded, and fix that first if needed.

1. 1

   Sign up with GitHub

   Go to vercel.com, click Sign Up, choose Continue with GitHub. This specific choice is what lets Vercel see your code. Pick the Hobby plan (the free one).

2. 2

   Import your repo

   Dashboard, Add New, then Project. You'll see your GitHub repos (repo is GitHub's word for a project folder). Click Import next to yours.

3. 3

   Deploy

   Vercel auto-detects your framework. Usually change nothing. Click Deploy, wait 1-3 minutes. Confetti means done, and you have a live yourproject.vercel.app URL.

4. 4

   If it fails

   Copy the whole red error log, paste it into Claude Code: "My Vercel deploy failed with this error. Explain what's wrong in plain English and fix it." Failed first deploys are normal.

What Hobby actually includes (July 2026): unlimited personal projects, 100 GB bandwidth a month (tens of thousands of visits), free HTTPS (the browser padlock), custom domains included. When it stops being free: the Hobby plan is for non-commercial use. If the site is a business, Vercel's terms want you on Pro at $20/month per member. For "I built a thing, look at it," Hobby is $0 and stays $0.

Path C: one HTML file? Drag it onto Netlify Drop

1. 1

   Name the file index.html

   Put it in a folder, named exactly index.html (that exact name is what servers show by default).

2. 2

   Drag the folder

   Go to app.netlify.com/drop and drag the folder (not the file) onto the page.

3. 3

   Done

   Live URL in about 10 seconds, free. Create a free Netlify account when prompted to keep and edit the site. Custom domain lives in Domain management in the site's settings.

The domain chapter: $10-15/yr turns "school project" into "real site"

yourproject.vercel.app works fine and looks like homework. A domain (the address you actually want, like yourthing.com) is bought from a registrar, a shop that sells domains. Two worth using:

• [ ].com if available; .dev or .app if you're a builder type; .io works but runs $30-40/yr
• [ ]A $1.99 first year means the renewal is where they get you. Check year two before buying.
• [ ]Skip every checkout upsell except WHOIS privacy (hides your home address from the public domain registry). Cloudflare and Namecheap include it free; anyone charging for it in 2026 is not your friend.

DNS is the internet's phone book

Browsers can't find yourthing.com by name; they need the number of the computer serving it. DNS is the public phone book that says "yourthing.com? That's at this address." Connecting a domain just means writing your host's number into the book. No code changes, nothing moves. It's a directory entry.

A DNS record is one line in that book. There are a dozen types; as a beginner you touch exactly two:

Your host's "add domain" screen shows you the exact values: usually one A record and one CNAME. You copy them into your registrar's DNS page (Cloudflare: the DNS tab; Namecheap: Domain List, then Manage, then Advanced DNS). Or better, let the AI drive:

I just bought a domain and I want to connect it to my live app. Walk me through it click by click.

MY SETUP
- I bought my domain at: [WHERE I BOUGHT MY DOMAIN, e.g. "Namecheap" or "Cloudflare"]
- My app is hosted at: [WHERE MY APP IS HOSTED, e.g. "Vercel" or "Lovable" or "Netlify" or "Replit"]
- Assume I have never touched DNS settings before.

HOW TO RUN THIS
1. Give me ONE step at a time, then STOP and wait for me to reply "done" or paste what I see. Never give me more than one step per message.
2. For every step, tell me: exactly where to click (page, tab, button name), what to type or paste, and what the screen should look like if it worked. If the UI may have changed since your training, say "look for something named X, probably under Settings."
3. Start on the HOSTING side: have me open my host's "add custom domain" screen and paste you the exact records it asks for (record type, name/host, value). Do not guess the values; use the ones my host shows me.
4. Then switch to the REGISTRAR side and dictate each record for me to add, one record per step: which type (A or CNAME), what goes in the Name/Host field, what goes in the Value field, and what TTL to pick (or "leave the default"). Briefly explain in one plain-English sentence what each record does.
5. Warn me about the common traps for my specific registrar before I hit them (for example: Namecheap needs "@" as host for the bare domain and parking-page records deleted; Cloudflare needs the proxy toggle set to "DNS only" (gray cloud) for records pointing at Vercel or Netlify; never paste "https://" into a record value).
6. If I need BOTH the bare domain (mydomain.com) and www to work, make sure we add both records and set up the redirect the host recommends. Ask me which version I want as the main one.

VERIFYING (do not skip this)
7. After the records are saved, tell me how to confirm it worked, in this order:
   a. What my HOST's domain screen should show (pending vs verified vs any checkmark), and how long that usually takes.
   b. Have me check whatsmydns.net: what to type, what green vs red means.
   c. Have me open the domain in a private/incognito browser window on my phone, not just my computer.
   d. Confirm HTTPS: the padlock should appear automatically. Tell me how long certificate issuing usually takes on my host and what to do if it's stuck.
8. Set my expectations honestly: DNS changes can officially take up to 48 hours to spread, but usually work within 10 minutes. Tell me at what point I should stop waiting and start debugging (roughly 1 hour), and what the first debugging step is.

IF SOMETHING GOES WRONG
9. If I paste an error or say it's not working, do not restart the whole process. Ask me for a screenshot or copy-paste of my current DNS records and my host's domain screen, diagnose the specific mismatch, and give me the single fix.

Start with step 1 now: which screen should I open first?

The 15-minute checklist before you share the link

Live is not the same as ready. Run this before the link goes anywhere public:

• [ ]Works on a phone. Your actual phone, every page, every button with a thumb. Broken? Screenshot to your AI: "fix the layout for a 390px-wide screen without changing desktop."
• [ ]The name isn't "my-app-v2-final". Check the browser tab title and the page heading; the tab title is what shows in bookmarks and shared links. Ask your AI to set the title, description, and social preview tags.
• [ ]A favicon exists (the tiny icon in the browser tab). The default blank icon whispers "unfinished." Ask your AI to generate and wire one in, or make a free one at favicon.io.
• [ ]Zero links 404 (404 is the "page not found" error). Click everything, including the footer. Or: "list every link in this project and tell me which could 404 or point to localhost" (localhost means "my own computer", a link only you could ever load).
• [ ]Someone else has actually loaded it. One friend, their device, doing the main thing. Half of go-live failures are login walls and forms that only worked for the owner.
• [ ]You know where error reports go. Minimum: you can find your host's logs (Vercel: project, then the Logs tab). Better: a contact email on the site.
• [ ]Your API keys are not visible. The one item that costs real money to skip. Run the prompt below.

An API key is a secret password your app uses to talk to paid services (OpenAI, Stripe, a database). If one sits in your public code, bots will find it and spend on your card. Before sharing, run this in your project:

Security check before I share this app publicly. Go through the entire codebase and check: (1) Are any API keys, secrets, tokens, or passwords written directly in the code or in files that get shipped to the browser? (2) Is my .env file (the file that holds secrets) listed in .gitignore so it never goes to GitHub? (3) Do any frontend files reference secret keys that should only live on the server? List every problem with the file and line, explain each in plain English, then fix them and tell me which keys I need to revoke and re-issue because they were exposed.

When you outgrow this

Your site is live; nobody knows it exists yet. The seo-geo-engine kit is the next rung: getting found by Google and by the AI assistants people actually ask now. Much later, when pushing to GitHub feels boring and you want deploys and checks to run themselves, github-actions-runbooks automates the whole pipeline. Not yet, though. Go send someone the link first.