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 path, from an empty computer to a live site.

Never built anything before? Read Start from zero first. It’s six short pages, and it explains every word used here. Want more hand-holding? Our free course covers the same steps slowly, with a “what you should see” after each one.

Step 1: Install Node.js and VS Code

Node.js is the engine that runs Astro. VS Code is the program you’ll write in. Both are free.

1. Go to nodejs.org and click the LTS button. Install it with the normal options.
2. Go to code.visualstudio.com and install VS Code.

Open VS Code. Click the Terminal menu, then New Terminal. In the panel that opens, type this and press Enter:

node -v

Step 2: Create your project

Type this line and press Enter:

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

Press Enter when it asks to install things. Then go into your new folder and start your site:

cd my-site
npm run dev

Not sure which options you want? Our project command builder writes the line for you.

Step 3: Change your home page

Open the my-site folder in VS Code (File, then Open Folder). Find src/pages/index.astro. Every file in src/pages is a page on your site.

Replace everything in it 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.

Step 4: Add another page

Make a new 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>

Go to /about in your browser.

Step 5: Put your site online

Stop the dev server by holding Ctrl and pressing C. Then make the finished copy:

npm run build

Your finished site is now in a folder called dist. To put it online, drag that folder onto drop.fast, Spacefast’s drag-and-drop page, or onto Netlify Drop. You’ll get a live address within seconds. We tried it: the site was up in about five seconds. It has a password and expires in an hour until you claim it with a free account, which lesson 7 of the course walks through.

For a home that updates itself when you make changes, see how to deploy to Cloudflare Workers. It’s what we use.

What to do next

• Add a blog to your site
• Add pictures
• Install a theme for a finished design
• Look up any word you don’t know 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. Our Start from zero pages explain every word before you need it.

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

Astro is free, and several hosts have free plans. The only cost most people choose is their own address, which is about the price of a pizza each year.

Can I use my own domain name?

Yes. Rent a domain from any registrar, then connect it in your host's settings. Each host has a page that shows how.