Docusaurus 1 Project Structure

1. Project Structure (+3)

1. Project Structure

my-website/
├── blog/                    # Blog posts
├── docs/                    # Documentation
│   ├── intro.md
│   └── tutorial-basics/
├── src/
│   ├── components/          # React components
│   ├── css/                 # Custom styles
│   └── pages/               # Custom pages
├── static/                  # Static assets
├── docusaurus.config.js     # Main configuration
└── sidebars.js              # Sidebar configuration

2. Main Configuration

// docusaurus.config.js
/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'My Project',
  tagline: 'A powerful documentation framework',
  favicon: 'img/favicon.ico',
  url: 'https://myproject.github.io',
  baseUrl: '/',
  organizationName: 'myorg',
  projectName: 'my-project',

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  presets: [
    ['classic', {
      docs: {
        sidebarPath: './sidebars.js',
        editUrl: 'https://github.com/myorg/my-project/tree/main/',
        showLastUpdateTime: true,
      },
      blog: {
        showReadingTime: true,
        postsPerPage: 10,
      },
      theme: {
        customCss: './src/css/custom.css',
      },
    }],
  ],

  themeConfig: {
    navbar: {
      title: 'My Project',
      logo: { alt: 'Logo', src: 'img/logo.svg' },
      items: [
        { type: 'docSidebar', sidebarId: 'tutorialSidebar', label: 'Docs' },
        { to: '/blog', label: 'Blog' },
        { type: 'docsVersionDropdown' },
        { href: 'https://github.com/myorg/my-project', position: 'right' },
      ],
    },
    footer: {
      style: 'dark',
      links: [
        { title: 'Docs', items: [{ label: 'Getting Started', to: '/docs/intro' }] },
        { title: 'Community', items: [{ label: 'Discord', href: 'https://discord.gg/xxx' }] },
      ],
      copyright: `Copyright ${new Date().getFullYear()} My Project.`,
    },
    prism: {
      theme: require('prism-react-renderer').themes.github,
      darkTheme: require('prism-react-renderer').themes.dracula,
      additionalLanguages: ['bash', 'python', 'yaml'],
    },
  },
};

module.exports = config;

3. Sidebar Configuration

// sidebars.js
const sidebars = {
  tutorialSidebar: [
    'intro',
    {
      type: 'category',
      label: 'Getting Started',
      collapsed: false,
      items: [
        'getting-started/installation',
        'getting-started/quick-start',
      ],
    },
    {
      type: 'category',
      label: 'Guides',
      link: { type: 'doc', id: 'guides/index' },
      items: ['guides/basic-usage', 'guides/advanced'],
    },
    {
      type: 'category',
      label: 'Examples',
      items: [{ type: 'autogenerated', dirName: 'examples' }],
    },
  ],
};

module.exports = sidebars;

4. Documentation Pages

<!-- docs/intro.md -->
---
id: intro
title: Introduction
sidebar_position: 1
description: Introduction to My Project
---

# Introduction

Welcome to **My Project** documentation!