Mizu

Getting Started with Astro

Why Astro?

Astro is a modern web framework that ships zero JavaScript by default. It renders your pages at build time, producing fast static HTML. If you need interactivity, you can bring your own framework — React, Vue, Svelte — but only on the islands that need it.

Creating a Project

Getting started is straightforward:

npm create astro@latest my-blog
cd my-blog
npm run dev

This scaffolds a minimal Astro project with a dev server running on port 4321.

Defining a Layout

Layouts in Astro are just wrapper components. Here is a simple one:

---
// src/layouts/BaseLayout.astro
interface Props {
  title: string;
}
const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

The <slot /> element is where page content gets injected.

Content Collections

One of Astro’s best features is Content Collections — a type-safe way to manage your markdown content:

// src/content.config.ts
import { defineCollection, z } from "astro:content";

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    lang: z.enum(["en", "zh"]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { posts };

With this schema, every markdown file under src/content/posts/ is validated at build time. If a field is missing or the wrong type, you get a clear error.

Building for Production

npm run build

This generates a fully static dist/ directory you can deploy anywhere — Vercel, Netlify, Cloudflare Pages, or any static host.

Static sites are not a limitation. They are a feature.

For more details, visit the Astro documentation.