Andrew Gilliland
Back to Articles

Getting Started with Astro

astro typescript

What is Astro?

Astro is a web framework designed for building content-driven websites. It ships zero JavaScript by default, sending only HTML and CSS to the browser unless you opt in to interactivity with islands.

Why Astro?

  • Fast by default - no JavaScript runtime overhead
  • UI agnostic - use React, Svelte, Vue, or plain HTML
  • Content collections - first-class support for Markdown and MDX with type-safe frontmatter
  • Static output - deploy anywhere as plain HTML files

Getting Started

Install a new project with:

npm create astro@latest

Then run the dev server:

npm run dev

Content Collections

One of Astro’s most powerful features is content collections. Define a schema for your content and get full TypeScript safety:

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    excerpt: z.string(),
  }),
});

Then query it in any page:

const posts = await getCollection("blog");

Astro makes building fast, content-focused sites enjoyable from day one.

Table of Contents