Convert Figma logo to code with AI

facebook logodocusaurus

Easy to maintain open source documentation websites.

55,406
8,307
55,406
323

Top Related Projects

124,777

The React Framework

55,199

The best React-based framework with performance, scalability and security built in.

74,645

The world’s fastest framework for building websites.

16,839

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

22,485

📝 Minimalistic Vue-powered static site generator

48,920

:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

Quick Overview

Docusaurus is an open-source static site generator developed by Facebook. It's designed to create documentation websites quickly and easily, with a focus on React-based development and modern web technologies. Docusaurus provides a set of features tailored for technical documentation, including versioning, search, and internationalization.

Pros

  • Easy setup and configuration for documentation projects
  • Built-in support for versioning, allowing multiple versions of documentation to coexist
  • Excellent performance due to static site generation and optimized build process
  • Strong focus on developer experience with hot reloading and MDX support

Cons

  • Learning curve for developers not familiar with React
  • Limited theming options compared to some other static site generators
  • Can be overkill for very simple documentation projects
  • Occasional breaking changes between major versions

Getting Started

To create a new Docusaurus project, follow these steps:

npx create-docusaurus@latest my-website classic
cd my-website
npm start

This will create a new Docusaurus project with the classic template, navigate to the project directory, and start the development server. You can then open your browser and visit http://localhost:3000 to see your new Docusaurus site.

To add a new documentation page, create a Markdown file in the docs directory:

---
id: my-doc-page
title: My New Documentation Page
---

# Welcome to My New Page

This is a new documentation page created with Docusaurus.

To configure your site, edit the docusaurus.config.js file in the root directory. Here's an example of some basic configuration:

module.exports = {
  title: 'My Documentation Site',
  tagline: 'Awesome docs for my project',
  url: 'https://mywebsite.com',
  baseUrl: '/',
  organizationName: 'myorg',
  projectName: 'myproject',
  themeConfig: {
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {to: 'docs/intro', activeBasePath: 'docs', label: 'Docs', position: 'left'},
        {to: 'blog', label: 'Blog', position: 'left'},
        {href: 'https://github.com/myorg/myproject', label: 'GitHub', position: 'right'},
      ],
    },
  },
};

This configuration sets up basic site information, organization details, and navbar items. You can customize this further to fit your project's needs.

Competitor Comparisons

124,777

The React Framework

Pros of Next.js

  • More flexible and suitable for a wider range of web applications
  • Better performance optimization with automatic code splitting and server-side rendering
  • Larger ecosystem and community support

Cons of Next.js

  • Steeper learning curve, especially for developers new to React
  • More complex setup and configuration compared to Docusaurus
  • Less specialized for documentation sites, requiring more custom work for such projects

Code Comparison

Next.js:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

Docusaurus:

import React from 'react';
import Layout from '@theme/Layout';

function HomePage() {
  return (
    <Layout>
      <h1>Welcome to Docusaurus!</h1>
    </Layout>
  );
}

Next.js offers a more minimalistic approach, while Docusaurus provides a pre-configured layout structure. Next.js requires less boilerplate code for simple pages, but Docusaurus includes built-in components tailored for documentation sites.

Both frameworks use React and JSX, making them familiar to React developers. However, Docusaurus abstracts away some of the configuration and routing complexities that Next.js exposes, making it easier to get started with documentation projects but less flexible for other types of web applications.

55,199

The best React-based framework with performance, scalability and security built in.

Pros of Gatsby

  • More flexible and customizable for various types of websites
  • Larger ecosystem with a wide range of plugins and themes
  • Better performance optimization with built-in image processing and lazy loading

Cons of Gatsby

  • Steeper learning curve, especially for developers new to React and GraphQL
  • Longer build times for large sites compared to Docusaurus
  • More complex setup and configuration process

Code Comparison

Gatsby (JavaScript):

import React from "react"
import { Link } from "gatsby"

export default function Home() {
  return <Link to="/about/">About</Link>
}

Docusaurus (JavaScript):

import React from 'react';
import Link from '@docusaurus/Link';

export default function Home() {
  return <Link to="/about">About</Link>;
}

Both Gatsby and Docusaurus are popular static site generators built with React. Gatsby offers more flexibility and a larger ecosystem, making it suitable for various types of websites. However, it comes with a steeper learning curve and more complex setup. Docusaurus, on the other hand, is more focused on documentation sites and provides a simpler setup process. The code comparison shows that both frameworks use similar syntax for creating links, with minor differences in import statements and component usage.

74,645

The world’s fastest framework for building websites.

Pros of Hugo

  • Faster build times, especially for large sites
  • No dependencies required, as it's a single binary
  • Supports a wider range of content formats (Markdown, AsciiDoc, Org-mode, etc.)

Cons of Hugo

  • Steeper learning curve, especially for non-technical users
  • Less extensive documentation and smaller community compared to Docusaurus
  • Limited built-in features for versioning and internationalization

Code Comparison

Hugo (config.toml):

baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Hugo Site"
theme = "ananke"

Docusaurus (docusaurus.config.js):

module.exports = {
  title: 'My Docusaurus Site',
  tagline: 'A modern static website generator',
  url: 'https://example.com',
  baseUrl: '/',
  // ... other configurations
};

Both Hugo and Docusaurus are popular static site generators, but they cater to different needs. Hugo excels in performance and flexibility, making it suitable for a wide range of projects. Docusaurus, on the other hand, offers a more user-friendly experience and is particularly well-suited for documentation sites, especially those related to technical projects or open-source software.

16,839

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

Pros of Eleventy

  • Lightweight and flexible, with minimal configuration required
  • Language-agnostic, supporting multiple templating languages
  • Faster build times for smaller to medium-sized projects

Cons of Eleventy

  • Less opinionated, requiring more setup for advanced features
  • Smaller ecosystem and community compared to Docusaurus
  • Limited built-in support for complex documentation structures

Code Comparison

Eleventy configuration:

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "dist"
    }
  };
};

Docusaurus configuration:

module.exports = {
  title: 'My Site',
  tagline: 'A website with Docusaurus',
  url: 'https://your-docusaurus-site.example.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'facebook',
  projectName: 'docusaurus',
};

Both Eleventy and Docusaurus are static site generators, but they cater to different use cases. Eleventy is more flexible and lightweight, suitable for various project types, while Docusaurus is specifically designed for documentation websites with built-in features tailored for that purpose.

22,485

📝 Minimalistic Vue-powered static site generator

Pros of VuePress

  • Lightweight and fast, with minimal configuration required
  • Seamless integration with Vue.js ecosystem and components
  • Built-in Markdown extensions and powerful theming system

Cons of VuePress

  • Limited plugin ecosystem compared to Docusaurus
  • Less out-of-the-box features for complex documentation sites
  • Steeper learning curve for non-Vue developers

Code Comparison

VuePress configuration:

module.exports = {
  title: 'My Documentation',
  description: 'A VuePress site',
  themeConfig: {
    nav: [{ text: 'Home', link: '/' }]
  }
}

Docusaurus configuration:

module.exports = {
  title: 'My Documentation',
  tagline: 'A Docusaurus site',
  themeConfig: {
    navbar: {
      items: [{ to: '/', label: 'Home', position: 'left' }]
    }
  }
}

Both VuePress and Docusaurus are popular static site generators for creating documentation websites. VuePress excels in simplicity and Vue.js integration, making it ideal for Vue developers and smaller projects. Docusaurus offers more features out-of-the-box and a larger plugin ecosystem, suitable for complex documentation needs. The choice between them often depends on the project requirements and team expertise.

48,920

:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

Pros of Jekyll

  • Mature and well-established static site generator with a large community
  • Extensive plugin ecosystem for added functionality
  • Native support for GitHub Pages, making deployment straightforward

Cons of Jekyll

  • Requires Ruby knowledge for advanced customization
  • Slower build times for large sites compared to modern alternatives
  • Less out-of-the-box features for documentation-specific websites

Code Comparison

Jekyll configuration (_config.yml):

title: My Jekyll Site
description: A static site generator
baseurl: ""
url: "https://example.com"
theme: minima

Docusaurus configuration (docusaurus.config.js):

module.exports = {
  title: 'My Docusaurus Site',
  tagline: 'A documentation website',
  url: 'https://example.com',
  baseUrl: '/',
  themes: ['@docusaurus/theme-classic'],
};

Both Jekyll and Docusaurus are popular static site generators, but they cater to different needs. Jekyll is a more general-purpose tool with a broader application range, while Docusaurus is specifically designed for creating documentation websites with modern features like versioning and internationalization out of the box. The choice between them depends on the project requirements and the development team's expertise.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Docusaurus

Docusaurus

Twitter Follow npm version GitHub Actions status PRs Welcome Discord Chat code style: prettier Tested with Jest Covered by Argos Gitpod Ready-to-Code Netlify Status Deploy with Vercel Deploy to Netlify

Introduction

Docusaurus is a project for building, deploying, and maintaining open source project websites easily.

Short on time? Check out our 5-minute tutorial ⏱️!

Tip: use docusaurus.new to test Docusaurus immediately in a playground.

  • Simple to Start

Docusaurus is built in a way so that it can get running in as little time as possible. We've built Docusaurus to handle the website build process so you can focus on your project.

  • Localizable

Docusaurus ships with localization support via CrowdIn. Empower and grow your international community by translating your documentation.

  • Customizable

While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a blog, and additional support pages, it is also customizable as well to ensure you have a site that is uniquely yours.

Installation

Use the initialization CLI to create your site:

npm init docusaurus@latest

Read the docs for any further information.

Contributing

We've released Docusaurus because it helps us better scale and supports the many OSS projects at Facebook. We hope that other organizations can benefit from the project. We are thankful for any contributions from the community.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Docusaurus.

Beginner-friendly bugs

To help you get your feet wet and get you familiar with our contribution process, we have a list of beginner-friendly bugs that might contain smaller issues to tackle first. This is a great place to get started.

Contact

We have a few channels for contact:

  • Discord:
    • #general for those using Docusaurus.
    • #contributors for those wanting to contribute to the Docusaurus core.
  • @docusaurus X (Twitter)
  • GitHub Issues

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 Become a backer

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor

License

Docusaurus is MIT licensed.

The Docusaurus documentation (e.g., .md files in the /docs folder) is Creative Commons licensed.

Special thanks

BrowserStack logo

BrowserStack supports us with free access for open source.

Rocket Validator logo

Rocket Validator helps us find HTML markup or accessibility issues.

NPM DownloadsLast 30 Days