Astro Basics
The modern static site builder
Build faster websites with less client-side JavaScript
What is Astro?
- Static site generator with a focus on performance
- Ships zero JavaScript by default
- Component-based architecture
- Built-in support for multiple UI frameworks
Key Features
- Island Architecture
- Partial Hydration
- File-based Routing
- Built-in Optimizations
- Framework Agnostic
Island Architecture
Interactive components in a sea of static HTML
↓
How Islands Work
- Most of your site is static HTML
- JavaScript loads only for interactive components
- Each island hydrates independently
Astro Components
<pre><code class="astro" data-trim data-line-numbers> --- // Component Script (runs at build time) const name = "Astro"; const items = ["Fast", "Flexible", "Fun"]; --- <!-- Component Template (becomes HTML) --> <div> <h1>Hello {name}!</h1> <ul> {items.map(item => <li>{item}</li>)} </ul> </div> </code></pre>Framework Integrations
- React
- Vue
- Svelte
- SolidJS
- Alpine.js
- Lit
Use your favorite framework or mix multiple!
Performance First
- Zero JavaScript by default
- Automatic asset optimization
- Lazy loading built-in
- Fast build times
Getting Started
<pre><code class="bash" data-trim> # Create a new project npm create astro@latest # Start the dev server npm run dev # Build for production npm run build </code></pre>Learn More
- Official Docs: docs.astro.build
- Discord Community
- GitHub: withastro/astro
- Astro Blog