Astro is a content-first meta-framework built by the open-source Astro core team, designed around shipping zero JavaScript to the browser by default. It's the #21 most-used web framework, reported in roughly 4.5% of developer surveys. Astro renders pages to static HTML at build time and only "hydrates" individual interactive components as isolated islands — letting you mix React, Vue, Svelte, or plain JS components in the same project — which makes it especially well suited to content sites, blogs, and marketing pages that prioritize load speed.
An `.astro` file has a fenced "component script" section at the top for server-side/build-time logic, followed by the HTML template it renders.
---
// src/pages/blog/[slug].astro
import Layout from '../../layouts/Layout.astro';
import { getPosts } from '../../lib/posts';
const { slug } = Astro.params;
const post = (await getPosts()).find(p => p.slug === slug);
---
<Layout title={post.title}>
<h1>{post.title}</h1>
<p>{post.excerpt}</p>
<!-- only this component ships JS, as an island -->
<LikeButton client:load postId={post.id} />
</Layout>Scaffold a new Astro project with the official create command, which offers starter templates and optional TypeScript setup.
# create a new Astro project
npm create astro@latest my-site
cd my-site
npm run dev