Astro is a modern static site builder that delivers lightning-fast performance with a focus on shipping less JavaScript to the browser.

What You’ll Learn

In this tutorial, you’ll learn:

  1. How to set up a new Astro project
  2. Understanding Astro components
  3. Working with layouts and pages
  4. Deploying your first site

Prerequisites

Before starting, make sure you have:

  • Node.js 18+ installed
  • A code editor (VS Code recommended)
  • Basic knowledge of HTML and JavaScript

Step 1: Create a New Project

npm create astro@latest

Choose a template or start from scratch. Astro will guide you through the setup process.

Step 2: Understanding Project Structure

Your Astro project will have this structure:

my-astro-site/
├── src/
│   ├── pages/
│   ├── layouts/
│   └── components/
├── public/
└── astro.config.mjs

Step 3: Create Your First Page

Create a new file in src/pages/index.astro:

---
// Component Script
const title = "My First Astro Page";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>Welcome to Astro!</h1>
  </body>
</html>

Next Steps

Now that you’ve built your first Astro site, explore:

  • Content Collections for managing content
  • Integrations for adding frameworks
  • Deployment options