Skip to content
Starlight

Getting Started

Starlight is a full-featured documentation theme built on top of the Astro framework. This guide will help you get started with a new project. See the manual setup instructions to add Starlight to an existing Astro project.

Quick Start

Create a new project

Create a new Astro + Starlight project by running the following command in your terminal:

npm create astro@latest -- --template starlight

This will create a new project directory with all the necessary files and configurations for your site.

Start the development server

When working locally, Astro’s development server lets you preview your work and automatically refreshes your browser when you make changes.

Inside your project directory, run the following command to start the development server:

npm run dev

This will log a message to your terminal with the URL of your local preview. Open this URL to start browsing your site.

Add content

Starlight is ready for you to add new content, or bring your existing files!

File formats

Starlight supports authoring content in Markdown and MDX with no configuration required. You can add support for Markdoc by installing the experimental Astro Markdoc integration.

Add pages

Add new pages to your site by creating .md or .mdx files in src/content/docs/. Use sub-folders to organize your files and to create multiple path segments.

For example, the following file structure will generate pages at example.com/hello-world and example.com/guides/faq:

  • Directorysrc/
    • Directorycontent/
      • Directorydocs/
        • Directoryguides/
          • faq.md
        • hello-world.md

Type-safe frontmatter

All Starlight pages share a customizable common set of frontmatter properties to control how the page appears:

---
title: Hello, World!
description: This is a page in my Starlight-powered site
---

If you forget anything important, Starlight will let you know.

Next steps

Updating Starlight

Starlight is an Astro integration, and is updated like any @astrojs/* integration:

npm install @astrojs/starlight@latest

See the Starlight changelog for a full list of the changes made in each release.

Troubleshooting Starlight

Use the project configuration and individual page frontmatter configuration reference pages to ensure that your Starlight site is configured and functioning properly. See the guides in the sidebar for help adding content and customizing your Starlight site.

If your answer cannot be found in these docs, please visit the full Astro Docs for complete Astro documentation. Your question may be answered by understanding how Astro works in general, underneath this Starlight theme.

You can also check for any known Starlight issues on GitHub, and get help in the Astro Discord from our active, friendly community! Post questions in our #support forum with the “starlight” tag, or visit our dedicated #starlight channel to discuss current development and more!