Material for MkDocs Setup
Material for MkDocs is the most complete theme for MkDocs with versioning (Mike), analytics, Social Cards, Tags, and advanced navigation.
Installation and Basic Configuration
pip install mkdocs-material
# Additional plugins
pip install mkdocs-git-revision-date-localized mkdocs-minify-plugin mike pillow cairosvg
Advanced mkdocs.yml
theme:
name: material
custom_dir: overrides # for template overrides
logo: assets/logo.svg
favicon: assets/favicon.png
font:
text: Inter
code: JetBrains Mono
features:
- announce.dismiss
- content.action.edit
- content.action.view
- navigation.footer
- navigation.indexes
- navigation.path # breadcrumbs
- navigation.prune
- navigation.sections
- navigation.tabs
- navigation.tabs.sticky
- navigation.top
- navigation.tracking
- search.highlight
- search.share
- search.suggest
- toc.follow
extra:
version:
provider: mike # versioning
social:
- icon: fontawesome/brands/github
link: https://github.com/my-org/my-project
analytics:
provider: google
property: G-XXXXXXXXXX
feedback:
title: Was this page helpful?
ratings:
- icon: material/thumb-up-outline
name: Yes, helpful
data: 1
note: Thanks!
- icon: material/thumb-down-outline
name: No, needs improvement
data: 0
note: Let us know!
Social Cards
plugins:
- social:
cards_layout_options:
background_color: "#1e293b"
color: "#ffffff"
font_family: Inter
Versioning via Mike
pip install mike
# Deploy version
mike deploy --push --update-aliases 2.0 latest
mike set-default --push latest
# List versions
mike list
Customization via Overrides
<!-- overrides/main.html -->
{% extends "base.html" %}
{% block announce %}
<div class="md-banner">
🎉 Version 2.0 released! <a href="/changelog">What's new</a>
</div>
{% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ 'assets/custom.css' | url }}">
{% endblock %}
Tags Plugin
plugins:
- tags:
tags_file: tags.md # page with all tags
# In Markdown:
---
tags:
- API
- Authentication
- Python
---
Complete Material for MkDocs setup — 4–8 hours.