Skip to main content

Site Setup

Configuration and setup your documentation website project

Config files​

To set up your site, you can open the configuration file, open docusaurus.config.js in the root project, and open with a code editor.

SEO Config​

For first we need to add site title, favicon , tagline and others , for favicon image you can use local storage on static folder or use CDN image.

  title: 'Your site name',
  tagline: 'your tagline in here..',
  favicon: 'url for image favicon',
  url: 'insert your domain name here',
  baseUrl: '/',
  organizationName: 'Your github account',
  projectName: 'Your github repo',

implementation

  title: 'Docusa',
  tagline: 'Docusaurus themes template',
  favicon: 'img/react.svg',
  url: 'https://docusa.pages.dev',
  baseUrl: '/',
  organizationName: 'mesinkasir',
  projectName: 'docusa',

Next you can change and update header navigation menu on this line code.

  themeConfig:
    ({
      image: 'Image for twitter card and open graph',
      navbar: {
        title: 'Nav title here..',
        logo: {
          alt: 'Alt logo here..',
          src: 'URL Image for your logo..',
        },
        items: [
          { to: 'url Router for your page here..', label: 'Name your Nav Menu', position: 'left' },
          { to: '/', label: 'Home', position: 'left' },
          {type: 'docSidebar',sidebarId: 'tutorialSidebar',position: 'left',label: 'Documentation',},
          {href: 'https://github.com/mesinkasir',label: 'Github',position: 'right',},
        ],
      },

By default, docusaurus uses two navigation sections - left and right, so you can customize the navigation bar menu based on its position. for example left is for left navbar, and right for right navbar.

Implementation for left navbar use position:'left' if you want to use nav menu on right side so you can use this position:'right'

Next you need to know about the use of links or routers, if you want to be linked to your local page for example on a staitc page or a dynamic page such as a blog or document article so you can use to if you want to create an outbound link, so you can use href

Implementation on your local router page to: '/about'

Implementation on your outbound link href: 'https://github.com/mesinkasir'

Implementation complete code look like this

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: 'DOCUSA',
        logo: {
          alt: 'Modern and New Documentation Website Themes for Ducosarus Project.',
          src: 'img/rea.svg',
        },
        items: [
          { to: '/', label: 'Home', position: 'left' },
          { to: '/about', label: 'About', position: 'left' },
          {type: 'docSidebar',sidebarId: 'tutorialSidebar',position: 'left',label: 'Documentation',},
          { to: '/blog', label: 'Blog', position: 'left' },
          { to: '/product', label: 'Product', position: 'left' },
          { to: '/contact', label: 'Contact', position: 'left' },
          {href: 'https://github.com/mesinkasir',label: 'Github',position: 'right',},
        ],
      },

Now we can scroll on footer menu to setup your footer design UI

    footer: {
        style: 'dark',
        links: [
          {
            title: 'Menu 1 Title here..',
            items: [
              {
                label: 'Title menu 1.1 here..',
                to: 'Router link for menu 1',
              },
              {
                label: 'Title menu 1.2 here..',
                to: 'Router link for menu 2',
              },
            ],
          },
          {
            title: 'Menu 2 Title Here...',
            items: [
              {
                label: 'Title menu 2.1 here..',
                to: 'Router link for menu 1',
              },
              {
                label: 'Title menu 2.2 here..',
                href: 'Outbound link for menu 2',
              },
            ],
          },
          {
            title: 'Add new Menu 3 Title Here...',
            items: [
              {
                label: 'Title menu 3.1 here..',
                to: 'Router link for menu 1',
              },
              {
                label: 'Title menu 3.2 here..',
                href: 'Outbound link for menu 2',
              },
            ],
          },
        ],
        copyright: `Copyrights Footer area in here..`,
      },

Example Implementation

    footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/welcome',
              },
              {
                label: 'Start',
                to: '/docs/getstarted',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/mesinkasir',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Contact',
                to: '/contact',
              },
              {
                label: 'Hire Developer',
                href: 'https://fiverr.com/creativitas',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },

You can change it again later after you update and add docs pages, blog pages, and static pages on your site, so you can create navigation menus and direct them to your pages.