Skip to main content

Configure Docusaurus

Most Consensys documentation sites are built using Docusaurus. A Docusaurus site organizes most of its configuration in the docusaurus.config.js file, including the following key elements.

Top navigation

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',
},
],
},
},
};

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",
},
],
},
],
};

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 plugin-client-redirects plugin to configure redirects.

Example redirects configuration
docusaurus.config.js
module.exports = {
plugins: [
[
'@docusaurus/plugin-client-redirects',
{
redirects: [
// /docs/oldDoc -> /docs/newDoc
{
to: '/docs/newDoc',
from: '/docs/oldDoc',
},
// Redirect from multiple old paths to the new path
{
to: '/docs/newDoc2',
from: ['/docs/oldDocFrom2019', '/docs/legacyDocFrom2016'],
},
],
},
],
],
};