Skip to main content

Getting Started

πŸƒβ€β™‚οΈ Quick Start​

Local Development​

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Visit http://localhost:3000 to see the result.

Documentation Structure​

docs/
β”œβ”€β”€ intro/           # Project introduction
β”œβ”€β”€ cs/              # Computer Science fundamentals
β”œβ”€β”€ backend/         # Backend development
β”œβ”€β”€ system-design/   # System design patterns
└── ...

πŸ“ Conventions​

Frontmatter​

Every markdown file must include frontmatter:

---
slug: /unique-url-slug
title: Display Title
sidebar_label: Short Sidebar Name
description: Short SEO description
---

Mermaid Diagrams​

Callouts​

:::tip[Pro Tip]
Something useful
:::

:::warning[Warning]
Something to be careful about
:::

:::danger[Danger]
Critical information
:::

πŸ”§ Configuration​

Docusaurus Config​

The docusaurus.config.ts file contains all site configuration:

  • Theme: Colors, fonts, navbar
  • Plugins: Mermaid, search, analytics
  • Deployment: GitHub Pages, Netlify
  • i18n: Multi-language support (currently: Vietnamese)

The sidebars.ts file defines the sidebar structure:

tutorialSidebar: [
  {
    type: 'category',
    label: 'Category Name',
    items: ['doc/file-1', 'doc/file-2'],
  },
],

🎨 Styling​

Customize CSS variables in src/css/custom.css:

:root {
  --ifm-color-primary: #2e8555;
  --ifm-code-font-size: 95%;
}

🚒 Deployment​

Netlify​

  1. Connect your GitHub repository
  2. Framework auto-detected as Docusaurus
  3. Build command: npm run build
  4. Output directory: build

GitHub Pages​

npm run deploy

πŸ“š Resources​