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

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.

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.

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.

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

or

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:

or

or

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.