Setup a Blogging Website with Docusaurus 2

This is a guide for setting up a blogging website using Docusaurus 2.

Here is the final result:

Docusaurus 2 is an open-source tool that acts as static site generator to create websites (like Gatsby). The first version of Docusaurus was mostly limited to documentation websites.

However, with Docusaurus 2, the developers expanded the original tooling to create any kind of website.

For this guide, we will only be focusing on the BLOG feature of Docusaurus 2.

The final file structure will look something like this:

blog-website
└── blog
├── 2019-09-17-welcome.md
└── 2020-10-06-new-post.md
// ...

Posts are generated from simple markdown (.md) files. Simply adding a new markdown file will create additional posts.

Let's get to it.

Step 1: Set Up Website

The following command will initialize a new Docusaurus 2 website named blog-website. You can change this as you see fit.

npx @docusaurus/init@next init blog-website classic

You can run the website locally with npm start inside the new directory.

cd blog-website &&
npm start

Step 2: Use a Blog as the Default Landing Page

Let's use a blog as our default landing page.

First, change some code in the presets section in docusaurus.config.js.

docusaurus.config.js:

// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
showReadingTime: false,
routeBasePath: '/',
path: './blog',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
// ...

This will set your homepage to default to the blog.

However, there is a problem. The file at ./src/pages/index.js also maps to the same page.

So let's make sure to remove it.

rm ./src/pages/index.js

Now, your homepage should default to a boilerplate blog.