How to add a landing page to a mkdocs doc site using mkdocs-material?

Question

I'm trying to create a landing page similar to how mkdocs-material's doc site (https://squidfunk.github.io/mkdocs-material/) has. I am using mkdocs-material for my docs site.

Answer 1

How?

You will need to use a custom template for a specific page (e.g. home page) and providing the implementation for this template. So for the home page you are looking for this file: .overrides/home.html. You'll want to copy it over to your own overrides directory or take my example as reference. Make sure you've set your custom_dir in mkdocs.yml:

 theme:
   custom_dir: material
 ...

In the front matter of your index.md, you need to specify the template to use:

---
title: Title
template: home.html
---

Important Consideration

You need a newline at the end of your md file. If you don't have one, the content will not display. I guess it's processed as having null content if you don't include the newline.

Ref Links

• https://github.com/squidfunk/mkdocs-material/issues/1996.
• https://github.com/binbashar/le-ref-architecture-doc.

Answer 2

Well you can find the source code / setup of that site in its respository. https://github.com/squidfunk/mkdocs-material This should be a good example.