Astro

When you open a recipe blog on your phone, two computers are involved. One of them, somewhere on the internet, holds the blog’s files and waits to be asked for them. The other is your phone, which asks, receives the files, and draws them on the screen.

Server

A computer (or a program on one) that waits for requests and answers them. It serves the website.

Browser

The program you use to visit websites: Chrome, Safari, Firefox, Edge. It asks servers for pages and draws them.

Client

Whoever asks. On the web, the client is usually a browser.

Every visit is a conversation with two halves. The browser sends a request ("please give me /about"); the server sends back a response (the page, or an error). The rules for that conversation are called HTTP.

Request

A message from the client: a method (like GET), an address, and some headers.

Response

The server’s answer: a status code (like 200 for OK, 404 for not found), headers, and a body (the content).

HTTP

The set of rules browsers and servers follow to talk to each other.

1https://example.com/recipes/pancakes?serves=2

The whole thing is a URL (Uniform Resource Locator), or simply an address. The path is the part you will shape most in Astro: each page you write gets one.

A browser understands three languages. HTML says what is on the page: headings, paragraphs, links, images. CSS says how it looks: colours, sizes, layout. JavaScript (JS) makes it do things after it loads: open a menu, filter a list.

1<html>2  <head>3    <title>About me</title>4    <link rel="stylesheet" href="/style.css" />5  </head>6  <body>7    <h1>Hi, I’m Sam</h1>8    <p>I write about bread, soup and slow Sundays.</p>9    <a href="/recipes">See my recipes</a>10  </body>11</html>

Element

One piece of HTML, like <h1>Hi</h1>: a tag, its content, and its closing tag.

Attribute

Extra information on a tag, written name="value": href="/recipes".

`<head>` and `<body>`

The head holds facts about the page (its title, its CSS); the body holds what you see.

Most of a typical site can be static. A recipe doesn’t change between one reader and the next, so there is no reason to make it again for every visit.

HTML and CSS only need to be read to be drawn. JavaScript must be downloaded, read and run before it does anything, and on a cheap phone on a slow connection that can take seconds. Many sites send JavaScript for things that never move, like an article’s text.

Astro is a tool for building websites. You write pages from reusable pieces, and Astro turns them into plain HTML files before anyone visits. Where a part of the page must react to the reader, you mark it, and only that part sends JavaScript. Astro calls those parts islands.

• A browser (the client) sends a request; a server sends a response.
• A URL names the server (domain) and the page (path), with optional extras (query).
• HTML is what is on the page, CSS how it looks, JavaScript what it does after loading.
• Static pages are made ahead of time and shared by everyone; dynamic pages are made per visit.
• JavaScript costs download and run time, so send it only where something must react.
• Astro builds static HTML by default and adds JavaScript only in islands.

A terminal is a window where you type instructions for your computer instead of clicking. Web tools are mostly run from it. On a Mac it is called Terminal; on Windows, use PowerShell or Windows Terminal; on Linux, any terminal app.

1pwd                 # print the folder you are in2ls                  # list what is in it3cd projects         # change into the "projects" folder4cd ..               # go back up one folder

Terminal

A text window for running commands. Also called a shell or command line.

Command

A program name, sometimes followed by words that tell it what to do: cd projects.

Folder (directory)

A place that holds files. The terminal is always "in" one folder at a time.

JavaScript was made for browsers, but Node.js (Node for short) runs it on your own computer too. Astro is a JavaScript program, so it needs Node. Node comes with npm, which downloads code other people have shared, called packages.

1node --version      # prints something like v22.x2npm --version       # npm is installed with Node3npm install astro   # download the astro package

Node.js

A program that runs JavaScript outside a browser. Install it from nodejs.org.

npm

The Node package manager: it installs, updates and runs packages.

Package

Shared code with a name and a version, like astro or react.

Dependency

A package your project needs. They are listed in package.json.

You could write a blog as plain .html files. Then every page repeats the same header and footer, and changing the menu means editing fifty files. A framework is a set of tools and rules that solves this kind of problem once: you write the header one time and reuse it everywhere.

Framework

Tools plus conventions (where files go, how they are named) that do the repetitive work for you.

Component

A reusable piece of a page, like a header or a recipe card.

You write in a form that is pleasant for people: components, Markdown, TypeScript. Browsers want plain HTML, CSS and JavaScript. The build is the step in between: a program reads your source files and writes the finished website, the output.

Source

The files you write and edit.

Build

Turning the source into the finished site, ahead of time.

Output

What the build writes: here, the dist/ folder.

Bundle

Many code files joined and shrunk into a few, so browsers download less.

• HTML first: pages are built to HTML, which browsers show fastest.
• No JavaScript by default: a page sends none unless you add an island.
• Content built in: Markdown files become pages, with their data checked.
• Bring your favourite UI library: React, Vue, Svelte, Solid and others work as islands.
• Static or per request: build pages ahead of time, or on a server when you must.

Single-page app (SPA)

A site where JavaScript in the browser draws every page, instead of the server sending finished HTML.

• The terminal runs commands; cd moves between folders.
• Node runs JavaScript on your computer; npm installs packages listed in package.json.
• A framework solves repetitive work once: components, conventions, checks.
• The build turns your source into finished files in dist/.
• The dev server is for writing; the build is for publishing.
• Astro sends HTML first and JavaScript only where you ask for it.

1cd ~/projects2npm create astro@latest

The setup tool asks a few questions in the terminal: where to create the project (a folder name, like kitchen-notes), which starting template to use (choose the empty or minimal one, so you see every file you add), whether to install dependencies (yes), and whether to start a git repository (your choice).

1cd kitchen-notes2npm run dev

Template

A ready-made starting project that the setup tool copies for you.

Git repository

A folder whose history of changes is tracked by git, a version control tool. Optional for now.

• src/pages/ is special: every file in it becomes a page with its own address.
• public/ is for files that must keep their exact name and content, like favicon.svg or robots.txt.
• node_modules/ is filled by npm. It is large and never edited by hand; you can delete it and run npm install to get it back.

1{2  "name": "kitchen-notes",3  "type": "module",4  "scripts": {5    "dev": "astro dev",6    "build": "astro build",7    "preview": "astro preview",8    "astro": "astro"9  },10  "dependencies": {11    "astro": "^7.4.0"12  }13}

npm run dev runs whatever is written next to "dev": here, astro dev. The ^ in "^7.4.0" means "7.4.0 or any newer 7.x", so a fresh install can get a later bug-fix release but never Astro 8.

1npm run        # live while you write2npm run      # write dist/3npm run    # serve dist/ locally

1astro  v7.4.10 ready in 312 ms2
3┃ Local    http://localhost:4321/4┃ Network  use --host to expose

localhost

A name that always means "this computer". Only you can open it.

Port

A number that picks one program on a computer. Astro’s dev server uses 4321 by default.

Hot reload

The browser updating by itself a moment after you save a file.

1<html lang="en">2  <head>3    <meta charset="utf-8" />4    <title>About</title>5  </head>6  <body>7    <h1>About me</h1>8    <p>I cook on weekends and write it down.</p>9    <a href="/">Back home</a>10  </body>11</html>

Save it and open http://localhost:4321/about. A link between your pages is a plain <a href> with the path. Repeating the <head> in every page is tedious: module 9 replaces it with a layout.

1npm run build      # writes dist/2npm run preview    # serves dist/ at localhost:4321

Open dist/about/index.html in your editor: it is plain HTML, with the frontmatter gone and every {expression} replaced by its value. That folder is your whole website.

When something is wrong, the dev server shows an error page in the browser and prints the same error in the terminal. Read it calmly: the first line says what went wrong, then comes the file and the line, often with the code around it.

1ReferenceError: nme is not defined2  src/pages/index.astro:12:83  11 |   <body>4> 12 |     <h1>{nme}’s kitchen notes</h1>5     |          ^

1import { defineConfig } from 'astro/config'2
3export default defineConfig({4  site: 'https://example.com'5})

site is the public address your site will have. Astro uses it to build full links (for search engines and feeds). Later modules add more here: integrations like React, an adapter for a server, image and i18n settings. After changing the config, the dev server restarts itself.

• npm create astro@latest makes a project; npm run dev runs it at localhost:4321.
• Files in src/pages/ become pages: about.astro is /about, index.astro is /.
• public/ is copied as is; node_modules/ is npm’s; dist/ is the build’s.
• npm run build writes dist/; npm run preview serves it so you can check it.
• Errors say what, then where: read the first line, then the file and line.
• astro.config.mjs holds settings, starting with site.

1---2const title = 'Recipes'3const count = 124---5
6<h1>{title}</h1>7<p>{count} recipes so far.</p>

Code fence

The two --- lines. Between them is the component script, written in JavaScript or TypeScript.

Frontmatter

Another name for the component script, borrowed from Markdown files, which put data at the top the same way.

Template

Everything after the fence: HTML, plus { } wherever you want a value from the script.

For a static page, the script runs once, during the build (and on each refresh under astro dev). Its result is HTML. None of the script is sent to the browser: visitors can’t see it, and it can’t react to clicks.

1---2console.log('Building the recipes page')3const builtAt = new Date().toLocaleDateString('en-GB')4---5
6<p>Page built on {builtAt}.</p>

1---2const recipe = { name: 'Lentil soup', minutes: 40 }3const photo = '/images/soup.jpg'4---5
6<h2>{recipe.name}</h2>7<p>Ready in {recipe.minutes} minutes.</p>8<p>With resting time: {recipe.minutes + 10} minutes.</p>9<img src={photo} alt="A bowl of lentil soup" />

• Inside { } goes any JavaScript expression: something that has a value, like recipe.name or 2 * 3.
• For an attribute, put the braces in place of the quotes: src={photo}.
• Text in braces is escaped: a < in your data shows as a < character, it can’t become a tag.

1---2const recipe = { name: 'Flatbread', photo: '/img/bread.jpg' }3---4<h2></h2>5<img src= alt="Flatbread on a board" />

1---2const recipe = { name: 'Chilli', spicy: true, vegan: false }3---4
5<h2>{recipe.name}</h2>6{recipe.spicy && <p>Warning: hot.</p>}7<p>{recipe.vegan ? 'Vegan' : 'Contains animal products'}</p>

• a && <p>…</p> shows the paragraph only when a is true.
• a ? x : y (the ternary) shows x when a is true, otherwise y.
• false, null and undefined show nothing at all.

1---2const minutes = 153---4{minutes < 20 ? <p>Quick</p> : <p>Slow</p>}5{minutes > 60 && <p>Long</p>}

1---2const ingredients = ['2 eggs', '200 g flour', '300 ml milk']3---4
5<ul>6  {ingredients.map((item) => <li>{item}</li>)}7</ul>

Array

An ordered list of values in JavaScript: ['a', 'b'].

`map`

An array method that makes a new array by running a function on each item.

Arrow function

A short way to write a function: (item) => <li>{item}</li> takes item and returns the <li>.

1---2const href = '/recipes/pancakes'3const label = 'Pancakes'4const extra = { title: 'Open the recipe', target: '_self' }5const isNew = true6---7
8<a href="/about">About</a>9<a href={href}>{label}</a>10<a {href}>{label}</a>11<a href={href} {...extra}>{label}</a>12<button disabled={!isNew}>New this week</button>

• Line 8: a fixed value, in quotes, as in HTML.
• Line 9: a value from the script, in braces.
• Line 10: shorthand: {href} means href={href} when the names match.
• Line 11: spread: {...extra} adds every key of the object as an attribute.
• Line 12: false leaves a boolean attribute out; true writes it.

1---2const response = await fetch('https://example.com/tips.json')3const tips: string[] = await response.json()4---5
6<ul>7  {tips.map((tip) => <li>{tip}</li>)}8</ul>

fetch asks a server for something; await waits for the answer before going on. You can use await directly in the script. On a static page the fetch happens during the build: the tips are written into the HTML, and visitors never call that address.

1---2const intro = '<em>Simple</em> food, done well.'3---4
5<!-- An HTML comment: sent to the browser -->6{/* A script comment: removed from the output */}7<Fragment set:html={intro} />8<>9  <dt>Serves</dt>10  <dd>4</dd>11</>

• <!-- --> stays in the page’s source, where anyone can read it. {/* */} disappears.
• <Fragment> (or <>…</>) groups elements without adding a wrapper element.
• set:html inserts a string as HTML, without escaping it.

• The script between --- runs while the page is made; the template below becomes HTML.
• None of the script reaches the browser, and it runs at build time for static pages.
• {expression} puts a value in text or an attribute, escaped.
• && and ? : show things conditionally; .map() turns arrays into elements.
• Attributes can be computed, shorthand {href}, or spread {...attrs}.
• await works in the script; set:html inserts raw HTML, so only trusted HTML.

Your blog’s home page and recipe page both show the same header. Instead of copying it, you put it in its own file, a component, and use it like an HTML tag. Change the file, and every page that uses it changes.

• Components live in src/components/. Unlike src/pages/, files there never become pages by themselves.
• Names start with a capital letter (Header.astro), so Astro can tell them apart from HTML tags.
• An .astro file is a component. A page is just a component that lives in src/pages/.

1---2const { name, minutes, href } = Astro.props3---4
5<article class="card">6  <h3><a href={href}>{name}</a></h3>7  <p>{minutes} minutes</p>8</article>

1<RecipeCard name="Pancakes" minutes={20} href="/recipes/pancakes" />2<RecipeCard name="Lentil soup" minutes={40} href="/recipes/soup" />

Prop

A value passed into a component, written like an attribute: name="Pancakes".

`Astro.props`

Inside the component, the object holding all the props it received.

1---2interface Props {3  name: string4  href: string5  minutes?: number6}7
8const { name, href, minutes = 30 } = Astro.props9---10
11<article class="card">12  <h3><a href={href}>{name}</a></h3>13  <p>{minutes} minutes</p>14</article>

• An interface named Props describes the props: each name, then its type.
• ? makes a prop optional. minutes = 30 gives it a default when it is left out.
• Your editor now warns when a page forgets href or passes minutes="ten", and astro check reports it in the terminal.

1---2interface  {3  label: 4  count: number5}6const { label, count  } = 7---8<a href={`/tags/${label}`}>{label} ({count})</a>

An Astro component runs on the server, produces HTML, and is gone. It has no memory between visits and no way to respond to a click by itself. That is what makes it free for the browser: there is nothing to download but HTML.

1---2let likes = 03---4<button onclick={() => likes++}>5  Like ({likes})6</button>

1---2import type { HTMLAttributes } from 'astro/types'3
4interface Props extends HTMLAttributes<'a'> {5  href: string6}7
8const { href, ...rest } = Astro.props9---10
11<a href={href} class="button" {...rest}>Read more</a>

HTMLAttributes<'a'> is every attribute an <a> accepts. ...rest collects the props you didn’t take out by name, and {...rest} puts them on the element. Now <ButtonLink href="/about" title="About Sam" /> works, and a typo like hraf is flagged.

• Make a component when something repeats, or when a page gets long enough to be hard to read.
• Name it after what it is (RecipeCard), not where it is used (HomePageThing).
• Give it only the props it needs: name and href, not the whole site’s data.

• A component is an .astro file in src/components/, named with a capital letter.
• Import it in the script and use it like a tag: <Header />.
• Props are passed like attributes and read from Astro.props.
• interface Props types them; ? makes one optional, = value gives a default.
• Astro components render once to HTML: no state, no click handlers.
• HTMLAttributes and ...rest pass through attributes you don’t name.

Props are good for small values: a title, a number, a link. But some components exist to wrap things: a card around a recipe, a box around a warning, a page frame around everything. What goes inside changes every time, and it is markup, not a value. Squeezing a whole paragraph with links and pictures into a prop would be awkward.

A slot is a hole a component leaves in its template. The parent writes markup between the component’s opening and closing tags, and Astro puts that markup where the hole is.

Slot

A place in a component’s template where markup from the parent goes.

Children

The markup a parent writes between a component’s opening and closing tags.

1<article class="card">2  <div class="body">3    <slot />4  </div>5</article>

1---2import Card from '../components/Card.astro'3---4<Card>5  <h2>Lemon drizzle cake</h2>6  <p>Sharp, sweet and ready in an hour.</p>7</Card>

The <h2> and <p> replace <slot />. The card decides the frame (the <article>, the <div>), the page decides what goes in it. The children are rendered by the parent, so they can use the parent’s variables.

A card often has a header, a body and a footer. Give each hole a name with <slot name="…" />. The parent then says where each piece goes with a slot="…" attribute. Anything without a slot attribute goes to the default (unnamed) slot.

1<article class="card">2  <header><slot name="header" /></header>3  <div class="body">4    <slot />5  </div>6  <footer>7    <slot name="footer" />8  </footer>9</article>

1<Card>2  <h2 slot="header">Lemon drizzle cake</h2>3  <p>Sharp, sweet and ready in an hour.</p>4  <a slot="footer" href="/recipes/lemon-drizzle/">Read it</a>5</Card>

Anything you put inside a <slot> element is its fallback: shown only when the parent passes nothing for that slot. It is a default value, but for markup.

1<footer>2  <slot name="footer">3    <span class="muted">No link yet</span>4  </slot>5</footer>

• Parent passes slot="footer" content: that content shows, the fallback doesn’t.
• Parent passes nothing for footer: “No link yet” shows.

Sometimes an empty slot should remove its wrapper too. An empty <footer> still takes space and borders. In the frontmatter, Astro.slots.has("footer") is true only if the parent passed something for that slot. The default slot is called "default".

1---2const hasFooter = Astro.slots.has('footer')3---4<article class="card">5  <header><slot name="header" /></header>6  <div class="body">7    <slot />8  </div>9  {hasFooter && (10    <footer>11      <slot name="footer" />12    </footer>13  )}14</article>

A slot attribute goes on one element. To put several elements in the same named slot without adding a wrapper element, use <Fragment slot="…">: a fragment groups things and leaves no tag of its own.

1<Card>2  <Fragment slot="footer">3    <a href="/recipes/lemon-drizzle/">Read it</a>4    <span>45 minutes</span>5  </Fragment>6  <p>Sharp, sweet and ready in an hour.</p>7</Card>

A component that wraps another can hand a slot straight through: <slot name="footer" slot="footer" /> takes what its parent passed for footer and gives it to the inner component’s footer.

1---2import Card from './Card.astro'3---4<Card>5  <slot name="header" slot="header" />6  <slot />7  <slot name="footer" slot="footer" />8</Card>

• A slot is a hole in a component’s template; the parent’s children fill it.
• <slot /> is the default slot: everything without a slot attribute goes there.
• <slot name="x" /> declares a named slot; slot="x" on a child fills it.
• Markup inside <slot> is the fallback, shown when nothing is passed.
• Astro.slots.has("x") lets you drop a wrapper when a slot is empty.
• <Fragment slot="x"> puts several elements in one slot; <slot name="x" slot="x" /> passes one along.
• Values go in props, markup goes in slots.

HTML says what is on the page; CSS (Cascading Style Sheets) says how it looks. A CSS rule is a selector (which elements) and a block of declarations (property and value pairs).

1h1 {2  color: darkgreen;3  font-size: 2rem;4}5
6.card {7  padding: 1rem;8  border: 1px solid #ddd;9}

Selector

The part of a rule that picks elements: h1, .card, nav a.

Class

A name given to elements with class="…", so CSS can select them.

Cascade

How the browser decides between rules that disagree: more specific selectors and later rules win.

1---2const { title } = Astro.props3---4<article class="card">5  <h2>{title}</h2>6</article>7
8<style>9  .card { padding: 1rem; border-radius: 8px; }10  h2 { color: darkgreen; }11</style>

Styles in an .astro component are scoped: Astro adds a unique marker to this component’s elements and to its selectors, so h2 here only matches the <h2> inside this card, never the page title. You can use short, plain selectors without fear of breaking the rest of the site.

1<article class="card" data-astro-cid-x7k2>2  <h2 data-astro-cid-x7k2>Lemon drizzle cake</h2>3</article>4<style>5  .card[data-astro-cid-x7k2] { padding: 1rem; }6  h2[data-astro-cid-x7k2] { color: darkgreen; }7</style>

To add a class only sometimes, class:list takes a list of strings, objects and arrays, keeps what is truthy and joins it into one class attribute.

1---2interface Props { tag: string; active?: boolean }3const { tag, active = false } = Astro.props4---5<a6  href={`/tags/${tag}/`}7  class:list={['tag', { active }]}8>9  {tag}10</a>

1<article ={['card', { quick: minutes  30 }]}>

A CSS custom property (a variable, written --name) can carry a value from the frontmatter into a <style>. define:vars sets them for you, on this component’s elements.

1---2const { color = 'tomato' } = Astro.props3---4<span class="badge"><slot /></span>5
6<style define:vars={{ color }}>7  .badge { background: var(--color); }8</style>

Tailwind CSS is a library of small classes, each doing one thing (p-4 is padding, text-green-800 a colour). You style by listing classes in the markup instead of writing rules. npx astro add tailwind installs it as a Vite plugin and creates a stylesheet with @import "tailwindcss"; for you to import in your layout.

<h2 class="title">Soup</h2><style>  .title { font-weight: 700; color: darkgreen; }</style>

<h2 class="font-bold text-green-800">Soup</h2>

Both are fine, and they mix: many sites use Tailwind for most things and a scoped <style> for the odd case. Pick one default so the codebase reads the same everywhere.

A page without JavaScript can’t react to a click. For small behaviour, a <script> in a component is enough. Astro processes it: TypeScript works, import works, it is bundled and minified (into a file, or straight into the page when it is small and imports nothing), and it is included once per page however many times the component appears.

1<button class="copy-link" type="button">Copy link</button>2
3<script>4  const buttons = document.querySelectorAll('.copy-link')5  for (const button of buttons) {6    button.addEventListener('click', async () => {7      await navigator.clipboard.writeText(location.href)8      button.textContent = 'Copied'9    })10  }11</script>

Because it runs once, the script finds every button with querySelectorAll, not just one. It runs in the browser, after the HTML is there, so it can’t read the frontmatter’s variables.

Use is:inline only when the script must run before the page paints, such as applying a saved dark theme to <html> so the page doesn’t flash light first. define:vars on a script also makes it inline.

• A CSS rule is a selector plus declarations; the cascade settles conflicts.
• A component’s <style> is scoped: it only reaches the elements that component writes.
• Site-wide styles go in an imported stylesheet; :global() reaches markup you didn’t write.
• class:list adds classes from conditions; define:vars passes values into CSS.
• Tailwind styles with small classes, and mixes with scoped styles.
• A <script> is bundled and runs once per page; is:inline is left as written.

A route is an address on your site and the code that answers it. Astro uses file-based routing: you don’t write a list of routes, the files in src/pages/ are the list. The path of the file becomes the path of the address.

Route

An address and the file that answers it.

File-based routing

Routes come from the files in src/pages/, not from a list in code.

Index file

index.astro answers for its folder itself: /recipes for recipes/index.astro.

There is no special link component. You link with the HTML <a href="…"> element, and following it loads the other page from the server, the way the web has always worked. Start addresses with / so they don’t depend on the page you are on.

1<nav>2  <a href="/">Home</a>3  <a href="/recipes/">Recipes</a>4  <a href="/about/">About</a>5</nav>

You don’t want one file per recipe. A dynamic route is one file for many addresses: name it with a parameter in square brackets, [slug].astro, and the matching part of the address becomes Astro.params.slug. A slug is the readable, URL-safe name of something: lemon-drizzle for “Lemon drizzle cake”.

Astro builds pages ahead of time (module 1), so it has to know which slugs exist before any visitor arrives. A dynamic page tells it by exporting a function called getStaticPaths (next slide).

Dynamic route

One file that answers many addresses, using a [parameter] in its name.

Parameter

The changing part of the address, read as Astro.params.name.

Slug

A short, URL-safe name for an item, like lemon-drizzle.

[slug] matches one piece of the address, between two slashes. [...path] is a rest parameter: it matches any number of pieces, including none. Its value is the whole matched part, as one string with slashes.

In getStaticPaths, give a rest parameter undefined to build the top-level address itself (/docs).

Several files can match the same address. Astro picks by route priority: fixed names beat parameters, a named parameter beats a rest parameter, and more levels beat fewer.

Pagination splits a long list over numbered pages: ten recipes on /recipes/1, the next ten on /recipes/2. getStaticPaths receives a paginate helper that makes those pages for you.

1---2import type { GetStaticPaths } from 'astro'3import { recipes } from '../../data/recipes'4
5export const getStaticPaths = (({ paginate }) =>6  paginate(recipes, { pageSize: 10 })) satisfies GetStaticPaths7
8const { page } = Astro.props9---10<ul>11  {page.data.map((r) => <li>{r.title}</li>)}12</ul>13{page.url.prev && <a href={page.url.prev}>Newer</a>}14{page.url.next && <a href={page.url.next}>Older</a>}15<p>Page {page.currentPage} of {page.lastPage}</p>

page.data holds this page’s items. page.url.prev and page.url.next are undefined at the ends, so the links only show when there is somewhere to go. Name the file [...page].astro instead and the first page is /recipes rather than /recipes/1.

src/pages/404.astro is the page for addresses that don’t exist. Build it like any page, with a link back home. When a page moves, a redirect sends visitors from the old address to the new one, so old links keep working.

1import { defineConfig } from 'astro/config'2
3export default defineConfig({4  site: 'https://example.com',5  redirects: {6    '/cooking': '/recipes',7    '/recipe/[slug]': '/recipes/[slug]',8  },9})

• Files in src/pages/ are routes; their path is the address; index.astro answers for its folder.
• Link with plain <a href="/…">, in one trailing slash style.
• [slug].astro is a dynamic route; getStaticPaths returns params and props per page.
• [...path] matches any number of levels, including none.
• Fixed names beat [param], which beats [...rest].
• paginate() makes numbered pages with page.data and page.url.
• 404.astro handles missing addresses; redirects keeps old links alive.