Installation

This guide details the different methods for installing Lumen, whether you’re starting from a new project or an existing Astro project.

Automatic Installation

The fastest method is to use the project scaffolding tool:

pnpm create astro@latest -- --template starlight

This command creates a new folder with all the required files and installs the dependencies.

Manual Installation

If you already have an Astro project, add Lumen as an integration:

pnpm add @astrojs/starlight

Then edit your astro.config.mjs file:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Documentation',
      description: 'A documentation site powered by Lumen.',
    }),
  ],
});

Optional Dependencies

Local Search

The search engine is enabled by default. No additional dependencies are required: it runs entirely client-side using Pagefind.

Optimized Images

To automatically generate responsive and optimized images, install Sharp:

pnpm add sharp

Interactive Components

To use React, Vue, or Svelte components in your MDX pages, add the corresponding integration:

# React
pnpm add @astrojs/react

# Vue
pnpm add @astrojs/vue

# Svelte
pnpm add @astrojs/svelte

Verification

To verify the installation was successful, start the development server:

pnpm dev

If everything is correct, you’ll see your documentation homepage at http://localhost:4321.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.