Getting Started with Astro

Astro is a framework built around a simple idea: most websites don’t need to ship a full JavaScript application to the browser. This guide walks through setting up a project and building your first page and component.

Why Astro

Astro renders HTML on the server (or at build time) by default, and only sends JavaScript to the browser for the pieces that actually need interactivity. That means faster page loads without giving up components, TypeScript, or a modern developer experience.

Creating a new project

Run the official setup script from your terminal:

npm create astro@latest my-site
cd my-site
npm install
npm run dev

This scaffolds a project, installs dependencies, and starts a local dev server, usually at http://localhost:4321.

Understanding the file structure

A fresh Astro project looks roughly like this:

my-site/
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
├── public/
└── astro.config.mjs

Anything in src/pages automatically becomes a route. A file at src/pages/about.astro is served at /about, with no router configuration required.

Your first component

Astro components use a .astro file with two sections: a fenced code block at the top (the “component script”) and markup below it.

---
const greeting = "Hello, Astro";
---

<h1>{greeting}</h1>

Anything inside the fenced block runs at build time, not in the browser. That’s what keeps the shipped JavaScript minimal.

Adding content collections

For anything content-heavy (blog posts, docs, products) Astro’s content collections give you typed, validated frontmatter. Define a schema once in src/content/config.ts, and Astro will warn you at build time if a Markdown file’s frontmatter doesn’t match it.

Deploying

Astro builds to static HTML by default, which means it can be hosted almost anywhere: Cloudflare Pages, Netlify, Vercel, or a plain file server. Run npm run build and deploy the generated dist/ folder.

Where to go next

From here, the natural next steps are adding Tailwind CSS for styling, wiring up a content collection for a blog, and exploring Astro’s island architecture for the handful of components that do need client-side interactivity.