How to use the multi-blog plugin for Docusaurus
Tags: docusaurus, plugin, tutorial, blog
Published: 2024-02-20 22:01:16

---
title: How to use the multi-blog plugin for Docusaurus
published: true
description: How to set up Docusaurus for multiple blogs using the multi-blog plugin
tags: docusaurus, plugin, tutorial, blog
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21is8ij3ir73dtixqzxt.png
# published_at: 2024-02-09 10:53 +0000
---

## Contents
<!-- TOC start (generated with https://github.com/derlin/bitdowntoc) -->

- [Why I wrote this](#why-i-wrote-this)
- [What's Docusaurus?](#whats-docusaurus)
- [Requirements](#requirements)
- [Instructions](#instructions)
   * [Step 1. Create a Docusaurus project.](#step-1-create-a-docusaurus-project)
   * [Step 2. Open the project in a code editor](#step-2-open-the-project-in-a-code-editor)
   * [Step 3. Add the second blog's folder and file](#step-3-add-the-second-blogs-folder-and-file)
   * [Step 4. Add the multi-blog plugin to docusaurus.config.js](#step-4-add-the-multi-blog-plugin-to-docusaurusconfigjs)
   * [Step 5. Run the dev server and view your site](#step-5-run-the-dev-server-and-view-your-site)
   * [Next steps](#next-steps)

<!-- TOC end -->
&nbsp;

## Why I wrote this

Recently, I helped someone who had trouble installing the multi-blog plugin for Docusaurus. The [instructions on their website](https://docusaurus.io/docs/blog#multiple-blogs) are not clear for non-technical users, and she kept getting a 404 Not Found when trying to access the second blog. This post expands on their instructions with more details and screenshots for less technical users.

&nbsp;

## What's Docusaurus?
Docusaurus is a [Jamstack](https://jamstack.org/) SSG (Static Site Generator) mainly intended for documentation and blog websites. It is a [Meta Open Source](https://opensource.fb.com/) project. It is configured with a JavaScript file called `docusaurus.config.js`. 

&nbsp;

## Requirements
- Node.js 18 or above installed
  - [Instructions for installing Node.js using a version manager](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm)
- Some familiarity with a CLI (Command Line Interface)
- An IDE or code editor
  - I recommend [Visual Studio Code](https://code.visualstudio.com/)

&nbsp;

## Instructions

&nbsp;

### Step 1: Create a Docusaurus project
If you don't already have a Docusaurus project, create one now using the `npx` CLI command:

```shell
npx create-docusaurus@latest twoblogs classic
```

`npx` is a CLI tool bundled with Node.js that lets you access code packages hosted by the organization called NPM (Node Package Manager). In this case, `npx` accesses and runs the `create-docusaurus` package with the `classic` template. If the command succeeds, it creates a folder on your computer named `twoblogs/`.

&nbsp;

### Step 2: Open the project in a code editor

Open the newly created project folder in your code editor. If you use VS Code, the following command (run from the same location where you ran the previous command) will open the `twoblogs/` folder in VS Code:

```shell
code twoblogs
```

In VS Code, the newly created project's structure looks like this:

![Screenshot from VS Code Explorer panel of the newly created Docusaurus project folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4lgso0dcv5d5znn3fsu.png)

&nbsp;

### Step 3: Add the second blog's folder and file

In the `twoblogs/` folder, create a new folder named `blog2/`. In it, create a new file named `index.md`. Write the text `# Hello World` in `index.md`:

![Screenshot of VS Code with file index.md containing the text "# Hello World"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idjgjkh1yy3c4kv7eoqp.png)

&nbsp;

### Step 4: Add the multi-blog plugin to docusaurus.config.js

Open the file `docusaurus.config.js`. The next step is to add a `plugins` object as a property of the `config` object defined in this file.

Scroll down until you see the `themeConfig` object:

![Screenshot of docusaurus.config.js showing the themeConfig object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u12e67jv4b11tixt609z.png)

Above it, add the following code:
```js
  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        id: 'blog2',
        routeBasePath: 'blog2',
        path: './blog2',
      },
    ],
  ],
```

The file should now look like this:

![Screenshot of docusaurus.config.js showing the plugins object added above the themeConfig object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83z6iojuhvaf44r1d96p.png)

&nbsp;

### Step 5: Run the dev server and view your site

Open a CLI shell to the `twoblogs/` folder. In VS Code, you can do this by going to the **Terminal** menu across the top and choosing **New Terminal**. (Or use a keyboard shortcut: `Ctrl`+`j` for Windows, or `Cmd`+`j` for macOS.)

Enter the following command in your CLI shell:
```shell
npm run start
```
Expected output:

![Screenshot of terminal output from running "npm run start"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjpzfrp2bma37twkgusu.png)

Ignore the yellow warning about git. For a production site, you would want to add a git repository as the warning indicates, but it is not necessary for this quick tutorial. Your only concern for now is to make sure you see the final line that says **"compiled successfully"**.

Your default browser should open automatically to `http://localhost:3000/`. Add `blog2` to the end of the URL and you should see your second blog's `index.md` page displayed:

![Screenshot of browser open to blog2 index.md of classic Docusaurus site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nbadpcgipa3j5ayx46p.png)

That's it! If you can see your Hello World message, your multi-blog plugin is working. 

&nbsp;

### What's next?

- Learn how to [deploy your site](https://docusaurus.io/docs/deployment#choosing-a-hosting-provider)
- Learn more about [Docusaurus](https://docusaurus.io/docs)
- Learn more about [Docusaurus blogs](https://docusaurus.io/docs/blog)
- Join the [Docusaurus community on Discord](https://discord.com/invite/docusaurus)