Skip to main content

Update Config - Complete Setup Guide

After you create static pages, docs, and blog, you must update your main configuration file. In Docusaurus, one file controls everything: docusaurus.config.js. This file is located in the root folder of your project, at the same level as package.json.

If you do not update this file, your site will still show the default Docusaurus title, default navigation, and default footer. This guide will explain every part of it from zero.

Step 1: Open the Config File​

  1. Open your Docusar project folder in VS Code or any code editor
  2. In the left file explorer, find the file named docusaurus.config.js in the root directory
  3. Double-click to open it. You will see JavaScript code with many sections

This file is divided into several important sections. We will edit them one by one.

Step 2: Update Site Metadata (Most Important)​

At the very top of the file, you will see this:

const config = {
  title: 'Docusar',
  tagline: 'Docusaurus Template for Docs, Blog & SaaS',
  favicon: 'img/favicon.ico',
  url: 'https://docusar.creativitas.dev',
  baseUrl: '/',
  organizationName: 'creativitas',
  projectName: 'docusar',

What to change:

  • title: Your website name. Example: change it to Acme Docs or My Product Docs. This appears in the browser tab and the navbar logo area.
  • tagline: A short description under the title. Example: Modern docs for developers
  • url: Your final production URL. If you use a custom domain, change it to https://yourdomain.com. If you use Vercel, change it to https://yourdomain.vercel.app. This must be a full URL with https. It is used for the sitemap and SEO.
  • baseUrl: Leave as / if you host at the root domain. Only change it if you host in a subfolder like /docs/
  • favicon: Path to your favicon icon in /static/img/. Replace the file in static/img/favicon.ico with your own.
  • organizationName and projectName: For GitHub Pages deployment only. If you deploy to Vercel or Netlify, you can ignore this.

Step 3: Update the Navigation Bar (Navbar)​

Scroll down until you find themeConfig > navbar. This controls the top menu.

navbar: {
  title: 'Docusar',
  logo: {
    alt: 'Docusar Logo',
    src: 'img/logo.svg',
  },
  items: [
    {
      type: 'docSidebar',
      sidebarId: 'tutorialSidebar',
      position: 'left',
      label: 'Docs',
    },
    { to: '/product', label: 'Product', position: 'left' },
    { to: '/about', label: 'About', position: 'left' },
    { to: '/blog', label: 'Blog', position: 'left' },
    { to: '/contact', label: 'Contact', position: 'right' },
    { to: '/order', label: 'Buy $75', position: 'right', className: 'button button--primary' },
  ],
},

How it works:

  • title and logo: The logo and text on the top left. Change src to your own logo file in /static/img/
  • items: An array of menu links. Each object is one menu item.
  • to: '/product' means a link to your internal page /pages/product.js
  • label is what the user sees in the menu
  • position: 'left' or 'right' controls which side of the navbar it appears on
  • type: 'docSidebar' is a special link that opens your docs sidebar

How to edit:

  • Want to add a new page like /pricing? Add { to: '/pricing', label: 'Pricing', position: 'left' }
  • Want to remove the Product link? Delete that line
  • Want to change the order? Move the objects up or down

Scroll down, still inside themeConfig, and find footer:

footer: {
  style: 'dark',
  links: [
    {
      title: 'Product',
      items: [
        { label: 'Features', to: '/product' },
        { label: 'Pricing', to: '/#pricing' },
        { label: 'Order', to: '/order' },
      ],
    },
    {
      title: 'Company',
      items: [
        { label: 'About', to: '/about' },
        { label: 'Contact', to: '/contact' },
        { label: 'Blog', to: '/blog' },
      ],
    },
    {
      title: 'Resources',
      items: [
        { label: 'Documentation', to: '/docs/welcome' },
        { label: 'GitHub', href: 'https://github.com/yourname/repo' },
      ],
    },
  ],
  copyright: `Copyright © ${new Date().getFullYear()} Docusar. Built with Docusaurus.`,
},

How it works:

  • The footer has 3 columns. Each column has a title and items
  • to is an internal link (starts with /), href is an external link (full URL)
  • copyright appears at the very bottom

How to edit:

  • Change the column titles to match your site
  • Update the links to your actual pages
  • Replace the GitHub link with your own GitHub repo URL
  • Change the copyright to your company name

Step 5: Update Docs and Blog Settings​

Scroll up, outside themeConfig, and find presets:

presets: [
  [
    'classic',
    {
      docs: {
        sidebarPath: './sidebars.js',
        editUrl: 'https://github.com/yourname/repo/edit/main/',
      },
      blog: {
        showReadingTime: true,
        editUrl: 'https://github.com/yourname/repo/edit/main/',
      },
      theme: {
        customCss: './src/css/custom.css',
      },
    },
  ],
],

What to change:

  • sidebarPath: Path to your sidebar file. Leave it as ./sidebars.js
  • editUrl: When a user clicks "Edit this page", this is where it goes. Replace yourname/repo with your GitHub username and repo name. Example: https://github.com/johndoe/docusar-docs/edit/main/
  • showReadingTime: true shows reading time in the blog. Leave it as true
  • customCss is the path to your global CSS. Leave it as is

Step 6: Update Custom CSS (Colors)​

If you want to change colors, open src/css/custom.css:

:root {
  --ifm-color-primary: #4f46e5;
  --ifm-color-primary-dark: #4338ca;
  --ifm-color-primary-darker: #3730a3;
}
  • --ifm-color-primary is your main brand color. Change #4f46e5 to your own hex color. Use a color picker like https://colorpicker.me
  • Dark mode colors are under the [data-theme='dark'] selector below it. Update those too if you want a different dark mode color.

Step 7: Save and Test​

  1. After editing docusaurus.config.js, save the file (Ctrl+S or Cmd+S)
  2. If your dev server is running (npm run start), it will auto-reload. If not, run:
npm run start
  1. Open http://localhost:3000 and check:
    • Does the title in the browser tab change?
    • Does the navbar show your new menu?
    • Does the footer show your new links?

If you see an error in the terminal, check for a missing comma or bracket. The most common error is forgetting a comma , after each item in the navbar or footer array.

After everything looks correct, you are ready to push to GitHub and deploy.