Basics

Project Structure

• Directorypublic/

  • …
• Directorysrc/

  • Directoryassets/

    • …
  • Directorycontent/

    • Directorydocs/

      • …
  • content.config.ts
• astro.config.mjs
• package.json
• tsconfig.json

Common Commands

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

Adding Documents

1. Create a new .mdx file in src/content/docs/.

   Tip

   .md is supported, but .mdx is required for using custom components.

2. Add YAML front matter at the top of the file, otherwise it will not compile.

   ---
   title: title of the document
   description: A description of the subject matter. It is displayed in the generated static page under the top title.
   ---

Adding Custom CSS

1. Create a CSS file, e.g. src/styles/custom.css — the file name is not important.

2. Update astro.config.mjs to reference your CSS file.

   astro.config.mjs

   customCss: [
     './src/styles/example1.css',
     './src/styles/example2.css',
   ],

Sidebar Configuration

Sidebar is configured by the astro.config.mjs file.

Manual Links

sidebar: [
  { label: 'Intro', slug: 'guides/intro' },   // internal page
  { label: 'NASA', link: 'https://nasa.gov' }, // external link
]

Groups

Collapsible sections containing child pages.

{ label: 'Guides', items: [...], collapsed: false }

Auto Sidebar Plugin

Allows auto-generation of sidebar groups without editing astro.config.mjs. _meta.yml files can be placed in a directory root to control behavior.

Plugin import:

import { autoSidebar } from '@astrojs/starlight/plugins';

Example _meta.yml:

label: Astro Wiki     # rename the directory group in the sidebar
order: 1              # sort this directory before others
hidden: false         # exclude from sidebar
sort: reverse-slug    # change sort order of contents to reverse

External References

Starlight Docs Official Starlight documentation and component reference.

Astro Docs The official Astro framework documentation.