docusaurus.config.js

#Overview

docusaurus.config.js contains configurations for your site and is placed in the root directory of your site.

#Required fields

#title

• Type: string

Title is used in a number of places in your site including the title for the web page, headings, etc.

// docusaurus.config.js
module.exports = {
  title: 'Docusaurus',
};
Copy

#tagline

• Type: string

Tagline is used in a number of places in your site including the title for the web page, sub headings, etc.

// docusaurus.config.js
module.exports = {
  tagline:
    'Docusaurus makes it easy to maintain Open Source documentation websites.',
};
Copy

#favicon

• Type: string

If you use an official template, your site will be generated with the following directory

.
├── README.md
├ # ... other files in root directory
└─ static
    └── img
        └── favicon.ico
Copy

And your generated docusaurus.config.js will contain this the field for your favicon URL relative to the static directory of your site.

// docusaurus.config.js
module.exports = {
  favicon: 'img/favicon.ico',
};
Copy

Note: It does accept external nor absolute url.

#url

• Type: string

If you use GitHub Pages, this will be the URL for your GitHub Page's user/organization page, commonly https://_username_.github.io.

// docusaurus.config.js
module.exports = {
  url: 'https://docusaurus.io',
};
Copy

#baseUrl

• Type: string

Base URL for your project. For projects hosted on GitHub pages, it follows the format "/projectName/". For https://github.com/facebook/docusaurus, baseUrl is /docusaurus/.

// docusaurus.config.js
module.exports = {
  baseUrl: '/',
};
Copy

#Optional fields

#organizationName

• Type: string

The GitHub user or organization that owns the repository. Used by the deployment command.

// docusaurus.config.js
module.exports = {
  // Docusaurus's organization is facebook
  organizationName: 'facebook',
};
Copy

#projectName

• Type: string

The name of the GitHub repository. Used by the deployment command.

// docusaurus.config.js
module.exports = {
  projectName: 'docusaurus',
};
Copy

#githubHost

• Type: string

The hostname of your server. Useful if you are using GitHub Enterprise.

// docusaurus.config.js
module.exports = {
  githubHost: 'github.com',
};
Copy

#themeConfig

• Type: Object

An object containing data needed by the theme you use.

For Docusaurus' default theme classic, we use themeConfig to customize your navbar and footer links:

// docusaurus.config.js
module.exports = {
  themeConfig: {
    navbar: {
      title: 'Site Title',
      logo: {
        alt: 'Site Logo',
        src: 'img/logo.svg',
      },
      links: [
        {
          to: 'docs/docusaurus.config.js',
          label: 'docusaurus.config.js',
          position: 'left',
        },
        // ... other links
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Docs',
          items: [
            {
              label: 'Docs',
              to: 'docs/doc1',
            },
          ],
        },
        // ... other links
      ],
      logo: {
        alt: 'Facebook Open Source Logo',
        src: 'https://docusaurus.io/img/oss_logo.png',
      },
      copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
    },
  },
};
Copy

#plugins

• Type: any[]

// docusaurus.config.js
module.exports = {
  plugins: [],
};
Copy

#themes

• Type: any[]

// docusaurus.config.js
module.exports = {
  themes: [],
};
Copy

#presets

• Type: any[]

// docusaurus.config.js
module.exports = {
  presets: [],
};
Copy

#customFields

Docusaurus guards docusaurus.config.js from unknown fields. To add a custom field, define it on customFields

• Type: Object

// docusaurus.config.js
module.exports = {
  customFields: {
    admin: 'endi',
    superman: 'lol',
  },
};
Copy

Attempting to add unknown field in the config will lead to error in build time:

Error: The field(s) 'foo', 'bar' are not recognized in docusaurus.config.js
Copy