Getting Started with Astro

Astro is a modern web framework designed for building content-driven websites. Unlike traditional JavaScript frameworks that ship heavy bundles to the client, Astro takes an HTML-first approach.

Why Astro?

1. Zero JavaScript by Default - Pages render as static HTML unless you need interactivity
2. Islands Architecture - Load JavaScript only where needed
3. Framework Agnostic - Use React, Vue, Svelte, or any combination
4. Fast by Design - 40% faster than equivalent React sites

Your First Component

---
// This is the "frontmatter" - runs at build time
const greeting = "Hello, Astro!";
---

<h1>{greeting}</h1>

<style>
  h1 { color: purple; }
</style>

Adding Interactivity

Use client directives to hydrate components:

<ReactCounter client:load />    <!-- Hydrate immediately -->
<ReactCounter client:visible /> <!-- Hydrate when visible -->
<ReactCounter client:idle />    <!-- Hydrate when browser is idle -->

Next Steps

• Explore Content Collections for type-safe content
• Add integrations for your favorite framework
• Deploy to Cloudflare Pages for global edge delivery

Happy coding!