Skip to content

Custom landing page

A very simple example on how you can setup your own Mkdocs Material Hero landing page.

Alternative home page

For this to work we'll need to the following directory structure:

├── .overrides
│   └── home.html
├── docs
│   └──
└── mkdocs.yml


You can leave this stock, but for this to work properly the navigation.instant feature needs to be disabled.


This file needs to have the following content:

title: Home
template: home.html
    - navigation
    - toc

End with empty line

An empty line on the end of the file is required for this to work!


This is our referenced home.html override that contains the custom html and styling, like so:

{% extends "base.html" %}

{% block styles %}
{{ super() }}
  /** Custom CSS goes here **/
{% endblock %}

{% block content %}
<!-- You can have custom HTML content here -->
{% endblock %}