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
│   └── index.md
└── mkdocs.yml

mkdocs.yml

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

docs/index.md

This file needs to have the following content:

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

End with empty line

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

.overrides/home.html

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

{% extends "base.html" %}

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

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

References: