# Astro — Web Framework for Content-Driven Sites
> Ship zero-JS by default. Island architecture for fast content sites, docs, and blogs. Supports React, Vue, Svelte. 58K+ stars.
## Install
Copy the content below into your project:
# Astro — Web Framework for Content-Driven Sites
## Quick Use
```bash
npm create astro@latest
cd my-site
npm run dev
```
Open `http://localhost:4321` — your site is live.
```astro
---
// src/pages/index.astro
const title = "My AI Tool";
---
{title}
{title}
Zero JavaScript shipped to the browser by default.
```
Add interactive components only where needed:
```astro
---
import ChatWidget from '../components/ChatWidget.jsx';
---
Documentation
This is static HTML. No JS.
```
---
## Intro
Astro is a web framework with 58,100+ GitHub stars for building fast, content-driven websites. Its key innovation is **zero JavaScript by default** — pages ship as pure HTML unless you explicitly opt into interactivity with "islands." This makes Astro sites blazingly fast (perfect Lighthouse scores) while still supporting React, Vue, Svelte, or any UI framework for interactive components. Astro powers documentation sites, blogs, marketing pages, and AI tool landing pages where performance and SEO matter most.
Works with: React, Vue, Svelte, Solid, Preact, Lit, any UI framework, Tailwind, MDX, Markdown. Best for content sites, documentation, blogs, and AI product landing pages. Setup time: under 2 minutes.
---
## Astro Architecture
### Island Architecture
```
Traditional SPA: Astro Islands:
┌────────────────┐ ┌────────────────┐
│ ALL JavaScript │ │ Static HTML │
│ (200KB+) │ │ (0KB JS) │
│ │ │ ┌────────┐ │
│ │ │ │ Island │ │
│ │ │ │ (5KB) │ │
│ │ │ └────────┘ │
└────────────────┘ └────────────────┘
```
Only interactive components ("islands") ship JavaScript. Everything else is static HTML.
### Content Collections
```typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const docs = defineCollection({
schema: z.object({
title: z.string(),
description: z.string(),
category: z.enum(['guides', 'api', 'tutorials']),
}),
});
export const collections = { docs };
```
```markdown
---
title: Getting Started
description: Quick start guide for our AI tool
category: guides
---
# Getting Started
Install with: `pip install our-tool`
```
### Multi-Framework Support
```astro
---
import ReactChart from '../components/Chart.jsx';
import VueForm from '../components/Form.vue';
import SvelteToggle from '../components/Toggle.svelte';
---
```
Hydration directives:
- `client:load` — Hydrate immediately
- `client:visible` — Hydrate when scrolled into view
- `client:idle` — Hydrate when browser is idle
- `client:media` — Hydrate on media query match
### Performance
- **100/100** Lighthouse score out of the box
- Zero JS by default
- Automatic image optimization
- Built-in RSS feed generation
- Sitemap generation
---
## FAQ
**Q: What is Astro?**
A: Astro is a web framework with 58,100+ GitHub stars that ships zero JavaScript by default using island architecture. Supports React, Vue, Svelte for interactive parts. Perfect for content sites, docs, and blogs.
**Q: When should I use Astro vs Next.js?**
A: Use Astro for content-driven sites (docs, blogs, landing pages) where SEO and speed matter. Use Next.js for interactive web apps (dashboards, SaaS). Astro ships less JS; Next.js has better app-like features.
**Q: Is Astro free?**
A: Yes, open-source under MIT license.
---
## Source & Thanks
> Created by [Astro](https://github.com/withastro). Licensed under MIT.
>
> [astro](https://github.com/withastro/astro) — ⭐ 58,100+
---
## 快速使用
```bash
npm create astro@latest
npm run dev
```
---
## 简介
Astro 是拥有 58,100+ GitHub stars 的 Web 框架，默认不发送 JavaScript，使用岛屿架构。支持 React、Vue、Svelte 组件。满分 Lighthouse 性能。适合文档、博客和 AI 产品网站。
---
## 来源与感谢
> Created by [Astro](https://github.com/withastro). Licensed under MIT.
>
> [astro](https://github.com/withastro/astro) — ⭐ 58,100+
---
Source: https://tokrepo.com/en/workflows/3a0c9468-b4cf-4f90-bdb6-4d9ede3d0b07
Author: AI Open Source