Aller au contenu principal

Docusaurus Architecture

This page explains the main folders and how they connect.

Typical Project Structure​

my-website/
  docs/
  blog/
  src/
  static/
  docusaurus.config.ts
  sidebars.ts
  package.json

Folder Responsibilities​

  • docs/: Markdown and MDX documentation files
  • blog/: Blog posts and metadata
  • src/: React components, pages, custom CSS
  • static/: Images and static files served directly
  • build/: Generated static output (created after build)

Configuration Files​

  • docusaurus.config.ts: Site config, plugins, theme, navbar, footer, i18n
  • sidebars.ts: Docs sidebar navigation definition
  • tsconfig.json: TypeScript project settings

Routing Model​

Docusaurus creates routes automatically:

  • docs intro page: /docs/intro
  • docs folder pages: /docs/<folder>/<slug>
  • blog: /blog
  • custom page in src/pages/contact.tsx: /contact

Build and Serve Lifecycle​

  1. npm run start -> dev server with hot reload
  2. npm run build -> production static site output
  3. npm run serve -> preview production build locally