Skip to main content

Folder Structure - Complete Breakdown

When you download Docusar, you will see many folders and files. If you are new to Docusaurus, this can be confusing. This article explains every important folder from zero, so you know exactly where to edit.

Root Level Structure​

When you open your Docusar project in VS Code, you will see this at the root:

docusar/
├── blog/                  -> Your blog posts
├── data/                  -> JSON files for design and content of static pages
├── docs/                  -> Your documentation articles
├── src/                   -> Your theme, components, pages, and global CSS
├── static/                -> Your images, icons, and static files
├── docusaurus.config.js   -> Main site configuration (title, navbar, footer)
├── sidebars.js             -> Sidebar structure for docs
├── package.json           -> Dependencies and scripts
└── .gitignore

Let's explain them one by one in detail.

1. blog/ - Blog Posts Folder​

This folder contains all your blog articles.

  • Each file is one blog post, written in Markdown .md or .mdx
  • The file name should include the date: 2024-01-15-my-first-blog.md
  • Inside each file, you have frontmatter at the top: 
    ---
    title: My First Blog
    authors: sonandrest
    tags: [docusaurus, tutorial]
    ---
  • Blog posts automatically appear on the /blog route. You do not need to create pages manually.
  • To add a new blog post: just create a new .md file in this folder.

2. data/ - Design and Content Data (JSON)​

This is the most important folder for beginners. This is where you edit your homepage, product page, and about page without touching React.

  • home.json - Controls the entire homepage: hero title, section text, feature list, pricing plans, FAQ
  • about.json - Controls the about page content
  • product.json - Controls the product page features and descriptions

How it works: Your React components in src/components/ read data from these JSON files. So when you change text in JSON, the component re-renders with the new text.

Example structure in home.json:

{
  "header": { "title": "Build Docs That Sell", "subtitle": "..." },
  "section": { "title": "One Template...", "description": "..." },
  "plan": [
    { "name": "Basic", "price": "$75" }
  ]
}

3. docs/ - Documentation Folder​

This folder contains all your documentation articles.

  • Same as blog, but for docs. Each file is one doc page.
  • You can create subfolders: docs/getting-started/, docs/tutorial/
  • To group docs, create a _category_.json file inside a subfolder: 
    {
      "label": "Getting Started",
      "position": 1
    }
  • Each doc file needs frontmatter: 
    ---
    title: Welcome
    sidebar_position: 1
    ---
  • The sidebar order is controlled by sidebar_position or by sidebars.js

4. src/ - Source Code (Theme and Pages)​

This is where React code lives. Do not be scared - you mostly just need to know the 3 subfolders inside it:

src/pages/ - Static Pages Every .js file here becomes a route on your website:

  • index.js -> becomes / (homepage)
  • about.js -> becomes /about
  • product.js -> becomes /product
  • contact.js -> becomes /contact
  • order.js -> becomes /order
  • webdev.js -> becomes /webdev
  • cms.js -> becomes /cms
  • basic.md, standard.md, pro.md -> become /basic, /standard, /pro

You edit these pages to change the layout, and they load data from the /data folder.

src/components/ - Reusable Components This is where you build UI sections:

  • components/Home/Header/ - Hero section
  • components/Home/Section/ - Feature section with image
  • components/Home/Section_list/ - Checklist feature list
  • components/Home/Intro/ and Intro_list/ - 6 feature cards grid
  • components/Home/Plan/ - Pricing section with 3 cards: Basic/, Standard/, Pro/
  • components/Product/List/ - Cards for the product page
  • components/Contact/List/ - Cards for the contact page

Each component has index.js (logic) and styles.module.css (styling for that component only).

src/css/custom.css - Global Styles This file controls global colors, fonts, and dark/light mode. The main variable is:

:root {
  --ifm-color-primary: #4f46e5; /* Your brand color */
}

Change this to change your entire site's primary color.

5. static/ - Media Storage​

This folder is for static files that do not need processing:

  • static/img/ - Put all your images, logos, and favicons here
  • static/img/logo.svg - Your logo
  • static/img/favicon.ico - Browser tab icon
  • Files in static/ are accessible directly via the /img/... URL. Example: static/img/screenshot.png becomes https://yourdomain.com/img/screenshot.png

6. docusaurus.config.js - Main Config​

This is the brain of your site. A single file that controls:

  • Site title, tagline, URL, favicon
  • Navbar menu items (top menu)
  • Footer links (bottom links)
  • Docs and blog settings (edit URL, reading time)
  • Theme settings
  • Deployment config

You must update this file when you launch your site (see the Update Config article).

7. sidebars.js - Docs Sidebar​

This file controls the left sidebar in the documentation:

tutorialSidebar: [
  'welcome',
  'installation',
  {
    type: 'category',
    label: 'Guides',
    items: ['folder-structure', 'update-config']
  }
]
  • You can add, remove, or reorder docs here
  • Or you can use sidebar_position in each doc file's frontmatter to auto-sort

Quick Summary for Beginners​

  • Want to change homepage text? Edit data/home.json
  • Want to add new docs? Create a file in docs/
  • Want to add a new blog? Create a file in blog/
  • Want to change an image? Replace the file in static/img/
  • Want to change the navbar or footer? Edit docusaurus.config.js
  • Want to change the color? Edit src/css/custom.css

Once you understand this structure, you can customize Docusar without ever getting lost.