Astro delivers exceptional performance by shipping zero JavaScript by default.
Setup
npm create astro@latest
cd my-astro-site
npm run dev
Project Structure
src/
├── components/
│ ├── Header.astro
│ └── Footer.astro
├── layouts/
│ └── BaseLayout.astro
├── pages/
│ ├── index.astro
│ └── about.astro
└── content/
└── blog/
Basic Component
// Header.astro frontmatter
const { title } = Astro.props;
<header>
<h1>{title}</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
Layout Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
Content Collections
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.date(),
}),
});
export const collections = { blog };
Island Architecture
Astro's island architecture allows you to add interactivity only where needed:
<Counter client:load />
<Gallery client:visible />
<Newsletter client:idle />
Why Astro?
- Zero JS by default - Ship only HTML and CSS
- Island architecture - Interactive components only where needed
- Framework agnostic - Use React, Vue, Svelte, or vanilla JS
- Content focused - Built for blogs, docs, and marketing sites
- Fast builds - Incremental builds and smart caching
Posted onastrowith tags: