Create multiple docs with Docusaurus

Docusaurus is an open source framework developed by Facebook and based on react. It allows you to create clean, versionable and multilingual documentation with a very small configuration.

Create your project

Initialize your project with the following command:

npx @docusaurus/init@latest init my-website classic --typescript

You can then start your development mode.

cd my-websiteyarn start

Project structure

In the same philosophy as Jekyll you will be able to generate a static site based on markdown files but you can also create pages directly in jsx.

Docs file The docs file contains all the chapters of your documentation. We will see how to configure it to have two distinct documentations.

Create a second documentation

Docusaurus Config

We want to create two documentations, one Guide and the other Api. We will add an item in the navbar configuration.

navbar: {
 {
  type: 'doc',
  docId: 'guide/intro',
  position: 'left',
  label: 'Docs',
 },
 {
  type: 'doc',
  docId: 'api/intro',
  position: 'left',
  label: 'Api',
 },
}

Sidebars

We modify the Sidebars to include the two documentation and set their dirName to subfolders that we will create in the docs folder.

module.exports = {
    docSidebar: [{ type: 'autogenerated', dirName: 'guide' }],
    apiSidebar: [{ type: 'autogenerated', dirName: 'api' }],
};

Writing documentation

Now you have to create two folders docs/guide and docs/api in which you can create your two documentations.