tutorials

Getting Started with Astro

Learn how to build fast, content-focused websites with the Astro framework. A beginner-friendly guide to your first Astro project.

Author ·
astroweb-devtutorial

What is Astro?

Astro is a modern web framework designed for building fast, content-focused websites. Unlike traditional JavaScript frameworks, Astro ships zero JavaScript by default, only hydrating interactive components when needed.

Why Choose Astro?

There are several compelling reasons to use Astro for your next project:

  • Performance first — Astro renders HTML on the server and strips away unnecessary JavaScript
  • Framework agnostic — Use React, Vue, Svelte, or any framework you prefer
  • Content collections — Built-in content management with type safety and validation
  • Island architecture — Interactive components only load JavaScript when they need it

Your First Astro Page

Creating a page in Astro is straightforward. Every .astro file in the src/pages directory automatically becomes a route.

---
const greeting = "Hello, Astro!";
---

<html>
  <body>
    <h1>{greeting}</h1>
  </body>
</html>

Content Collections

Astro 5 introduced the Content Layer API, which lets you define typed schemas for your content:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    publishDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

Next Steps

Now that you understand the basics, try building your own Astro project. The documentation at astro.build is an excellent resource to explore more features.