Skip to content

Creating your site

After you've installed MaterialX, navigate to the target directory where you want your project to be located in the terminal and execute the following command:

Tip

MaterialX supports both MkDocs and ProperDocs (I recommend ProperDocs).

mkdocs new .

properdocs new .

This will create the following structure:

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

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

Configuration

Minimal configuration

Simply set the site_name and add the following lines to mkdocs.yml / properdocs.yml to enable the theme:

site_name: My site
site_url: https://mydomain.org/mysite
theme:
  name: materialx

The site_url setting is important for a number of reasons. By default, MkDocs will assume that your site is hosted at the root of your domain. This is not the case, for example, when [publishing to GitHub pages] - unless you use a custom domain. Another reason is that some of the plugins require the site_url to be set, so you should always do this.

Recommended: configuration validation and auto-complete

In order to minimize friction and maximize productivity, MaterialX 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://jaywhj.github.io/mkdocs-materialx/schema.json": "mkdocs.yml"
  },
  "yaml.customTags": [ // (1)!
    "!ENV scalar",
    "!ENV sequence",
    "!relative scalar",
    "tag:yaml.org,2002:python/name:material.extensions.emoji.to_svg",
    "tag:yaml.org,2002:python/name:material.extensions.emoji.twemoji",
    "tag:yaml.org,2002:python/name:pymdownx.superfences.fence_code_format",
    "tag:yaml.org,2002:python/object/apply:pymdownx.slugs.slugify mapping"
  ]
}
    1. This setting is necessary if you plan to use icons and emojis, or Visual Studio Code will show errors on certain lines.
  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://jaywhj.github.io/mkdocs-materialx/schema.json

Advanced configuration

MaterialX 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 MaterialX for MkDocs, delivering an unprecedented low-effort technical writing experience.

Configuration Template

If you find it tedious to configure them one by one, you can use the configuration template that this site uses itself to lower the barrier to entry.

Download the template mkdocs.yml, replace the personalized parts in the template with your own, and leave all other options unchanged.

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 --livereload # (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 --livereload --dirtyreload

properdocs serve

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

properdocs 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.

If you intend to distribute your documentation as a set of files to be read from a local filesystem rather than a web server (such as in a .zip file), please read the notes about built-in offline plugin.

  1. If you're a MkDocs plugin or Markdown extension author and your project works with MaterialX 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. ↩