If you’re looking to create a stunning documentation website or a blog, Docusaurus is the perfect tool for you. It is a powerful static site generator specifically designed for building, deploying, and maintaining open-source projects. In this guide, we will walk you through the process of getting started with Docusaurus and show you how to set up your first website.

By the end of this guide, you’ll have a clear understanding of the Docusaurus workflow and be ready to create your own amazing website. So, let’s get started!

Installation

Before we dive into the installation process, make sure you have the latest version of Node.js and Yarn installed on your system. With these prerequisites in place, you’re ready to install Docusaurus.

To install Docusaurus, you have a few options:

1. Using npx (recommended):

   npx docusaurus-init

2. Using Yarn:

   yarn global add docusaurus-init

3. Using npm:

   npm install --global docusaurus-init

After the installation is complete, you’ll have access to the Docusaurus CLI commands and can begin creating your website.

Project Structure

Once Docusaurus is installed, it’s important to understand the structure of your Docusaurus project. By default, Docusaurus scaffolds a classic template that provides the following features:

• Standard documentation
• Blog functionality
• Custom pages
• A CSS framework with dark mode support

Docusaurus also offers a TypeScript variant of the classic template and a Facebook template, which comes with useful Facebook-specific defaults.

If you’re using a monorepo, you can place your Docusaurus project under the docs directory. This will help keep your project organized and make it easier to build and deploy your website.

Running the Development Server

To preview your changes and see your Docusaurus website in action, you’ll need to run the development server. To do this, navigate to your project directory and run the following command:

yarn start

or

npm start

This command will start the server and you can access your website by opening http://localhost:3000 in your web browser. Keep in mind that some functionality, like anchor links, may not work in the development server but will work correctly in the production build.

If you’re behind a corporate proxy, you might need to disable it for the development server requests. You can do this by setting the NO_PROXY environment variable.

Building Your Website

Once you’re satisfied with the changes you’ve made to your website, it’s time to build it into static content that can be easily deployed. To do this, use the following command:

yarn build

or

npm run build

This command will compile your website for production and generate static assets in the build directory. You can then take these assets and deploy them to your web server or hosting provider of choice.

Updating Docusaurus

It’s important to keep your Docusaurus installation up to date to ensure you have access to the latest features and bug fixes. To check the current version of Docusaurus in your project, run the following command:

yarn outdated docusaurus

or

npm outdated docusaurus

If a newer version is available, you can update to it using the following command:

yarn upgrade docusaurus

or

npm update docusaurus

Key Takeaways

• Docusaurus is a powerful static site generator specifically designed for building documentation websites and blogs.
• The installation process for Docusaurus is straightforward and can be done using npx or the Yarn or npm package managers.
• The development server allows you to preview your Docusaurus website and make changes before deploying it.
• Building your website generates static assets that can be easily deployed to a web server or hosting provider.
• Keeping Docusaurus up to date ensures you have access to the latest features and bug fixes.
• If you run into any issues or have questions, there are several resources available to help you, including the official documentation, GitHub repository, and Discord community.

Congratulations! You’ve now learned how to get started with Docusaurus and create your own stunning documentation website or blog. Harness the power of Docusaurus and let your creativity shine!