Skip to main content

Docusaurus config setup

After you have created the folder structure in Obsidian its time to adjust the Docusaurus settings to support this structure.

Open your repo folder with VS Code​

Open the repository folder with VSCode or any other IDE.

In your website Folder search for the file docusaurus.config.js

sidebar.js​

Change from this:

const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

  // But you can create a sidebar manually
  /*
  tutorialSidebar: [
    'intro',
    'hello',
    {
      type: 'category',
      label: 'Tutorial',
      items: ['tutorial-basics/create-a-document'],
    },
  ],
   */
};

To your sidebar structure

const sidebars = {
    sidebar1: [{type: 'autogenerated', dirName: 'sidebar1'}],
    sidebar2: [{type: 'autogenerated', dirName: 'sidebar2'}],
};

docusaurus.config.js​

Multiple Languages​

Search for line:

i18n: {
defaultLocale: 'en',
locales: ['en'],
},

Adjust to your languages, e.g.:

i18n: {
defaultLocale: 'en',
locales: ['en', 'de'],
},

Theme Config​

Search for themeConfig:

themeConfig:
    /** @type {import('@docusaurus/preset-classic').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',
          },
        ],
      },
  ...

Adjust the items to your structure:

        items: [
          {
            type: 'docSidebar',
            sidebarId: 'sidebar1', // <- from sidebar.js
            position: 'left',
            label: 'Sidebar 1',
          },
          {
            type: 'docSidebar',
            sidebarId: 'sidebar2', // <- from sidebar.js
            position: 'left',
            label: 'Sidebar 2',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {to: '/second-blog', label: 'Second Blog', position: 'left'}, 
      ],

Multiple Blogs​

in the themeConfig Object add or adjust your plugins :

        plugins: [
          [
            '@docusaurus/plugin-content-blog',
            {
              id: 'second-blog',
              routeBasePath: 'second-blog',
              path: './second-blog__blog', 
            },
          ],
        ],