How to Make a Website With Astro (Step by Step)

If you want a fast website that you fully own, Astro is a great way to build it. This guide covers the whole journey, from an empty computer to a live site.

Want more detail on each stage? Our free seven-lesson course covers the same ground, slowly.

What you need before you start

You need a computer running Windows, macOS or Linux, and about an hour. Everything in this guide is free.

What	Why	Cost
Node.js	Runs Astro on your computer	Free
VS Code	Lets you edit your site’s files	Free
A hosting account	Puts your site on the internet	Free plan

Step 1: Install Node.js and VS Code

Download the LTS version from nodejs.org and VS Code, and install both with the default options. Astro needs Node.js 22.23.4 or newer.

Open VS Code, then choose Terminal and New Terminal from the menu. Check that Node.js is installed:

node -v

Step 2: Create your project

Run the setup wizard:

npm create astro@latest my-site -- --template basics

Say yes when it offers to install dependencies. Then open the new folder and start your site:

cd my-site
npm run dev

Open the address shown in your terminal, usually http://localhost:4321, and you’ll see your new site.

Step 3: Edit your home page

In VS Code, open your project folder and find src/pages/index.astro. Every file in src/pages is a page on your site.

Replace the contents with this:

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <h1>Welcome to my website</h1>
  <p>I built this with Astro.</p>
</Layout>

Save the file, and your browser updates by itself.

Step 4: Add another page

Create a file called src/pages/about.astro:

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <h1>About me</h1>
  <p>Write something about yourself here.</p>
</Layout>

Visit /about in your browser. Creating the file created the page.

Step 5: Publish your site

Stop the dev server by pressing Ctrl and C, then build your site:

npm run build

Your finished website is now in the dist folder. To put it online, drag that folder onto Netlify Drop. You’ll get a live address within seconds.

For a longer-term setup that republishes whenever you make a change, see our guide to the best hosting for Astro.

What to do next

• Add a blog to your site
• Install a theme for a finished design
• Deploy to Cloudflare Workers for a permanent home
• Look up any unfamiliar word in the glossary

Frequently asked questions

Do I need to know how to code to use Astro?

No. You'll copy some code at first, and you'll understand it as you go. Knowing a little HTML helps, and you can learn it along the way.

How much does it cost to make a website with Astro?

Astro is free and open source, and several hosts have free plans. The only cost you're likely to want is a custom domain name.

Can I use my own domain name?

Yes. Buy a domain from any registrar, then connect it in your host's dashboard. Each host has its own guide.