How to set docs as homepage for Docusaurus

If you'd prefer to show the Docusaurus docs section as a homepage instead of the regular landing page, you can use the snippet below.

There are several ways to do this. From a simply server redirect, to the a hacky JavaScript redirect to the much desired official approach down below.

Official solution: configure the docs plugin

Follow these 3 steps:

1. Set a document with a slug /

Create the markdown file you want as homepage inside /docs/ and set the slug to /

---
id: my-home-doc
slug: /
---

My home doc content....

2. Set the docs plugin to /

In your docusaurus.config.js add routeBasePath: '/'

presets: [
  [
    '@docusaurus/preset-classic',
    {
      docs: {
        routeBasePath: '/',Code language: JavaScript (javascript)

3. Delete the single.js file

Find the following file and delete it:

./src/pages/index.js

Check out the documentation for Docs-only mode.

Hack: use a redirect

The initial version of this post I pointed out that you could replace the file contents of src/pages/index.js with this:

import React from 'react';
import  { Redirect } from 'react-router-dom';

export default function Home() {
  return <Redirect to='/docs/intro' />;
}Code language: JavaScript (javascript)

While this works it's an unnecessary redirect given the out of the box solution described above.

This was tested on Docusaurus 2.0.0

Comments

  1. Sebastien Lorber, one of the maintainers replied my tweet with:

    Use in priority:
    – Hosting intro doc at /
    – Server redirect from / to /docs
    – Lightweight client redirect in static/index.html: we have a client-side redirect plugin)
    – Heavy redirect using : avoid, requires loading JS/React before redirecting

    https://twitter.com/sebastienlorber/status/1418288181921865732

Leave a Reply

Your email address will not be published. Required fields are marked *