Skip to main content

Attributes of Docusaurus config

The docusaurus.config.js file is the central configuration file for a Docusaurus site. It defines the essential settings and options that control how your site is built, styled, and deployed. Below is a breakdown of the major objects and attributes in docusaurus.config.js.

Major Objects and Attributes​

1. title​

  • Type: string
  • Description: The title of your website, displayed in the browser tab and used as the default title for your site.
  • Example: 
    title: 'My Docusaurus Site',

2. tagline​

  • Type: string
  • Description: A brief description or slogan for your site, often displayed under the title.
  • Example: 
    tagline: 'Dinosaurs are cool',

3. url​

  • Type: string
  • Description: The base URL of your website. This is the public URL where your site will be hosted.
  • Example: 
    url: 'https://mysite.com',

4. baseUrl​

  • Type: string
  • Description: The base path for your site. This is useful if your site is deployed in a subdirectory (e.g., /docs/).
  • Example: 
    baseUrl: '/',
  • Type: string
  • Description: Defines how Docusaurus handles broken links. Possible values are throw, warn, or ignore.
  • Example: 
    onBrokenLinks: 'warn',
  • Type: string
  • Description: Similar to onBrokenLinks, but specifically for broken links in Markdown files.
  • Example: 
    onBrokenMarkdownLinks: 'warn',

7. favicon​

  • Type: string
  • Description: The path to the favicon of your website. This icon appears in the browser tab.
  • Example: 
    favicon: 'img/favicon.ico',

8. organizationName​

  • Type: string
  • Description: The name of your GitHub organization or user. This is used primarily for GitHub Pages deployments.
  • Example: 
    organizationName: 'facebook',

9. projectName​

  • Type: string
  • Description: The name of your project repository. This is used primarily for GitHub Pages deployments.
  • Example: 
    projectName: 'docusaurus',

10. presets​

  • Type: Array
  • Description: Presets are collections of plugins and themes. Docusaurus provides the @docusaurus/preset-classic by default, which includes documentation, blog, and theme features.
  • Example: 
    presets: [
      [
        '@docusaurus/preset-classic',
        {
          docs: {
            sidebarPath: require.resolve('./sidebars.js'),
          },
          blog: {
            showReadingTime: true,
          },
          theme: {
            customCss: require.resolve('./src/css/custom.css'),
          },
        },
      ],
    ],

11. themeConfig​

  • Type: Object

  • Description: This object contains settings related to the visual theme of your site, including the navigation bar, footer, color scheme, and more.

  • Sub-Attributes:

    • navbar: Configuration for the navigation bar, including links, logo, and title.
    • footer: Configuration for the footer, including links, copyright text, and styles.
    • colorMode: Configuration for dark/light mode toggling.
    • prism: Configuration for syntax highlighting in code blocks.

  • Example:

    themeConfig: {
      navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            to: 'docs/',
            label: 'Docs',
            position: 'left',
          },
          {to: 'blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Style Guide',
                to: 'docs/',
              },
              {
                label: 'Second Doc',
                to: 'docs/doc2/',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      colorMode: {
        defaultMode: 'light',
        disableSwitch: false,
      },
      prism: {
        theme: require('prism-react-renderer/themes/github'),
        darkTheme: require('prism-react-renderer/themes/dracula'),
      },
    },

12. plugins​

  • Type: Array
  • Description: List of plugins that add functionality to your Docusaurus site. Plugins can be used for tasks such as loading additional data, transforming content, or enhancing the build process.
  • Example: 
    plugins: [
      '@docusaurus/plugin-google-analytics',
      {
        resolve: '@docusaurus/plugin-content-docs',
        options: {
          path: 'docs',
          routeBasePath: 'docs',
          sidebarPath: require.resolve('./sidebars.js'),
        },
      },
    ],

13. i18n​

  • Type: Object
  • Description: Configuration for internationalization (i18n), allowing your site to support multiple languages.
  • Sub-Attributes:
    • defaultLocale: The default language of your site.
    • locales: The list of supported languages.
    • localeConfigs: Custom configurations for specific locales.
  • Example: 
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'fr'],
      localeConfigs: {
        en: {
          label: 'English',
        },
        fr: {
          label: 'Français',
        },
      },
    },

Summary​

  • title and tagline: Define the site's name and slogan.
  • url and baseUrl: Control the root URL and base path for the site.
  • presets and plugins: Add functionality and content types to the site.
  • themeConfig: Customizes the look and feel of the site.
  • organizationName and projectName: Define the GitHub organization and project name for deployment.
  • i18n: Manage multilingual support.

The docusaurus.config.js file is highly customizable, allowing you to tweak your site’s behavior, appearance, and functionality to fit your needs.