Top Related Projects
The React Framework
The best React-based framework with performance, scalability and security built in.
The world’s fastest framework for building websites.
A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
📝 Minimalistic Vue-powered static site generator
: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
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.
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.
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.
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.
📝 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.
: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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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 supports us with free access for open source.
Rocket Validator helps us find HTML markup or accessibility issues.
Top Related Projects
The React Framework
The best React-based framework with performance, scalability and security built in.
The world’s fastest framework for building websites.
A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
📝 Minimalistic Vue-powered static site generator
:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot