Skip to content

Creating your site

After you've installed Material for MkDocs, you can bootstrap your project documentation using the mkdocs executable. Go to the directory where you want your project to be located and enter:

mkdocs new .

Alternatively, if you're running Material for MkDocs from within Docker, use:

docker run --rm -it -v ${PWD}:/docs squidfunk/mkdocs-material new .
docker run --rm -it -v "%cd%":/docs squidfunk/mkdocs-material new .

This will create the following structure:

.
├─ docs/
│  └─ index.md
└─ mkdocs.yml

Configuration

Minimal configuration

Simply add the following lines to mkdocs.yml to enable the theme. Note that since there are several installation methods, minimal configuration might be slightly different:

theme:
  name: material
theme:
  name: material
theme:
  name: null
  custom_dir: mkdocs-material/material

  # 404 page
  static_templates:
    - 404.html

  # Necessary for search to work properly
  include_search_page: false
  search_index_only: true

  # Default values, taken from mkdocs_theme.yml
  language: en
  font:
    text: Roboto
    code: Roboto Mono
  favicon: assets/favicon.png
  icon:
    logo: logo

When you clone from GitHub, you must list all of the themes' defaults explicitly, because mkdocs_theme.yml is not loaded automatically as described in the custom theme guide.

Recommended: configuration validation and auto-complete

In order to minimize friction and maximize productivity, Material for MkDocs provides its own schema.json1 for mkdocs.yml. If your editor supports YAML schema validation, it's definitely recommended to set it up:

  1. Install vscode-yaml for YAML language support.
  2. Add the schema under the yaml.schemas key in your user or workspace settings.json:

    {
      "yaml.schemas": {
        "https://squidfunk.github.io/mkdocs-material/schema.json": "mkdocs.yml"
      }
    }
    
  1. Ensure your editor of choice has support for YAML schema validation.
  2. Add the following lines at the top of mkdocs.yml:

    # yaml-language-server: $schema=https://squidfunk.github.io/mkdocs-material/schema.json
    

Advanced configuration

Material for MkDocs comes with many configuration options. The setup section explains in great detail how to configure and customize colors, fonts, icons and much more:

Furthermore, see the list of supported Markdown extensions that are natively integrated with Material for MkDocs, delivering a low-effort and unprecedented technical writing experience.

Previewing as you write

MkDocs includes a live preview server, so you can preview your changes as you write your documentation. The server will automatically rebuild the site upon saving. Start it with:

mkdocs serve # (1)!
  1. If you have a large documentation project, it might take minutes until MkDocs has rebuilt all pages for you to preview. If you're only interested in the current page, the --dirtyreload flag will make rebuilds much faster:

    mkdocs serve --dirtyreload
    

If you're running Material for MkDocs from within Docker, use:

docker run --rm -it -p 8000:8000 -v ${PWD}:/docs squidfunk/mkdocs-material
docker run --rm -it -p 8000:8000 -v "%cd%":/docs squidfunk/mkdocs-material

Point your browser to localhost:8000 and you should see:

Creating your site

Building your site

When you're finished editing, you can build a static site from your Markdown files with:

mkdocs build

If you're running Material for MkDocs from within Docker, use:

docker run --rm -it -v ${PWD}:/docs squidfunk/mkdocs-material build
docker run --rm -it -v "%cd%":/docs squidfunk/mkdocs-material build

The contents of this directory make up your project documentation. There's no need for operating a database or server, as it is completely self-contained. The site can be hosted on GitHub Pages, GitLab Pages, a CDN of your choice or your private web space.


  1. If you're a MkDocs plugin or Markdown extension author and your project works with Material for MkDocs, you're very much invited to contribute a schema for your extension or plugin as part of a pull request on GitHub. If you already have a schema defined, or wish to self-host your schema to reduce duplication, you can add it via $ref