Skip to main content

Configure your site

Most Consensys documentation sites are built using Docusaurus and hosted on Vercel.

You can configure site components, including the top navigation, sidebar, and footer, in the docusaurus.config.js file, and server-side redirects in the vercel.json file.

Top navigation​

In docusaurus.config.js, configure the top navigation in the navbar section of the theme configuration.

Example navbar configuration
docusaurus.config.js
module.exports = {
  themeConfig: {
    navbar: {
      title: 'Site Title',
      logo: {
        alt: 'Site Logo',
        src: 'img/logo.svg',
        srcDark: 'img/logo_dark.svg',
        href: 'https://docusaurus.io/',
        target: '_self',
        width: 32,
        height: 32,
        className: 'custom-navbar-logo-class',
        style: {border: 'solid red'},
      },
      items: [
        {
          type: 'doc',
          position: 'left',
          docId: 'introduction',
          label: 'Docs',
        },
        {to: 'blog', label: 'Blog', position: 'left'},
        {
          type: 'docsVersionDropdown',
          position: 'right',
        },
        {
          type: 'localeDropdown',
          position: 'right',
        },
        {
          href: 'https://github.com/facebook/docusaurus',
          position: 'right',
          className: 'header-github-link',
          'aria-label': 'GitHub repository',
        },
      ],
    },
  },
};

In docusaurus.config.js, pass the sidebar to the sidebarPath key in your docs instance, whether it's to the docs section of the classic preset or directly to the content-docs plugin. Define and customize your sidebar in a separate sidebar file (sidebars.js by default). You can manually configure your sidebar items in sidebars.js, or auto-generate sidebar items. Auto-generated sidebar items require including metadata in the individual pages if you want to configure relative position, custom label, custom URL, etc.

Example sidebar configuration
module.exports = {
  docs: [
    "index",
    {
      type: "category",
      label: "Contribute to the docs",
      link: {
        type: "generated-index",
        slug: "/contribute"
      },
      items: [
        {
          type: "autogenerated",
          dirName: "contribute",
        },
      ],
    },
    {
      type: "category",
      label: "Create a new doc site",
      link: {
        type: "generated-index",
        slug: "/create",
      },
      items: [
        {
          type: "autogenerated",
          dirName: "create",
        },
      ],
    },
    {
      type: "category",
      label: "Configure advanced features",
      link: {
        type: "generated-index",
        slug: "/configure",
      },
      items: [
        {
          type: "autogenerated",
          dirName: "configure",
        },
      ],
    },
  ],
};

In docusaurus.config.js, configure the footer in the footer section of the theme configuration.

Example footer configuration
docusaurus.config.js
module.exports = {
  themeConfig: {
    footer: {
      links: [
        {
          title: "Docs",
          items: [
            {
              label: "Introduction",
              to: "introduction",
            },
            {
              label: "Get started",
              to: "/category/get-started",
            },
            {
              label: "How to guides",
              to: "/category/how-to",
            },
            {
              label: "Tutorials",
              to: "/category/tutorials",
            },
          ],
        },
        {
          title: "Reference",
          items: [
            {
              label: "Command line",
              to: "reference/cli",
            },
            {
              label: "REST API",
              to: "/reference/rest",
            },
          ],
        },
        {
          title: "Community",
          items: [
            {
              label: "Consensys Discord",
              href: "https://discord.gg/ChtFaC4",
            },
            {
              label: "Teku GitHub",
              href: "https://github.com/consensys/teku",
            },
            {
              label: "Teku documentation GitHub",
              href: "https://github.com/consensys/doc.teku",
            },
          ],
        },
      ],
      copyright: `© ${new Date().getFullYear()} Consensys, Inc.`,
    },
  },
};

Redirects​

Use the Vercel configuration file vercel.json to configure server-side redirects.

Example redirects configuration
vercel.json
{
  "cleanUrls": true,
  "trailingSlash": true,
  "redirects": [
    {
      "source": "/guide/",
      "destination": "/wallet/"
    },
    {
      "source": "/guide/common-terms/",
      "destination": "/wallet/"
    },
    {
      "source": "/guide/contributors/",
      "destination": "/wallet/"
    }
  ]
}