Skip to main content
Version: current

Home page configuration

You can customize your site's home page using an index.md file located in the docs folder. If you used the create-new-project command, this file should have been automatically created for you. Otherwise you should be able to create it using this guide.

Front matter metadata fields​

The beginning of your index.md file should look like this:

---
slug: /
displayed_sidebar: defaultSidebar
title: Home
hide_table_of_contents: true
hide_title: true
---

This is a collection of front matter metadata fields that make sure the home page looks good and is served at the correct route. Feel free to change the title field, but the remaining fields should be left alone.

H2OHome component​

Next you want to import and render the H2OHome React component. It should look something like this:

import H2OHome from '@site/src/components/H2OHome';

<H2OHome 
 title="Cool app"
 description="Documentation for cool app"
 sections={[
  {
    subsections: [
      {
        title: "Guides",
        icon: "rocket_launch",
        subtitle: "Cool app fundamentals",
        items: [
          {
            label: "Getting started",
            to: "/guides/installation",
          },
        ],
      },
    ],
  },
]} />

You can add as many sections, subsections and items as needed. Note that items have either a to or href property. Use the to property for internal links and the href property for external links.

Home page banner image​

To overwrite the default home page banner image, save your image as app_banner.png and copy it to the root of your Makersaurus project. Restart the development server and the new image should appear. The resolution of the default image is 600 by 282 pixels, supplying a custom image of significantly greater size will increase home page load times.

Other content​

Other content can be added below the <H2OHome> component using Markdown syntax. However, be mindful that we want to keep the various H2O documentation sites looking as similar as possible.

Feedback