dedede
dedede

Reputation: 347

How to set "Docs" as the main page

I am using the theme template and I am trying to change the main page of my website.

That is, how do I remove the index page and replace it with the "Docs" page as the main page on my website?

Upvotes: 4

Views: 6264

Answers (3)

Zach Bloomquist
Zach Bloomquist

Reputation: 5881

The other answers here work great if you'd like to make a specific page live at /. But if you want to have / redirect to a specific page so you can use a different path as your canonical home page, you can use a redirect. Put something like this in src/pages/index.jsx (or .tsx):

import React from 'react'
import { Redirect } from '@docusaurus/router'

export default function HomeRedirect() {
  return <Redirect to="/guides" />;
};

You may also want to set up a server-side redirect from /, since this is only a client-side redirect. Specifics will depend on your hosting provider.

Upvotes: 1

GPP
GPP

Reputation: 2335

As @Bart pointed out in their reply to the original Answer, successive versions of Docusaurus do not support the original approach.

I have found for 3.x.x the solution is to:

  1. Remove the /src/pages/index.js file
  2. Add the following to docusaurus.config.js file:
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          routeBasePath: '/', // Set this value to '/'.
          // ...
        },
      },
    ],
  ],
  // ...
};
  1. Add a slug: / (no ' or " characters needed) property to the "frontmatter" of the *.md file that you wish to be the new 'home page' for your Docusaurus documentation

You can read my "source" for this answer here: (scroll down to the Warning callout near the bottom of this "anchor" section) https://docusaurus.io/docs/next/docs-introduction#docs-only-mode

Upvotes: 6

Yangshun Tay
Yangshun Tay

Reputation: 53199

  1. Delete src/pages/index.js
  2. Add the following to docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          routeBasePath: '/', // Set this value to '/'.
          homePageId: 'getting-started', // Set to existing document id.
          // ...
        },
      },
    ],
  ],
  // ...
};

Follow the instructions here

Upvotes: 5

Related Questions