Getting Started with Astro

Getting Started with Astro

Astro is a modern web framework designed for building fast, content-focused websites. Unlike traditional frameworks that ship heavy JavaScript bundles to the browser, Astro ships zero JavaScript by default and only hydrates interactive components when needed.

Why Choose Astro?

Astro offers several key benefits:

  1. Performance First: By default, Astro sends no JavaScript to the browser, resulting in lightning-fast page loads.

  2. Component Islands: Use your favorite UI framework (React, Vue, Svelte) for interactive components while keeping the rest static.

  3. Content Collections: Built-in TypeScript support for content with schema validation.

  4. Edge Ready: Deploy to any host, including Cloudflare Pages, Vercel, and Netlify.

Installation

Getting started with Astro is simple:

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

This creates a new Astro project with a basic blog template.

Project Structure

A typical Astro project looks like this:

├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── content/
├── public/
├── astro.config.mjs
└── package.json

Creating Your First Page

Create a new page at src/pages/hello.astro:

---
const name = "Astro";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello {name}!</title>
  </head>
  <body>
    <h1>Hello {name}!</h1>
  </body>
</html>

Visit /hello to see your page in action.

Adding Interactivity

To add interactive components, use framework integrations:

npm install @astrojs/react

Then create interactive components that only hydrate when needed:

// src/components/Counter.jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Use it in your Astro page with client:load for full interactivity.

Content Collections

Astro’s content collections provide type-safe content management:

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
  }),
});

export const collections = { blog };

Deployment

Deploy to Cloudflare Pages with:

npm run build
wrangler pages deploy dist

Astro’s zero-config deployment makes it easy to get your site live quickly.

Next Steps

Now that you know the basics, explore:

  • Astro’s official documentation
  • Community integrations
  • Real-world examples and templates

Astro makes it easy to build fast, scalable websites while keeping development enjoyable.

Comments