Quick Start Guide

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:

1. 1
   Install Git

   install Git-scm

2. 2
   Runtime JavaScript

   install Node.js 18+ or Bun 1.0+

3. 3
   Use PM

   A package manager (npm, yarn, or pnpm)

Installation

Project Setup

Configuration

1. 1
   Add Favicon

   Place your favicon at public/favicon.ico for browser tab display.

2. 2
   Add Logo

   Add your logo at public/images/docu.svg (SVG format recommended for scalability).

3. 3
   Update Site Information

   Customize your site's metadata in docu.json:

   • Site title and description
   • Navigation structure
   • Default theme settings

Content Management

File Structure

DocuBook organizes content in a hierarchical structure:

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

Creating New Content

1. 1
   1. Create Content Directory

   Organize your documentation by creating a new directory:

   Example for an API reference:

   bash

   CopyReady to copy code

   mkdir -p docs/api/authentication.mdx
   

2. 2
   2. Create MDX Content
   markdown

   CopyReady to copy code

   ---
   title: Authentication
   description: Learn how to implement user authentication
   date: 29-05-2025
   ---
   
   Your comprehensive guide to implementing authentication in your application.
   
   ## Getting Started
   
   Start by setting up your authentication provider...
   

3. 3
   3. Update Navigation

   Add your new section to the navigation in docu.json. Here's how to add the authentication section we created earlier:

   docu.json

   CopyReady to copy code

   {
     "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.

Development Workflow

Local Development

Start the development server with live reload:

# Using npm
npm run dev

# Or using Bun
bun dev

Access your site at http://localhost:3000

Building for Production

When ready to deploy:

# Build the production version
npm run build

# Start the production server
npm start