Docusaurus : Focus on your documentation content not building the site.

Start writing your SEO friendly docs right now in MDX.

Dinosaurs running
Photo by Maksim ŠiŠlo / Unsplash

Docusaurus is a framework optimized for building documentations with ease. It utilizes static site generation by building a react SPA (Single Page Application).

The main advantage of SPA's is that they are easily cacheable by CDN's. They also offer low maintenance cost compared to pre-rendered pages.

Docusaurus makes writing documentation easy by utilizing MDX to write the documentation pages. This also enables one to share code in live editors.

Docusaurus utilizes the full power of react. It is part of Meta Open Source who's main mission is to empowering diverse communities through open source technology.

Getting Started

Docusaurus requires Node.js version 16.x or above. You can check your node version by running node -v .

To create a docusarous project use npx like below.

npx create-docusaurus@latest my-website classic

To create a project with typescript.

npx create-docusaurus@latest my-website classic --typescript
NB: Docusaurus reccommends using the classic template.

Docusaurus Project Structure

The structure is fairly simple the docusaurus team have taken their time studying other static sites generators giving you best the best from variety of static sites generators.

├── blog
│   ├──
│   ├──
│   └──
├── docs
│   ├──
│   ├──
│   ├──
│   └──
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── sidebars.js
└── yarn.lock
  • /blog/ - This folder hold the blog markdown files. You can delete the folder after disabling blog plugin. Learn more.
  • /doc/ - This folder hold the documentation markdown files . You can customize the order of the docs sidebar in sidebars.js. You can delete the folder after disabling documentation plugin. Learn more.
  • /src/ - This is where you place all your non-documentation files or react components.
  • /static/ - This is where you place static files. The files are copied to root after building the project.
  • /docusaurus.config.js/ - This is the sites configuration file. Learn more.
  • /package.json/ - This is node.js package manager file.
  • /sidebar.js/ - Used to define the order and structure of the sidebar.

See explanation here

Running development server

To run development server run:


yarn run start


npm run start

Building Project

To build docusaurus run:


yarn run build


npm run build

This generates files in /build directory which can then be hosted in static services such as Firebase, GitHub pages, Vercel or Netlify

Subscribe to Bluedoa Digest

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.