A developer knowledge base.
``` ## Index Pages `index.astro` in any directory becomes the default page for that path: - `src/pages/index.astro` → `/` (homepage) - `src/pages/[kind]/[...slug].astro` → `/guide/astro-mental-model/` :::analogy Same as `index.html` in traditional web hosting, or `__init__.py` in a Python package — it's what you get when you navigate to the directory itself. ::: ## Dynamic Routes: `[...slug].astro` This is where it gets powerful. Square brackets mean "parameterized." The `...` means "catch all path segments." `src/pages/[kind]/[...slug].astro` can generate: - `/guide/agentic-coding-getting-started/` - `/guide/agentic-coding-prompt-patterns/` - `/guide/astro-mental-model/` But Astro needs to know **which** pages to generate at build time. That's what `getStaticPaths()` does: ```astro --- // src/pages/[kind]/[...slug].astro export async function getStaticPaths() { const entries = await getCollection('kb'); // Return one path per kb entry return entries.map(entry => ({ params: { kind: entry.data.kind, slug: entry.id }, // what goes in the URL props: { entry }, // data passed to the page })); } --- ``` :::analogy Think of `getStaticPaths()` as a Makefile pattern rule. Instead of writing one rule per file: ```makefile dist/guide/getting-started.html: content/kb/getting-started.md dist/guide/prompt-patterns.html: content/kb/prompt-patterns.md ``` You write one pattern: ```makefile dist/guide/%.html: content/kb/%.md $(COMPILE) $< -o $@ ``` `getStaticPaths()` is telling Astro: "here are all the `%` values — generate one page for each." ::: ## What Happens During Build When you run `npm run build`: 1. Astro scans `src/pages/` 2. Static pages (`index.astro`, `about.astro`) → compiled once each 3. Dynamic pages (`[...slug].astro`) → `getStaticPaths()` is called → one HTML file per returned path 4. All output lands in `dist/` ``` Build: src/pages/index.astro → dist/index.html src/pages/[kind]/[...slug].astro → dist/guide/agentic-coding-getting-started/index.html → dist/guide/astro-mental-model/index.html → dist/article/welcome-to-krowdev/index.html → ... (one per kb entry) ``` **Challenge: Trace the route** Look at krowdev's actual page files: ```bash find src/pages -name "*.astro" | sort ``` For each file, write down: 1. What URL(s) does it generate? 2. Is it static (one page) or dynamic (many pages)? 3. If dynamic, what collection does it iterate over? **Answer** | File | URL(s) | Type | |---|---|---| | `pages/index.astro` | `/` | Static (1 page) | | `pages/[kind]/[...slug].astro` | `/guide/astro-mental-model/`, `/article/welcome-to-krowdev/`, ... | Dynamic (1 per kb entry) | --- Previous: [The Mental Model](/guide/astro-mental-model/) | Next: [.astro Files](/guide/astro-files/) ## Sources - Astro Docs, [Routing](https://docs.astro.build/en/guides/routing/) - Astro Docs, [Pages](https://docs.astro.build/en/basics/astro-pages/) - Astro Docs, [Dynamic routes](https://docs.astro.build/en/guides/routing/#dynamic-routes)