Astro 101: Mission Control

Astro page

Every file in src/pages/ becomes a route. No router config.

basics

Frontmatter

JavaScript at the top of an .astro file. Runs on the server.

basics

{ expressions }

Embed any JavaScript expression in the template with curly braces.

basics

Scoped <style>

Styles in an .astro file are auto-scoped to that component. No leaks.

basics

Component

Any .astro file outside src/pages/ is a reusable component.

basics

Astro.props

Pass values to a component, destructure them in its frontmatter.

components

A hole for children. Layouts and wrappers fill it from outside.

components

Spread props

Forward an object as props with the JSX spread operator.

components

Group elements without adding a wrapper tag. Required for named slots.

components

File-based routing

The file's path is the URL. No router config, no boilerplate.

routing

[name].astro

Square brackets in a filename create a URL placeholder.

routing

getStaticPaths

Tell Astro which dynamic-route pages to generate at build time.

routing

Astro.params

Read the value that filled the [bracket] in the URL.

routing

fetch() in frontmatter

await fetch at build time. Data lands baked into the HTML.

data

.map() over a list

Loop over an array and return components or markup. No v-for, no key spreading.

data

Conditional rendering

Use && and ternaries to show or hide pieces of the template.

data

API endpoint

Export GET / POST from src/pages/api/* to return JSON instead of HTML.

data

Markdown imports

Import .md files like modules. Get rendered HTML plus typed frontmatter.

content

Content collections

A typed folder of markdown. Schema, queries, autocomplete — built in.

content

<Image>

Drop-in tag that resizes, optimizes to webp, and lazy-loads.

content

client:load

Hydrate this island as soon as the page loads. Eager. Use sparingly.

islands

client:visible · idle · only

Defer hydration: when in viewport, when browser is idle, or skip SSR entirely.

islands

Islands architecture

Page ships as static HTML. Each client:* directive is a small interactive island.

islands

View transitions

Smooth cross-page animations. One component, browser does the rest.

islands

Deploy adapter

An adapter tells Astro where it's going to run. One per host.

deploy

static vs server

Pick how each page renders: HTML at build time, or fresh on every request.

deploy

site + sitemap

Set your canonical URL, then the official integration generates sitemap.xml for free.

deploy

Hello, page

Your first Astro page

Ch. 1 · L1

Style it up

Scoped <style> blocks

Ch. 1 · L2

Extract a component

Components, frontmatter, {expressions}

Ch. 1 · L3

Pass them around

Props with Astro.props

Ch. 1 · L4

The whole crew

Arrays + .map()

Ch. 1 · L5

Status check

Conditional rendering

Ch. 1 · L6

A second page

File-based routing

Ch. 1 · L7

Profile pages

Dynamic routes with [brackets]

Ch. 1 · L8

Static paths, properly

getStaticPaths up close

Ch. 1 · L9

Live from the API

fetch() in the frontmatter

Ch. 1 · L10

Take it live

Publish to a real URL

Ch. 1 · L11

A shared shell

Layouts with <slot />

Ch. 2 · L1

Add some Markdown

Import .md files directly

Ch. 2 · L2

Make a collection

Content collections with a schema

Ch. 2 · L3

Pictures, perfected

The <Image> component

Ch. 2 · L4

First island

client:load for real interactivity

Ch. 2 · L5

When to hydrate

client:visible · client:idle · client:only

Ch. 2 · L6

An API endpoint

Server routes in src/pages/api/

Ch. 2 · L7

Search the logs

Island + API endpoint together

Ch. 2 · L8

Smooth as silk

View transitions

Ch. 2 · L9

Ship it for real

Deploy to a real provider

Ch. 2 · L10

Astro 101: Mission Control

contents

Astro 101:
Mission Control