Astro Starlight Documentation Structure
Official Astro documentation theme with sidebar, search, and i18n.
Project Directory
my-docs/
src/
content/
Documentation content
docs/
Maps to sidebar
index.mdx
Welcome page
getting-started/
installation.mdx
configuration.mdx
guides/
authoring.mdx
components.mdx
reference/
api.mdx
config.mdx
config.ts
Collection config
components/
Custom overrides
Card.astro
assets/
logo.svg
public/
favicon.svg
astro.config.mjs
Starlight plugin config
package.json
tsconfig.json
.gitignore
Why This Structure?
Starlight is Astro's official documentation theme. It provides sidebar navigation, full-text search (Pagefind), dark mode, and i18n out of the box. Content in src/content/docs/ auto-generates the sidebar structure. Minimal config, maximum features.
Key Directories
- src/content/docs/-Markdown/MDX docs—folders become sidebar groups
- src/components/-Override built-in Starlight components
- src/assets/-Logo, images processed by Astro
- astro.config.mjs-Starlight plugin with sidebar config
Sidebar Options
- autogenerate-Auto sidebar from folder structure
- items-Manual sidebar with custom labels
- collapsed-Collapsible sidebar groups
- badge-Add badges like 'New' or 'Deprecated'
Getting Started
npm create astro@latest -- --template starlight
cd my-docs
npm run dev
# Open http://localhost:4321
When To Use This
- API and library documentation
- Product documentation sites
- Internal knowledge bases
- Open source project docs
Trade-offs
- Opinionated design-Limited layout customization
- Docs-only-Not for blogs or marketing sites
- Static only-No SSR or dynamic content