DEV Community

Cover image for How to use the multi-blog plugin for Docusaurus

Posted on

How to use the multi-blog plugin for Docusaurus



Why I wrote this

Recently, I helped someone who had trouble installing the multi-blog plugin for Docusaurus. The instructions on their website 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.


What's Docusaurus?

Docusaurus is a Jamstack SSG (Static Site Generator) mainly intended for documentation and blog websites. It is a Meta Open Source project. Its configuration is done mainly through a JavaScript file called docusaurus.config.js.






Step 1. Create a Docusaurus project.

First, if you don't already have a Docusaurus project created, create one now using the npx command as shown below in your CLI:

npx create-docusaurus@latest twoblogs classic
Enter fullscreen mode Exit fullscreen mode

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/.


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:

code twoblogs
Enter fullscreen mode Exit fullscreen mode

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

Screenshot from VS Code Explorer panel of the newly created Docusaurus project directory structure


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 Write the text # Hello World in

Screenshot of VS Code with file containing the text "# Hello World"


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

Open the file docusaurus.config.js. You must 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

Above it, add the following code:

  plugins: [
        id: 'blog2',
        routeBasePath: 'blog2',
        path: './blog2',
Enter fullscreen mode Exit fullscreen mode

The file should now look like this:

Screenshot of docusaurus.config.js showing the plugins object added above the themeConfig object


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 the keyboard shortcut Ctrl+j for Windows, or Cmd+j for macOS.)

Enter the following command in your CLI shell:

npm run start
Enter fullscreen mode Exit fullscreen mode

Expected output:

Screenshot of terminal output from running "npm run start"

You can ignore the yellow warning about git. For a production site, you would want to add a git repository, but for the purposes of this quick tutorial, it is not necessary. Your only concern 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 page displayed:

Screenshot of browser open to blog2 of classic Docusaurus site

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


Next steps

Top comments (0)