Docusaurus Multi-instance Template

This template helps you get started with a Docusaurus 2 multi-instance.

When you use this template in addition to the docs directory you'll also notice a demo directory, which is the location of the second docs plugin instance powered by @docusaurus/plugin-content-docs.

This template was created by using techniques laid out in:

• Official Docusaurus Multi-instance documentation
• This Stack Overflow comment

Special thanks to @Josh-Cena for some support in the Docusaurus Discord server.

What's different?

Files added

website # Root directory of your site
└── demo
   ├── intro.md
   └── document.md
└── sidebarsDemo.js

The demo directory

This is where the second instance is located. It can be easily updated to suit your needs.

Changes to docusaurus.config.js

Adding the second instance

This was done by adding a plugins: […] to module.exports.

(module.exports = { // start of the module.export declaration
[…]

plugins: [
    […]
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'demo',
        path: 'demo',
        routeBasePath: 'demo',
        sidebarPath: require.resolve('./sidebarsDemo.js'),
        // ... other options
      },
    ],
],

[…]
}); // end of the module-export declaration

Note that demo and sidebarsDemo.js would need to change if you'd like to use a different name.

Adding "Demo" to the Navbar

(module.exports = { // start of the module.export declaration
[…]

navbar: {
    items: [
        […]
        {
            to: '/demo/intro', // To highlight the navbar item, you must link to a document, not a top-level directory
            position: 'left',
            label: 'Demo',
            activeBaseRegex: `/demo/`,
        },
    ],
}

}); // end of the module-export declaration
[…]

Here you can change the label from "Demo" to anything of your choice. Note that if you changed the strings in the above plugins example, you will need to reflect those changes in the above navbar items section as well.

Adding sidebarsDemo.js

const sidebars = {
    […]

    demoSidebars: [
        {
            type: 'autogenerated',
            dirName: '.' // This must remain `.` if your new docs instance is in the base directory
        }
    ],

}

Installation

Simply fork this repository, or click the Use this template button above. Then:

$ npm install

Local Development

$ npm start

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

Build

$ npm run build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

See the official project documentation on Deployment.

Enjoy!

Thanks and hit me up on Twitter (@mg) if you're using this.