Skip to content

Docusaurus#

What Is The Docusaurus?#

  • Docusaurus is a static-site generator. It builds a single-page application with fast client-side navigation, leveraging the full power of React to make your site interactive. It provides out-of-the-box documentation features but can be used to create any kind of site (personal website, product, blog, marketing landing pages, etc).

  • More information

  • The interesting thing about Docusaurus is that it will convert markdown files into html pages by using html templates, so with this feature, we just need to focus on writing contents in markdown files, the Docusaurus will do all the rest for us.

Installation#

NodeJs#

  • Firstly, you need to install the Node.js on your computer. The version of Node.js should be 16.14 or above (which can be checked by running node -v). You can use nvm for managing multiple Node versions on a single machine installed.
  • If you don't know how to install Node.js on your computer please view this page

Create Sample Docusaurus Project#

  • Now, let's use the command below to create a sample Docusaurus project. This sample Docusaurus project will have name my-blog.
1
npx create-docusaurus@latest my-blog classic

  • The classic template contains @docusaurus/preset-classic which includes standard documentation, a blog, custom pages, and a CSS framework (with dark mode support). You can get up and running extremely quickly with the classic template and customize things later on when you have gained more familiarity with Docusaurus.

  • After execute the command above successfully, you will see the log results with some guides as below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
[SUCCESS] Created my-blog.
[INFO] Inside that directory, you can run several commands:

  `npm start`
    Starts the development server.

  `npm run build`
    Bundles your website into static files for production.

  `npm run serve`
    Serves the built website locally.

  `npm deploy`
    Publishes the website to GitHub pages.

We recommend that you begin by typing:

  `cd my-blog`
  `npm start`

Happy building awesome websites!

Test Sample Docusaurus Project#

  • After the creating step above you will see the Docusaurus Project with the structure as below.

#zoom

my-blog
├── 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
  • Now let's use the command npm start to start your Docusaurus Project and you will see your Docusaurus Project will run at port http://localhost:3000/ as below.

#zoom

See Also#

References#