Quick Start Guide

Get up and running with DocuBook in minutes with this comprehensive 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:

Installation

Initial Setup:

Follow the installation guide to set up your project dependencies and configuration.

Project Setup

Configuration

1

Add Favicon

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

2

Add Logo

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

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:

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

1

1. Create Content Directory

Organize your documentation by creating a new directory:

mkdir -p contents/docs/your-section/your-topic

Example for an API reference:

mkdir -p contents/docs/api/authentication
2

2. Create MDX Content

Add an index.mdx file with frontmatter metadata:

---
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...
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
{
  "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
Edit this page

Published on May 20, 2025