Skip to content

DiegoLSdev/LazyDocs

Repository files navigation

LazyDocs

Stop fighting with complex doc generators. Write markdown, deploy in one click, done.

LazyDocs is a lightweight documentation platform that makes it easy to create beautiful documentation websites. Simply clone the repository, write your docs in Markdown, and deploy!

You can see the demo here:

Features

  • Markdown-Based: Write documentation using simple Markdown syntax
  • Folder Organization: Organize content naturally with folders and subfolders
  • Fully Customizable: Easy theming with colors, fonts, logos, and branding
  • Auto Navigation: Sidebar automatically generated from your structure
  • Responsive Design: Looks great on desktop, tablet, and mobile
  • Fast & Lightweight: Built with React and Vite for optimal performance
  • Syntax Highlighting: Beautiful code blocks with syntax highlighting
  • No Backend Required: Pure static site that can be hosted anywhere

Quick Start

πŸš€ Option 1: Deploy Directly to Vercel (Fastest)

Deploy with Vercel

Click the button above to clone and deploy in one step. Your site will be live in 2 minutes!

πŸ’» Option 2: Local Development

Prerequisites

  • Node.js 16 or higher
  • npm or yarn

Installation

  1. Clone this repository
git clone https://github.com/DiegoLSdev/LazyDocs.git
cd lazydocs
  1. Install dependencies
npm install
  1. Start development server
npm run dev

Your documentation site will open at http://localhost:3000!

Customization

Change Site Name and Logo

  1. Add your logo to the public/ folder
  2. Edit config.json:
{
  "siteName": "Your Project Name",
  "logo": "/your-logo.svg"
}

Customize Colors and Theme

Edit the theme section in config.json:

{
  "theme": {
    "primaryColor": "#3b82f6",
    "secondaryColor": "#10b981",
    "fontFamily": "'Inter', sans-serif"
  }
}

Available theme options:

  • primaryColor - Main accent color (links, active states)
  • secondaryColor - Secondary accent color
  • backgroundColor - Main background color
  • textColor - Primary text color
  • sidebarBgColor - Sidebar background
  • headerBgColor - Header background
  • codeBlockBgColor - Code block background
  • fontFamily - Body font
  • headingFontFamily - Heading font

Change Navigation Links

Edit the navbar section in config.json:

{
  "navbar": {
    "links": [
      { "label": "Docs", "to": "/docs/getting-started/introduction" },
      { "label": "GitHub", "href": "https://github.com/yourrepo" }
    ]
  }
}

Writing Documentation

Create a New Page

  1. Create a Markdown file in the docs/ folder:
---
title: My New Page
description: This is a description of my page
---

# My New Page

Content goes here...
  1. Add to sidebar by editing docs/sidebar.json:
{
  "type": "file",
  "title": "My New Page",
  "path": "/docs/my-new-page"
}

Organize with Folders

Create nested folders for better organization:

docs/
β”œβ”€β”€ getting-started/
β”‚   β”œβ”€β”€ introduction.md
β”‚   └── installation.md
β”œβ”€β”€ guides/
β”‚   β”œβ”€β”€ basics.md
β”‚   └── advanced.md
└── api/
    └── reference.md

Update docs/sidebar.json to reflect your structure:

[
  {
    "type": "folder",
    "title": "Getting Started",
    "path": "/docs/getting-started",
    "children": [
      {
        "type": "file",
        "title": "Introduction",
        "path": "/docs/getting-started/introduction"
      }
    ]
  }
]

Project Structure

lazydocs/
β”œβ”€β”€ docs/                    # Your documentation (Markdown files)
β”‚   β”œβ”€β”€ getting-started/
β”‚   β”œβ”€β”€ customization/
β”‚   β”œβ”€β”€ writing/
β”‚   └── sidebar.json        # Navigation structure
β”œβ”€β”€ public/                  # Static assets
β”‚   β”œβ”€β”€ logo.svg            # Your logo
β”‚   └── images/             # Images for docs
β”œβ”€β”€ src/                     # Application source
β”‚   β”œβ”€β”€ components/         # React components
β”‚   β”‚   β”œβ”€β”€ Header.jsx
β”‚   β”‚   β”œβ”€β”€ Sidebar.jsx
β”‚   β”‚   β”œβ”€β”€ DocContent.jsx
β”‚   β”‚   └── Footer.jsx
β”‚   β”œβ”€β”€ utils/              # Utilities
β”‚   β”‚   β”œβ”€β”€ config.js
β”‚   β”‚   β”œβ”€β”€ markdown.js
β”‚   β”‚   └── sidebar.js
β”‚   β”œβ”€β”€ App.jsx
β”‚   └── main.jsx
β”œβ”€β”€ config.json             # Site configuration
β”œβ”€β”€ package.json
└── vite.config.js

Building for Production

Build your site for production:

npm run build

The built files will be in the dist/ directory.

Preview the production build:

npm run preview

Deployment

πŸš€ Deploy to Vercel (Recomendado)

La forma mΓ‘s rΓ‘pida de tener tu documentaciΓ³n en lΓ­nea:

Deploy with Vercel

Click en el botΓ³n de arriba y tu sitio estarΓ‘ listo en 2 minutos!

  • βœ… Deploy automΓ‘tico con cada git push
  • βœ… HTTPS gratis incluido
  • βœ… CDN global para mΓ‘xima velocidad
  • βœ… Preview deployments para cada Pull Request

πŸ“– GuΓ­a completa de deployment a Vercel

Otras Plataformas

LazyDocs genera un sitio estΓ‘tico que puede ser deployado en cualquier servicio:

GitHub Pages

npm run build
# Deploy the dist/ folder to GitHub Pages

Netlify

  1. Connect your repository
  2. Set build command: npm run build
  3. Set publish directory: dist

Any Static Host

Upload the contents of the dist/ folder to your hosting provider.

Documentation

For complete documentation on customization and usage, visit the built-in docs at:

Examples

The repository includes complete documentation as examples:

  1. Getting Started - Introduction, installation, quick start
  2. Customization - Configuration, themes, branding
  3. Writing - Markdown guide, frontmatter, organizing content

Simply replace the content in docs/ with your own!

Tech Stack

  • React 18 - UI framework
  • Vite - Build tool and dev server
  • React Router - Client-side routing
  • React Markdown - Markdown rendering
  • Gray Matter - Frontmatter parsing
  • Highlight.js - Syntax highlighting

Contributing

Contributions are welcome! Feel free to:

  • Report bugs
  • Suggest features
  • Submit pull requests
  • Improve documentation

Support the Project β˜•

LazyDocs is 100% free and open source. If you find it useful and want to support its development, consider buying me a coffee!

Buy Me A Coffee

Your support helps me:

  • πŸš€ Add new features
  • πŸ› Fix bugs faster
  • πŸ“š Improve documentation
  • ⚑ Keep the project maintained

Every coffee counts! Even a small donation makes a big difference and motivates me to keep improving LazyDocs for everyone.

Other Ways to Support

  • ⭐ Star the repository on GitHub
  • 🐦 Share LazyDocs on social media
  • πŸ“ Write a blog post about your experience
  • 🀝 Contribute code or documentation
  • πŸ’¬ Help others in issues and discussions

License

MIT License - feel free to use this for your own projects!

Support


Built with LazyDocs - Simple documentation made easy

LazyDocs

LazyDocs

LazyDocs

LazyDocs

LazyDocs