Skip to main content

How to change the Docusaurus 2.0 Home Page / Landing Page to the Docs page

Step 1 - Delete the index.js file in the pages folder​

tip

Any time you delete files you want to ensure that you either have the file you are deleting saved somewhere else or that you have committed the changes to your git repository. This will ensure that you can always get the file back if you need it. It releaves a lot of anxiety when hacking and slashing on your project.

Step 2 - Set the root path in one of your markdown files​

You'll need to add the following to the top of the markdown file you want to be the root path.

---
slug: /
---
note

You will notice that the root path of ( " / " ) replaces ( " /docs/ ") in the URL. This is important to note if you've already added internal links on your site because they will need to be updated or it will cause build errors when you deploy your site.

For example, you'll see this page make the following changes:

  • from: docs/learning-notes/change-docusaurous-home-page-to-docs
  • to: /learning-notes/change-docusaurous-home-page-to-docs

The homepage will look like the following:

  • from: siteURL.com/docs
  • to: siteURL.com/ (But it will be the docs page you set the root path on)

Code Example​

Here is an example from this site:

---
title: Introduction
description: "Introduction to Patrick John Stevens' personal-public knowledge hub"
sidebar_position: 0
authors:
  - name: Patrick John Stevens
  - title: Web Developer learning, creating, publishing, and teaching. I'm here to serve.
  - url: https://github.com/patrickjohnstevens
  - image_url: https://github.com/patrickjohnstevens.png
last_update:
  date: 11/23/2022
  author: Patrick John Stevens
keywords:
  - Personal Knowledge Base
  - Personal Knowledge Hub
  - Public knowledge Hub
  - Personal Knowledge Management
  - Learn Create Publish
  - Personal Knowledge Base Purpose
  - Learn In Public
slug: /
---

Step 3 - Add routeBasePath: "/" to docusaurus.config.js​

Code Example​

See the file on GitHub docusaurus.config.js. The specific code that goes under presets/docs is below.

presets: [
    [
      "classic",
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: "/",
          sidebarPath: require.resolve("./sidebars.js"),
          editUrl:
            "https://github.com/patrickjohnstevens/docublog/tree/main/PJSDocBlog",
          showLastUpdateAuthor: true,
        },
        blog: {
          showReadingTime: true,
          editUrl:
            "https://github.com/patrickjohnstevens/docublog/tree/main/PJSDocBlog",
          postsPerPage: 10,
          truncateMarker: /<!--\s*(truncate)\s*-->/,
        },
      }),
    ],
  ],

Docusaurus Docs | Docs-Only Mode​

For full instructions directly from the source they are here: Docusaurus 2.0 Docs