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

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.

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── 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:

yarn run start

NPM

npm run start

Building Project

To build docusaurus run:

Yarn:

yarn run build

NPM

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