• January 20, 2024
• in Tutorials, Getting Started
• 3 min read

Getting Started with MkDocs Material: A Complete Guide

Setting up a documentation site can seem daunting, but with MkDocs Material, you can have a professional-looking site up and running in minutes. This comprehensive guide will walk you through everything you need to know.

Prerequisites

Before we begin, make sure you have:

• Python 3.8 or higher installed
• Basic familiarity with Markdown
• A text editor (VS Code, Sublime Text, etc.)
• Git (optional, but recommended)

Installation

Step 1: Create a Virtual Environment

It's best practice to use a virtual environment for Python projects:

# Create virtual environment
python -m venv mkdocs-env

# Activate it
# On Windows:
mkdocs-env\Scripts\activate
# On macOS/Linux:
source mkdocs-env/bin/activate

Step 2: Install MkDocs Material

pip install mkdocs-material

This will install MkDocs and the Material theme along with all dependencies.

Step 3: Create Your Project

mkdocs new my-project
cd my-project

Project Structure

Your new project will have this structure:

my-project/
├── docs/
│   └── index.md
└── mkdocs.yml

• mkdocs.yml - Configuration file
• docs/ - Your documentation source files
• index.md - Your homepage

Basic Configuration

Edit mkdocs.yml to configure your site:

site_name: My Documentation
site_url: https://example.com
repo_url: https://github.com/username/repository
repo_name: username/repository

theme:
  name: material
  palette:
    - scheme: default
      primary: indigo
      accent: indigo
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    - scheme: slate
      primary: indigo
      accent: indigo
      toggle:
        icon: material/brightness-4
        name: Switch to light mode
  features:
    - navigation.instant
    - navigation.tracking
    - navigation.tabs
    - navigation.sections
    - navigation.expand
    - navigation.top
    - search.suggest
    - search.highlight

Creating Your First Page

Replace the content in docs/index.md:

# Welcome to My Documentation

This is the homepage of my documentation site.

## Features

- Easy to write
- Beautiful design
- Mobile responsive
- Dark mode support

## Getting Started

Check out the [installation guide](installation.md) to get started!

Adding More Pages

Create additional pages in the docs/ directory:

docs/installation.md:

# Installation Guide

Follow these steps to install our software...

docs/user-guide.md:

# User Guide

Learn how to use our features...

Organizing Navigation

Update mkdocs.yml to organize your pages:

nav:
  - Home: index.md
  - Getting Started:
    - Installation: installation.md
    - Quick Start: quick-start.md
  - User Guide:
    - Basic Usage: user-guide/basics.md
    - Advanced Features: user-guide/advanced.md
  - API Reference: api-reference.md

Preview Your Site

Run the development server:

mkdocs serve

Visit http://127.0.0.1:8000 to see your site!

Live Reload

The development server includes live reload - any changes you make will automatically refresh in your browser.

Adding Content Features

Code Blocks with Syntax Highlighting

```python
def hello_world():
    print("Hello, MkDocs!")
```

Admonitions

!!! note "Important Note"
    This is a note admonition.

!!! warning
    This is a warning without a custom title.

Tables

| Feature | Description |
|---------|-------------|
| Fast | Lightning quick |
| Beautiful | Great design |
| Simple | Easy to use |

Building for Production

When you're ready to deploy:

mkdocs build

This creates a site/ directory with static HTML files ready for hosting.

Deployment Options

GitHub Pages

Add to .github/workflows/deploy.yml:

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-python@v4
        with:
          python-version: 3.x
      - run: pip install mkdocs-material
      - run: mkdocs gh-deploy --force

Other Platforms

• Netlify: Connect your repository and set build command to mkdocs build
• Vercel: Similar to Netlify
• GitLab Pages: Use .gitlab-ci.yml configuration

Tips for Success

1. Keep it Simple: Start with basic features and add complexity gradually
2. Use Version Control: Track changes with Git
3. Regular Updates: Keep dependencies updated
4. Test Locally: Always preview before deploying
5. Ask for Help: The MkDocs community is friendly and helpful

Next Steps

Now that you have a basic site running, explore:

• Theme Customization
• Plugin Integration
• Advanced Configuration

Conclusion

Congratulations! You've successfully set up your first MkDocs Material documentation site. The possibilities are endless from here. Remember, great documentation is an iterative process - keep improving and refining as you go.

Have questions? Leave a comment below or reach out on our community forum!

---

Happy documenting! 📚