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.
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.
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
│ └── img
/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
To build docusaurus run:
yarn run build
npm run build