How to install Docusaurus? A step by step guide for beginners

by SWHabitation
Nov 14, 2023

Docusaurus is an easy-to-use, static site generator [ssg] that simplifies the process of building a documentation website or blog. It is developed by Facebook and open source. Docusaurus helps developers, content creators, and project maintainers create beautiful, responsive websites with ease. Docusaurus takes advantage of Markdown’s ease of use to create content using a syntax that’s familiar to users of all levels of expertise. It can let you quickly deploy a stunning documentation site.


Docusaurus depends on node.js version 18.0 or higher. To check the version, run node -v on the terminal. nvm can also be used to manage several versions of nodes on the same machine.

It is always a good idea to check all dependencies checkboxes while installing Node.js.

The Docusaurus scaffold command line tool is the simplest method to start. This tool may help you construct a Docusaurus skeleton website. The command may be used anywhere in the new empty repository or within an existing repository to create a new directory containing the scaffolded files.

npx create-docusaurus@latest my-website classic
Copy Text

What is classic now?

Docusaurus strongly suggests the classic template because it has all the features of Docusaurus 1 in it. The classic template includes the following: Docusaurus/Preset-Classic with included standard documentation, A blog, Custom pages, and CSS Framework (With Dark Mode Support). You can get started with the classic template in no time and you can change things later as you get more comfortable with Docusaurus.

The docusaurus template also supports the TypeScript variant. For more information, see TypeScript support. To use the TypeScript variant of the template, you can pass the --typscript flag.

npx create-docusaurus@latest my-website classic --typescript
Copy Text

Project Structure

If you use the standard template and name your site "my-website", you'll see these files created under a new folder named "mywebsite/"

Project Structure Breakdown:

  • blogs: This directory contains the Blog Markdown files. The directory can be deleted if you have disabled the Blog Plugin, or you can rename the directory after setting the path parameter.
  • docs: This directory contains the docs.Markdown files. You can change the order of the docs sidebar in sidebar.js. If you have disabled the docs plugin, you can remove the directory. You can also change the name of the directory by setting the path parameter.
  • src: Non-document files, such as pages or React custom components, are non-document files. You don’t have to include them here explicitly, but having them under one central directory makes it easy to find them if you need to lint/process them.
  • src/pages: Any JavaScript file in this directory will be converted to a webpage. This holds for JSX, TSX, and MDX files.
  • static: This is a static directory. All content in this directory will be copied to the root of your final build directory.
  • docusaurus.config.js: A config file is a file that contains the site's configuration. This file is the same as the site config file in the Docusaurus version v1.
  • package.json: A Docusaurus site is a React application. You can use any npm package on your Docusaurus site.
  • sidebars.js: It is used by the documentation to determine the order of the documents in the sidebar.

You can also use a local development server to serve your website and show your changes as you modify the files.

cd my-website
Copy Text
npm run start
Copy Text

If you prefer to use yarn or pnpm then run the below commands,

cd my-website
Copy Text
yarn run start
Copy Text


cd my-website
Copy Text
pnpm run start
Copy Text

After running the above command, a browser window will be opened by default at http://localhost:3000

Since Docusaurus is an up-to-date static website builder, we need to convert the website into a static content directory and upload it to a web server for viewing. To create a static website:

npm run build
Copy Text


yarn build
Copy Text


pnpm run build
Copy Text

Content will be created in the /build directory. The content can be copied to static file hosting services such as GitHub Pages Vercel Netlify More information can be found in the documentation on deployment.

How to install hexo? A step by step guide for beginners

Read more


Bravo🎉 You’ve successfully launched Docusaurus and started your first documentation or blog site. This is just the start of what’s to come with Docusaurus. Prepare yourself for a robust and flexible framework that gives you the power to build and improve your online presence.

Founder & CEO
Preview PDF