doc-docusaurus-manual/docs/configuration.md

sidebar_position

sidebar_position
3

Site configuration

Docusaurus Configuration Guide

This guide explains the key configurations in your docusaurus.config.ts file.

---

Basic Site Metadata

The following properties define the site's basic details:

title: 'My Site',
tagline: 'Dinosaurs are cool',
favicon: 'img/favicon.ico',

• title: The main title displayed in the browser tab and homepage.
• tagline: A short description displayed under the title.
• favicon: The icon shown in the browser tab.

Website Deployment Configuration

url: 'https://your-docusaurus-site.example.com',
baseUrl: '/',

• url: The production URL where your site is hosted.
• baseUrl: The subdirectory where your site is served. If deploying to GitHub Pages under /projectName/, set baseUrl: '/projectName/'.

If deploying to GitHub Pages:

organizationName: 'facebook',
projectName: 'docusaurus',
organizationName: Your GitHub username or organization.

projectName: The repository name.

Theme Configuration (Navbar, Footer, Code Highlighting)

The themeConfig defines UI elements like the navbar, footer, and syntax highlighting.

themeConfig: {
    // Replace with your project's social card
    image: 'img/docusaurus-social-card.jpg',
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          position: 'left',
          label: 'Tutorial',
        },
        {to: '/blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Docs',
          items: [
            {
              label: 'Tutorial',
              to: '/docs/intro',
            },
          ],
        },
        {
          title: 'Community',
          items: [
            {
              label: 'Stack Overflow',
              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
            },
            {
              label: 'Discord',
              href: 'https://discordapp.com/invite/docusaurus',
            },
            {
              label: 'X',
              href: 'https://x.com/docusaurus',
            },
          ],
        },
        {
          title: 'More',
          items: [
            {
              label: 'Blog',
              to: '/blog',
            },
            {
              label: 'GitHub',
              href: 'https://github.com/facebook/docusaurus',
            },
          ],
        },
      ],
      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
    },
    prism: {
      theme: prismThemes.github,
      darkTheme: prismThemes.dracula,
    },
}

• navbar: Defines navigation items.
• title: Title in the navbar.
• logo: Logo settings.
• items: Menu items, including documentation links and external links.
• footer: Defines footer styling and copyright.
• prism: Configures code syntax highlighting.
• theme: Light mode theme.
• darkTheme: Dark mode theme.