Docusaurus : Building beautiful documentations

Docusaurus by Facebook, an easy-to-use documentation site generator powered by React and uses Markdown to write docs.

npx @docusaurus/init@latest latest [name] classic

The classic template will generate the following files in the root directory:

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

3. Configuration

Changing the name and tagline of the template is probably the first thing to do when building your documentation website with Docusaurus.

You can configure anything for your needs under docusaurus.config.js

Here's a snippet on things you can customize:

title: 'My Site',

  tagline: 'The tagline of my site',

  url: 'https://your-docusaurus-test-site.com',

  baseUrl: '/',

  onBrokenLinks: 'throw',

  favicon: 'img/favicon.ico',

  organizationName: 'facebook', // Usually your GitHub org/user name.

  projectName: 'docusaurus', // Usually your repo name.

4. NavBar Customization

By default, the navbar displays the site name, link to Docs and link to Blog.

Let's say you want to create an About page and add the link to the page in the navbar. You can create an about.md file in the /pages directory.

All Markdown documents must have an id so in about.md, we can write specify its id and write a sample line :

---

id: about

---

## This is my About page.

Then, in docusaurus.config.js, simply add this page id in the navbar object, items array.

navbar: {

   items: [

     //...

     {to: 'about', label: 'About', position: 'left'}, //add this line

     //...

   ],

}

https://medium.com/swlh/build-beautiful-documentation-websites-with-docusaurus-cc51730ed932