Your blog works on localhost - that http://localhost:4321 URL you’ve been checking. But localhost only exists on your computer. Time to put it somewhere anyone can visit.

LOCALHOST NOT WORKING? If localhost isn’t loading, your dev server probably isn’t running. Just tell Claude “my localhost isn’t working, help me fix it” - usually it’s just running npm run dev in your project folder. The terminal output tells you the exact URL (usually localhost:4321 for Astro, but sometimes it picks a different port like 4322 if 4321 is busy).

PICKING A HOST

A host is a company with servers that holds your website files and serves them to visitors. “Deploying” just means taking the code on your computer and putting it on someone else’s server so the internet can access it.

There’s a bunch of hosting options for static sites:

  • Vercel - Best for frameworks like Astro, Next.js. Auto-detects your setup, preview URLs for every branch, clean dashboard. Free tier is generous.
  • Netlify - Similar to Vercel, been around longer. Good if you want more control over build settings. Free tier has build minute limits.
  • GitHub Pages - Simplest option, built into GitHub. Great for basic sites, but no auto-builds from frameworks without extra setup.
  • Cloudflare Pages - Fastest global performance, unlimited everything on free tier. Dashboard is more technical.
  • Render - Good all-rounder, also does backends if you need that later. Slightly slower builds.

I went with Vercel because it auto-detects Astro, the preview URLs make testing easy, and I didn’t have to configure anything.

INDUSTRY CONTEXT If you’ve heard of Heroku, Vercel is similar but for frontend stuff. Heroku got expensive - Vercel stayed simple for sites like ours.

SETTING UP VERCEL

Same pattern as GitHub - you create the account, Claude handles the technical wiring.

Step 1: Create your Vercel account

Go to vercel.com and sign up with your GitHub account. This automatically connects them so Vercel can see your repos.

Step 2: Install the Vercel CLI

CLI REMINDER We covered CLI in the terminal article - it’s just a tool you control by typing commands instead of clicking buttons. The Vercel CLI lets Claude deploy your site from the terminal.

Run this in your terminal:

npm install -g vercel

The -g means “install globally” so you can use it from any project folder.

Step 3: Let Claude deploy

Now Claude can do the rest:

Connect this project to Vercel and deploy it. Walk me through any prompts that come up.

Claude will run the vercel command, which starts a setup wizard. It asks things like “which account?” and “link to existing project?” - Claude handles all of this. When it’s done, you get a real URL like your-project.vercel.app.

Alternative: Skip the CLI entirely

If you’d rather click around, you can do this in the Vercel dashboard instead:

  1. Click “Add New Project”
  2. Find your GitHub repo in the list
  3. Click Import
  4. Leave settings as default (Vercel auto-detects Astro)
  5. Click Deploy

Same result, different path.

WHAT HAPPENS WHEN YOU DEPLOY

When Vercel deploys your site:

  1. It grabs your code from GitHub
  2. Runs your build command (npm run build for Astro)
  3. This creates optimized HTML/CSS/JS files
  4. Vercel puts those files on their servers around the world
  5. They give you a URL that points to those servers

After the initial setup, this happens automatically every time you push to GitHub. Push code → Vercel notices → builds → deploys. No clicking required.

THE VERCEL DASHBOARD

The dashboard has a lot of tabs and settings. Most of it you don’t need right now.

Worth knowing:

  • Deployments - Your build history, shows what succeeded or failed
  • Settings → Domains - For adding a custom domain later (like yourname.com)
  • Settings → Environment Variables - For secrets like API keys

Ignore for now:

  • Analytics (requires paid plan for the good stuff)
  • Speed Insights (same)
  • Functions, Edge Config, Storage (for more complex apps)

For a blog, the defaults work fine.

BRANCHES AND PREVIEW URLS

This confused me at first. Vercel creates a different URL for every branch you push:

  • Your main branch = Your production URL, the one you share with people
  • Any other branch (like develop) = Gets its own temporary preview URL

So when you push to develop, Vercel builds it at something like your-project-git-develop-yourname.vercel.app. You can check if things look right before merging to main.

WHY THIS MATTERS This is why we work on a develop branch. Break things, push experiments, iterate freely - your live site on main stays untouched until you explicitly merge.

When I first looked at “Active Branches” in my Vercel dashboard, it was empty and I thought something was broken. Turns out it just means you haven’t pushed any feature branches yet - it only shows branches that have actual deployments.

You don’t need to manage this manually. Claude handles the git commands:

Push these changes to develop so I can preview on Vercel

Once you’ve checked the preview and everything looks good:

Create a PR to merge develop into main, then merge it

Claude creates the pull request and can merge it for you. You’re in control of when this happens - nothing goes to your live site until you tell Claude to merge. If you want to review the PR yourself first, you can also do it manually in GitHub’s interface (your repo → Pull Requests tab → click the PR → Merge button).

WHEN BUILDS FAIL

Sometimes deploys don’t work. Here’s what I’ve run into:

“Module not found” error

Usually means a package didn’t install correctly. Show Claude the error:

The Vercel build failed. Here's the error: [paste the error]. Fix it.

Site deployed but looks broken

Often a path issue - images or links that work on localhost but have wrong URLs in production. Common with /public folder paths.

The site deployed but [describe what's wrong - broken images, missing styles, etc.]. Check if it's a path or build issue.

“Environment variable not found” errors

If you have secrets (API keys, passwords) in a local .env file, Vercel doesn’t automatically know about them. You need to add them manually in Settings → Environment Variables. Your local .env is just for your computer.

CONFIRMING YOUR SITE IS LIVE

After deploying, go back to your Vercel dashboard and check the Deployments tab:

  • Green checkmark = Deployed successfully, click to get your URL
  • Red X = Build failed, click to see what went wrong in the logs
  • Yellow spinner = Currently building, give it a minute

Click on the latest successful deployment to get your production URL. Open it in your browser. Open it on your phone. That’s your site, on the actual internet.

You have a real URL now. Before you start sending it to everyone, there’s a few things worth checking first.

Next: The Stuff You’ll Forget Until Someone Points It Out →