Put your site online

So far your site lives only on your computer. In this lesson, you’ll put it where the whole world can see it.

Step 1: Make the finished copy

Stop the dev server: click in the terminal, hold Ctrl and press C. Then run:

npm run build

This is a build. Astro turns your pages into finished files and puts them in a folder called dist.

$ npm run build
 generating static routes
├─ /about/index.html (+3ms)
├─ /blog/hello-world/index.html (+1ms)
├─ /blog/index.html (+1ms)
├─ /index.html (+1ms)
✓ Completed in 17ms.
[build] ✓ Completed in 109ms.
[build] 4 page(s) built in 361ms
[build] Complete!

You can check the finished copy before it goes anywhere:

npm run preview

Open the address it shows. That’s exactly what visitors will get. Stop it with Ctrl and C when you’re done.

Step 2: Put it on the internet

The simplest way needs no extra tools and no account to start. You drag a folder onto a web page. Two hosts do this. Spacefast is our pick. Netlify works too, and we’ve walked through it step by step below.

With Spacefast, our pick

1. Go to drop.fast. That’s Spacefast’s drag-and-drop page.
2. Find your dist folder in Finder or File Explorer. It’s inside my-site.
3. Drag the dist folder onto the page. You can also click Choose a folder and pick it.

In seconds it’s live on its own address. Two things to know. Your site starts private, so only you can open it until you make it Public, or send someone a share link. And a site published without an account is removed after about 33 hours. To keep it, claim it with a free account.

Prefer the terminal? This does the same thing:

npx -y spacefast publish ./dist

With Netlify

1. Go to app.netlify.com/drop. You’ll see a big box that says Drag & drop to publish instantly.
2. Find your dist folder in Finder or File Explorer. It’s inside my-site.
3. Drag the dist folder onto that box. You can also click folder under the box and pick it.

Once you’ve claimed it, send the address to someone. Open it on your phone. It’s real.

Step 3: Updating your site later

When you change something, run npm run build again and drag the new dist folder up again. That’s it.

When that gets old, there’s a better way, and it’s the one from lesson 1’s picture. Your project lives on GitHub, your host watches it, and every change you send goes live by itself.

1. In VS Code, click the Source Control icon on the left edge (three dots joined by lines). Click Publish to GitHub. Sign in when it asks, and pick private or public. VS Code sends your whole project up.
2. Connect the host to that project. Our GitHub Pages guide and Cloudflare Workers guide show the clicks. We ran both for real.
3. From then on, change a file, click Commit, then Sync. About a minute later, the live site has your change.

If you build with an AI helper, it can do steps 1 and 3 for you. Tell Claude Code “commit and push this”, and it does.

What you just did

You built a website from nothing and put it online. Every Astro site in the world follows the same path you just walked.

Where to go next

• Install a theme for a finished design
• Add pictures to your pages
• Deploy to Cloudflare Workers, the host we use
• Choose a permanent host when you’re ready