Getting Started with Astro: A Complete Guide

Introduction

Astro is a modern web framework that allows you to build fast, content-focused websites. It’s perfect for blogs, documentation sites, and marketing pages.

In this guide, we’ll cover everything you need to know to get started with Astro.

Why Choose Astro?

Astro offers several compelling features:

Zero JavaScript by default - Astro ships zero JavaScript to the browser by default
Component Islands - Add interactivity only where you need it
Multi-framework support - Use React, Vue, Svelte, or any other framework
Built-in optimizations - Automatic image optimization, CSS minification, and more

Installation

Getting started with Astro is simple:

npm create astro@latest my-project
cd my-project
npm run dev

This will create a new Astro project and start the development server.

Project Structure

A typical Astro project looks like this:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
└── package.json

Key Directories

public/ - Static assets that don’t need processing
src/components/ - Reusable UI components
src/layouts/ - Page layouts
src/pages/ - Your site’s pages (file-based routing)

Creating Your First Page

Create a new file at src/pages/about.astro:

---
// Component script (runs at build time)
const pageTitle = "About Us";
---

<html lang="en">
  <head>
    <title>{pageTitle}</title>
  </head>
  <body>
    <h1>{pageTitle}</h1>
    <p>Welcome to our website!</p>
  </body>
</html>

Adding Components

Components in Astro are similar to other frameworks:

---
// src/components/Button.astro
interface Props {
  variant?: "primary" | "secondary";
}

const { variant = "primary" } = Astro.props;
---

<button class={`btn btn-${variant}`}>
  <slot />
</button>

<style>
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
  .btn-primary {
    background: blue;
    color: white;
  }
</style>

Content Collections

Astro’s content collections make managing blog posts easy:

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    publishedAt: z.date(),
  }),
});

export const collections = { blog: blogCollection };

Deployment

Deploying to Vercel is straightforward:

Push your code to GitHub
Import the repository in Vercel
Vercel auto-detects Astro and deploys

Astro is an excellent choice for content-focused websites. Its zero-JavaScript approach, combined with the ability to add interactivity where needed, makes it a powerful tool for modern web development.

Start building with Astro today and experience the difference!