Your First Website with Astro

This guide walks through creating a basic multi-page website with Astro. You’ll end up with a fast, modern site that’s easy to maintain and free to deploy.

Prerequisites

• Node.js installed (v18 or later)
• A code editor (VS Code recommended)
• Terminal basics (creating files, running commands)

Step 1: Create a New Project

# Create your project
npm create astro@latest my-site -- --template basics

# Move into the project
cd my-site

# Install dependencies
npm install

Step 2: Look Around

Your project has this structure:

src/
  pages/
    index.astro   — the homepage
  layouts/
    Layout.astro  — the page wrapper
public/           — static files (images, favicon)

Open src/pages/index.astro — this is your homepage. Change the text and save. The dev server at localhost:4321 updates instantly.

Step 3: Add a New Page

Create src/pages/about.astro:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="About Us">
  <main>
    <h1>About Our Project</h1>
    <p>Tell your story here. Keep it simple and honest.</p>
  </main>
</Layout>

Visit http://localhost:4321/about — your new page is live.

Step 4: Link Pages Together

Edit src/pages/index.astro:

<nav>
  <a href="/">Home</a>
  <a href="/about/">About</a>
</nav>

Step 5: Build and Deploy

npm run build

This generates a dist/ folder with plain HTML, CSS, and JS. Upload it to any static host (Netlify, Vercel, Cloudflare Pages) for free.

What You Learned

• How to scaffold an Astro project
• How pages map to routes
• How to create and link pages
• How to build for production

Next Steps

• Add a blog with Markdown files
• Style with CSS or Tailwind
• Fetch data from an API
• Deploy with one click on Netlify