Configuration

Configuration

This guide walks you through the configuration of your Docuna documentation site.

Before you start, make sure you already have a clear list of content or categories for your documentation project. That makes the configuration step much faster.

Most of the configuration lives in a single file: astro.config.mjs. Open it in your code editor and follow the steps below.

Set your site URL

The site field is used by Astro for generating canonical URLs, sitemaps, and RSS feeds. Set it to your production domain.

site: 'https://your-domain.com',

If you deploy to a subpath (for example, https://example.com/docs), include it here as well.

Set your site title

The title field appears in the browser tab, the site header, and default metadata.

title: 'Your documentation title',

Keep it short — two to four words is usually enough. This is the name your readers will see across the site.

Configure the sidebar

The sidebar is defined as an array of groups. Each group has a label and a list of items.

{
  label: 'Getting Started',
  items: [
    { label: 'Installation', link: '/getting-started/installation/' },
    { label: 'Configuration', link: '/getting-started/configuration/' },
  ],
}

• label is the group heading shown in the sidebar.
• items is the list of links inside that group.
• Each item has a label (display text) and a link (URL path).

You can add as many groups as you need. Order matters — the sidebar renders in the order you define.

Auto-generate items from a folder

If you have many documentation files, you can let Starlight generate the sidebar from a folder instead of listing every file manually.

{
  label: 'Project',
  autogenerate: { directory: 'project' },
}

This tells Starlight to read every Markdown or MDX file inside the project folder and build the sidebar automatically.

You can mix manual groups and auto-generated groups in the same sidebar.

Example: full configuration

Here is a minimal but complete example you can adapt.

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

export default defineConfig({
  site: 'https://your-domain.com',
  integrations: [
    starlight({
      title: 'Your documentation title',
      social: {
        github: 'https://github.com/your-username/your-repo',
      },
      sidebar: [
        {
          label: 'Getting Started',
          items: [
            { label: 'Installation', link: '/getting-started/installation/' },
            { label: 'Configuration', link: '/getting-started/configuration/' },
          ],
        },
        {
          label: 'Project',
          autogenerate: { directory: 'project' },
        },
      ],
    }),
  ],
});

Example: implementation used by Docuna

For reference, this is the actual configuration used by the Docuna theme.

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

export default defineConfig({
  site: 'https://docuna.pages.dev',
  integrations: [
    starlight({
      title: 'Docuna',
      social: {
        github: 'https://www.fiverr.com/creativitas',
      },
      sidebar: [
        {
          label: 'Getting Started',
          items: [
            { label: 'Welcome', link: '/getting-started/' },
            { label: 'Download', link: '/getting-started/download/' },
            { label: 'Installation', link: '/getting-started/installation/' },
            { label: 'Structure', link: '/getting-started/structure/' },
            { label: 'Configuration', link: '/getting-started/configuration/' },
            { label: 'Design UI', link: '/getting-started/design/' },
            { label: 'Content Doc', link: '/getting-started/content/' },
            { label: 'Static Page', link: '/getting-started/static-page/' },
            { label: 'Host & Deploy', link: '/getting-started/hosting-deploy/' },
            { label: 'Headless CMS', link: '/getting-started/headlesscms/' },
          ],
        },
        {
          label: 'Themes',
          autogenerate: { directory: 'themes' },
        },
      ],
    }),
  ],
});

Notes

• Keep sidebar labels short and consistent. They are the first thing readers scan.
• Use auto-generated groups for folders with many files, and manual groups for the rest.
• If you change a folder name, update the autogenerate.directory value to match.
• Run your dev server after editing astro.config.mjs — some changes require a restart.