Site Setup - Configure Your Website

To set up your Docusar site, you need to edit one main file: docusaurus.config.js. This file is located in the root folder of your project. It controls everything about your site identity, navigation, footer, and SEO.

Open docusaurus.config.js with your code editor like VS Code. We will configure it section by section.

1. SEO and Site Identity Config

At the very top of the file, you will find the site metadata. This is the first thing you must change.

  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',

What each field means:

• title: Your website name. This shows in the browser tab, navbar, and Google search. Example: Docusar
• tagline: A short description of your site. Shows under the title and is used for SEO. Example: Docusaurus template for docs, blog and SaaS
• favicon: The icon that shows in the browser tab. You can use a local file from the static folder like img/favicon.ico or a full CDN URL
• url: Your production domain. Must include https://. This is critical for the SEO sitemap and social cards. Example: https://yourdomain.com
• baseUrl: Leave as / if you host at the root domain. Only change it to /docs/ if you host in a subfolder
• organizationName: Your GitHub username
• projectName: Your GitHub repository name

Real Implementation Example:

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

For favicon: You can use a local file: put your favicon.ico inside the static/img/ folder, then set favicon: 'img/favicon.ico'. Or you can use a CDN URL: favicon: 'https://example.com/favicon.ico'.

2. Navigation Bar Setup

Next, scroll down to find themeConfig > navbar. This controls your top navigation menu.

Basic Structure:

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

Explanation:

• image: This is the social card image for Twitter and Open Graph. When you share your site on Twitter, Facebook, or Discord, this image will show. Put your image in static/img/ and set the path like img/docusaurus-social-card.jpg
• navbar.title: Text next to the logo on the top left
• navbar.logo.alt: Alt text for accessibility and SEO
• navbar.logo.src: Logo image path. Use a local file from static/img/ like img/logo.svg or an external URL

Navbar Items - Left vs Right:

By default, the Docusaurus navbar has two positions: left and right.

• position: 'left' puts the menu on the left side of the navbar
• position: 'right' puts the menu on the right side (good for CTA buttons and external links)

Router: to vs href:

This is very important to understand:

• Use to for internal links (your own pages, docs, blog). Example: to: '/about', to: '/blog', to: '/docs/welcome'
• Use href for external/outbound links (GitHub, Twitter, external sites). Example: href: 'https://github.com/mesinkasir'

Complete Implementation Example:

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

3. Footer Menu Setup

Scroll down further to find footer. This controls the bottom footer of your site.

Basic Structure:

    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',
              },
            ],
          },
        ],
        copyright: `Copyrights Footer area in here..`,
      },

Explanation:

• style: 'dark' or 'light' - a dark background footer is recommended
• links is an array of columns. Each column has a title and items
• Each items entry contains links. Use to for internal and href for external - same rule as the navbar
• You can add unlimited columns by adding new objects inside the links array

Complete Implementation Example:

    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: 'Contact',
                to: '/contact',
              },
              {
                label: 'Hire Developer',
                href: 'https://fiverr.com/creativitas',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },

Important Tips:

• Update footer links after you create your docs, blog, and static pages. Do not leave broken links.
• copyright supports JavaScript: `Copyright © ${new Date().getFullYear()} My Project` will auto-update the year every year.
• Use internal to for /docs, /blog, /about, /contact and external href for GitHub, Twitter, etc.

After you edit this file, save it and run npm run start to see the changes at http://localhost:3000.