---
title: Quick Start Guide
description: Get up and running with DocuBook in minutes with this comprehensive guide
date: 20-05-2025
---

Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.

## Prerequisites

Before we begin, ensure you have the following installed:

- [Git](https://git-scm.com/)
- [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
- A package manager (npm, yarn, or pnpm)

## Installation

<Note type="note" title="Initial Setup">
  Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
</Note>

## Project Setup

### Configuration

<Stepper>
  <StepperItem title="Add Favicon">
    Place your favicon at `public/favicon.ico` for browser tab display.
  </StepperItem>
  <StepperItem title="Add Logo">
    Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
  </StepperItem>
  <StepperItem title="Update Site Information">
    Customize your site's metadata in `docu.json`:
    - Site title and description
    - Navigation structure
    - Default theme settings
  </StepperItem>
</Stepper>

## Content Management

### File Structure

DocuBook organizes content in a hierarchical structure:

```plaintext
contents/
  docs/                    # Main documentation directory
    getting-started/        # Section for getting started guides
      quick-start-guide/    # Current guide
        index.mdx           # Main content file
    guides/                # Additional documentation sections
      components/          # Component-specific documentation
        index.mdx
```

### Creating New Content

<Stepper>
  <StepperItem title="1. Create Content Directory">
    Organize your documentation by creating a new directory:
    ```bash
    mkdir -p contents/docs/your-section/your-topic
    ```

    Example for an API reference:
    ```bash
    mkdir -p contents/docs/api/authentication
    ```
  </StepperItem>

  <StepperItem title="2. Create MDX Content">
    Add an `index.mdx` file with frontmatter metadata:
    ````markdown
    ---
    title: Authentication
    description: Learn how to implement user authentication
    date: 2025-05-29
    ---

    Your comprehensive guide to implementing authentication in your application.

    ## Getting Started

    Start by setting up your authentication provider...
    ````
  </StepperItem>

  <StepperItem title="3. Update Navigation">
    Add your new section to the navigation in `docu.json`. Here's how to add the authentication section we created earlier:

    ```json:docu.json showLineNumbers {4-16}
    {
      "routes": [
        // ... existing routes ...
        {
          "title": "API",
          "href": "/api",
          "noLink": true,
          "context": {
            "icon": "Code2",
            "description": "API Reference and Integration",
            "title": "API"
          },
          "items": [
            { "title": "Authentication", "href": "/authentication" }
          ]
        }
      ]
    }
    ```

    This will add a new "API" section with an "Authentication" page under it. The `context` object defines how this section appears in the navigation, including its icon and description.
  </StepperItem>
</Stepper>

## Development Workflow

### Local Development

Start the development server with live reload:

```bash
# Using npm
npm run dev

# Or using Bun
bun dev
```

Access your site at [http://localhost:3000](http://localhost:3000)

### Building for Production

When ready to deploy:

```bash
# Build the production version
npm run build

# Start the production server
npm start
```