minimal-mistakes Documentation

Triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.

RAW Doc

File: README.md

[Minimal Mistakes Jekyll theme](https://mmistakes.github.io/minimal-mistakes/)


Minimal Mistakes is a flexible two-column Jekyll theme, perfect for building personal sites, blogs, and portfolios. As the name implies, styling is purposely minimalistic to be enhanced and customized by you :smile:.

:sparkles: See what's new in the CHANGELOG.

Note: The theme uses the jekyll-include-cache plugin which will need to be installed in your Gemfile and must be retained in the plugins array of _config.yml. Otherwise you'll encounter Unknown tag 'include_cached' errors at build.

Minimal Mistakes live preview

Notable features

  • Bundled as a "theme gem" for easier installation/upgrading.
  • Compatible with GitHub Pages.
  • Support for Jekyll's built-in Sass/SCSS preprocessor.
  • Nine different skins (color variations).
  • Several responsive layout options (single, archive index, search, splash, and paginated home page).
  • Optimized for search engines with support for Twitter Cards and Open Graph data.
  • Optional header images, custom sidebars, table of contents, galleries, related posts, breadcrumb links, navigation lists, and more.
  • Commenting support (powered by Disqus, Facebook, Google+, Discourse, static-based via Staticman, utterances, and giscus).
  • Google Analytics support.
  • Swetrix GDPR-compliant analytics support.
  • UI localized text in English (default), Arabic (عربي), Brazilian Portuguese (Português brasileiro), Bulgarian, Catalan, Chinese, Czech, Danish, Dutch, Finnish, French (Français), German (Deutsch), Greek, Hebrew, Hindi (हिंदी), Hungarian, Indonesian, Irish (Gaeilge), Italian (Italiano), Japanese, Kiswahili, Korean, Malayalam, Myanmar (Burmese), Nepali (Nepalese), Norwegian (Norsk), Persian (فارسی), Polish, Punjabi (ਪੰਜਾਬੀ), Romanian, Russian, Slovak, Spanish (Español), Swedish, Thai, Turkish (Türkçe), Ukrainian (Українська) and Vietnamese.

Skins (color variations)

This theme comes in 11 different skins (in addition to the default one).

air contrast dark
dirt mint sunrise
aqua neon plum
catppuccin_latte catppuccin_mocha

Demo pages

Name Description
Post with Header Image A post with a large header image.
HTML Tags and Formatting Post A variety of common markup showing how the theme styles them.
Syntax Highlighting Post Post displaying highlighted code.
Post with a Gallery A post showing several images wrapped in <figure> elements.
Sample Collection Page Single page from a collection.
Categories Archive Posts grouped by category.
Tags Archive Posts grouped by tag.

Additional sample posts are available under posts archive on the demo site. Source files for these (and the entire demo site) can be found in /docs.

Installation

There are three ways to install: as a gem-based theme, as a remote theme (GitHub Pages compatible), or forking/directly copying all of the theme files into your project.

Gem-based method

With Gem-based themes, directories such as the assets, _layouts, _includes, and _sass are stored in the theme’s gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll’s build process.

This allows for easier installation and updating as you don't have to manage any of the theme files. To install:

  1. Add the following to your Gemfile:

    ruby
    gem "minimal-mistakes-jekyll"
  2. Fetch and update bundled gems by running the following Bundler command:

    bash
    bundle
  3. Set the theme in your project's Jekyll _config.yml file:

    yaml
    theme: minimal-mistakes-jekyll

To update the theme run bundle update.

Remote theme method

Remote themes are similar to Gem-based themes, but do not require Gemfile changes or whitelisting making them ideal for sites hosted with GitHub Pages.

To install:

  1. Create/replace the contents of your Gemfile with the following:

    ruby
    source "https://rubygems.org"
    
    gem "github-pages", group: :jekyll_plugins
    gem "jekyll-include-cache", group: :jekyll_plugins
  2. Add jekyll-include-cache to the plugins array of your _config.yml.

  3. Fetch and update bundled gems by running the following Bundler command:

    bash
    bundle
  4. Add remote_theme: "mmistakes/[email protected]" to your _config.yml file. Remove any other theme: or remote_theme: entry.

Looking for an example? Use the Minimal Mistakes remote theme starter for the quickest method of getting a GitHub Pages hosted site up and running. Generate a new repository from the starter, replace sample content with your own, and configure as needed.

Usage

For detailed instructions on how to configure, customize, add/migrate content, and more read the theme's documentation.

Contributing

Found a typo in the documentation or interested in fixing a bug? Then by all means submit an issue or pull request. If this is your first pull request, it may be helpful to read up on the GitHub Flow first.

For help with using the theme or general Jekyll support questions, please use the Jekyll Talk forums.

Pull Requests

When submitting a pull request:

  1. Clone the repo.
  2. Create a branch off of master and give it a meaningful name (e.g. my-awesome-new-feature).
  3. Open a pull request on GitHub and describe the feature or fix.

Theme documentation and demo pages can be found in the /docs if submitting improvements, typo corrections, etc.

Development

To set up your environment to develop this theme, run bundle install.

To test the theme, run bundle exec rake preview and open your browser at http://localhost:4000/test/. This starts a Jekyll server using content in the test/ directory. As modifications are made to the theme and test site, it will regenerate and you should see the changes in the browser after a refresh.

Credits

Creator

Michael Rose

Icons + Demo Images:

Other:

License

The MIT License (MIT)

Copyright (c) 2013-2024 Michael Rose and contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Minimal Mistakes incorporates icons from The Noun Project
creators Garrett Knoll, Arthur Shlain, and tracy tam.
Icons are distributed under Creative Commons Attribution 3.0 United States (CC BY 3.0 US).

Minimal Mistakes incorporates Font Awesome,
Copyright (c) 2017 Dave Gandy.
Font Awesome is distributed under the terms of the SIL OFL 1.1
and MIT License.

Minimal Mistakes incorporates photographs from Unsplash.

Minimal Mistakes incorporates Susy,
Copyright (c) 2017, Miriam Eric Suzanne.
Susy is distributed under the terms of the BSD 3-clause "New" or "Revised" License.

Minimal Mistakes incorporates Breakpoint.
Breakpoint is distributed under the terms of the MIT/GPL Licenses.

Minimal Mistakes incorporates FitVids.js,
Copyright (c) 2013 Dave Rubert and Chris Coyier.
FitVids is distributed under the terms of the WTFPL License.

Minimal Mistakes incorporates Magnific Popup,
Copyright (c) 2014-2016 Dmitry Semenov, http://dimsemenov.com.
Magnific Popup is distributed under the terms of the MIT License.

Minimal Mistakes incorporates Smooth Scroll,
Copyright (c) 2019 Chris Ferdinandi.
Smooth Scroll is distributed under the terms of the MIT License.

Minimal Mistakes incorporates Gumshoejs,
Copyright (c) 2019 Chris Ferdinandi.
Gumshoejs is distributed under the terms of the MIT License.

Minimal Mistakes incorporates jQuery throttle / debounce,
Copyright (c) 2010 "Cowboy" Ben Alman.
jQuery throttle / debounce is distributed under the terms of the MIT License.

Minimal Mistakes incorporates GreedyNav.js,
Copyright (c) 2015 Luke Jackson.
GreedyNav.js is distributed under the terms of the MIT License.

Minimal Mistakes incorporates Jekyll Group-By-Array,
Copyright (c) 2015 Max White [email protected].
Jekyll Group-By-Array is distributed under the terms of the MIT License.

Minimal Mistakes incorporates @allejo's Pure Liquid Jekyll Table of Contents,
Copyright (c) 2017 Vladimir Jimenez.
Pure Liquid Jekyll Table of Contents is distributed under the terms of the MIT License.

Minimal Mistakes incorporates Lunr,
Copyright (c) 2018 Oliver Nightingale.
Lunr is distributed under the terms of the MIT License.

Minimal Mistakes incorporates clipboard.js,
Copyright (c) 2021 Zeno Rocha.
Clipboard.js is distributed under the terms of the MIT License.


File: docs/_docs/01-quick-start-guide.md


title: "Quick-Start Guide"
permalink: /docs/quick-start-guide/
excerpt: "How to quickly install and setup Minimal Mistakes for use with GitHub Pages."
last_modified_at: 2021-06-07T08:48:05-04:00
redirect_from:

  • /theme-setup/
    toc: true

Minimal Mistakes has been developed as a Gem-based theme for easier use, and 100% compatible with GitHub Pages when used as a remote theme.

If you enjoy this theme, please consider sponsoring me to continue developing and maintaining it.


{: style="margin-top: 0.5em;"}

Installing the theme

If you're running Jekyll v3.7+ and self-hosting you can quickly install the theme as a Ruby gem.

[^structure]: See [**Structure** page]({{ "/docs/structure/" | relative_url }}) for a list of theme files and what they do.

ProTip: Be sure to remove /docs and /test if you forked Minimal Mistakes. These folders contain documentation and test pages for the theme and you probably don't want them littering up your repo.
{: .notice--info}

Note: The theme uses the jekyll-include-cache plugin which will need to be installed in your Gemfile and added to the plugins array of _config.yml. Otherwise you'll throw Unknown tag 'include_cached' errors at build.
{: .notice--warning}

Gem-based method

With Gem-based themes, directories such as the assets, _layouts, _includes, and _sass are stored in the theme’s gem, hidden from your immediate view. This allows for easier installation and updating as you don't have to manage any of the theme files.

To install as a Gem-based theme:

  1. Add the following to your Gemfile:

    ruby
    gem "minimal-mistakes-jekyll"
  2. Fetch and update bundled gems by running the following Bundler command:

    bash
    bundle
  3. Set the theme in your project's Jekyll _config.yml file:

    yaml
    theme: minimal-mistakes-jekyll

To update the theme run bundle update.

Remote theme method

Remote themes are similar to Gem-based themes, but do not require Gemfile changes or whitelisting making them ideal for sites hosted with GitHub Pages.

To install as a remote theme:

  1. Create/replace the contents of your Gemfile with the following:

    ruby
    source "https://rubygems.org"
    
    gem "github-pages", group: :jekyll_plugins
    gem "jekyll-include-cache", group: :jekyll_plugins
  2. Add jekyll-include-cache to the plugins array of your _config.yml.

  3. Fetch and update bundled gems by running the following Bundler command:

    bash
    bundle
  4. Add remote_theme: "mmistakes/minimal-mistakes@{{ site.data.theme.version }}" to your _config.yml file. Remove any other theme: or remote_theme: entry.

You may also optionally specify a branch, tag, or commit to use by appending an @ and the Git ref (e.g., mmistakes/[email protected] or mmistakes/minimal-mistakes@bbf3cbc5fd64a3e1885f3f99eb90ba92af84063d). This is useful when rolling back to older versions of the theme. If you don't specify a Git ref, the latest on master will be used.

Looking for an example? Use the Minimal Mistakes remote theme starter for the quickest method of getting a GitHub Pages hosted site up and running. Generate a new repository from the starter, replace sample content with your own, and configure as needed.
{: .notice--info}


Note: Your Jekyll site should be viewable immediately at http://USERNAME.github.io. If it's not, you can force a rebuild by Customizing Your Site (see below for more details).
{: .notice--warning}

If you're hosting several Jekyll based sites under the same GitHub username you will have to use Project Pages instead of User Pages. Essentially you rename the repo to something other than USERNAME.github.io and create a gh-pages branch off of master. For more details on how to set things up check GitHub's documentation.

You can also install the theme by copying all of the theme files[^structure] into your project.

To do so fork the Minimal Mistakes theme, then rename the repo to USERNAME.github.io --- replacing USERNAME with your GitHub username.

GitHub Pages Alternatives: Looking to host your site for free and install/update the theme painlessly? Netlify, GitLab Pages, and Continuous Integration (CI) services have you covered. In most cases all you need to do is connect your repository to them, create a simple configuration file, and install the theme following the Ruby Gem Method above.
{: .notice--info}

Remove the Unnecessary

If you forked or downloaded the minimal-mistakes-jekyll repo you can safely remove the following folders and files:

  • .editorconfig
  • .gitattributes
  • .github
  • /docs
  • /test
  • CHANGELOG.md
  • minimal-mistakes-jekyll.gemspec
  • README.md
  • screenshot-layouts.png
  • screenshot.png

Note: If forking the theme be sure to update Gemfile as well. The one found at the root of the project is for building the theme's Ruby gem and is missing dependencies. To properly setup a Gemfile with the theme, consult the "Install Dependencies" section.
{: .notice--warning}

Setup Your Site

Depending on the path you took installing Minimal Mistakes you'll setup things a little differently.

ProTip: The source code and content files for this site can be found in the /docs folder if you want to copy or learn from them.
{: .notice--info}

Starting Fresh

Starting with an empty folder and Gemfile you'll need to copy or re-create this default _config.yml file. For a full explanation of every setting be sure to read the [**Configuration**]({{ "/docs/configuration/" | relative_url }}) section.

From v4.5.0 onwards, Minimal Mistakes theme-gem comes bundled with the necessary data files for localization.
They will be picked up automatically if you have the jekyll-data plugin installed.
If you're hosting on GitHub Pages, you can copy the _data/ui-text.yml file into your repository for the localization feature to work.

You'll need to create and edit these data files to customize them:

Starting from `jekyll new`

Scaffolding out a site with the jekyll new command requires you to modify a few files that it creates.

Edit _config.yml. Then:

  • Replace <site root>/index.md with a modified Minimal Mistakes index.html. Be sure to enable pagination if using the [home layout]({{ "/docs/layouts/#home-page" | relative_url }}) by adding the necessary lines to _config.yml.
  • Change layout: post in _posts/0000-00-00-welcome-to-jekyll.markdown to layout: single.
  • Remove about.md, or at the very least change layout: page to layout: single and remove references to icon-github.html (or copy to your _includes if using it).

Migrating to Gem Version

If you're migrating a site already using Minimal Mistakes and haven't customized any of the theme files things upgrading will be easier for you.

Start by removing the following folders and any files within them:

terminal
├── _includes
├── _layouts
├── _sass
├── assets
|  ├── css
|  ├── fonts
|  └── js

You won't need these anymore as they're bundled with the theme gem --- unless you intend to override them.

Note: When clearing out the assets folder be sure to leave any files you've added and need. This includes images, CSS, or JavaScript that aren't already bundled in the theme.
{: .notice--warning}

From v4.5.0 onwards, the default language files are read-in automatically via the jekyll-data plugin if it's installed. For sites hosted with GitHub Pages, you still need to copy the _data/ui-text.yml file because the jekyll-data plugin is unsupported on GitHub Pages.

If you customized any of these files leave them alone, and only remove the untouched ones. If done correctly your modified versions should override the versions bundled with the theme and be used by Jekyll instead.

Update Gemfile

Replace gem "github-pages or gem "jekyll" with gem "jekyll", "~> 3.5". You'll need the latest version of Jekyll[^update-jekyll] for Minimal Mistakes to work and load all of the theme's assets properly, this line forces Bundler to do that.

[^update-jekyll]: You could also run bundle update jekyll to update Jekyll.

Add the Minimal Mistakes theme gem:

ruby
gem "minimal-mistakes-jekyll"

When finished your Gemfile should look something like this:

ruby
source "https://rubygems.org"

gem "jekyll", "~> 3.7"
gem "minimal-mistakes-jekyll"

Then run bundle update and add theme: minimal-mistakes-jekyll to your _config.yml.

v4 Breaking Change: Paths for image headers, overlays, teasers, [galleries]({{ "/docs/helpers/#gallery" | relative_url }}), and [feature rows]({{ "/docs/helpers/#feature-row" | relative_url }}) have changed and now require a full path. Instead of just image: filename.jpg you'll need to use the full path eg: image: /assets/images/filename.jpg. The preferred location is now /assets/images/ but can be placed elsewhere or externally hosted. This applies to image references in _config.yml and author.yml as well.
{: .notice--danger}


That's it! If all goes well running bundle exec jekyll serve should spin-up your site.


File: docs/_docs/02-structure.md


Nothing clever here :wink:. Layouts, data files, and includes are all placed in their default locations. Stylesheets and scripts in assets, and a few development related files in the project's root directory.

Please note: If you installed Minimal Mistakes via the Ruby Gem method, theme files like _layouts, _includes, _sass, and /assets/ will be missing. This is normal as they are bundled with the minimal-mistakes-jekyll Ruby gem. If you would like to make changes, create the files and Jekyll will prefer your local copy.
{: .notice--info}

text
/* Detailed source-code truncated for AI context efficiency. */

File: docs/_docs/03-installation.md


Install the theme

1. For a new site, install the minimal-mistakes-jekyll gem, remote theme, or fork the Minimal Mistakes repo on GitHub following the steps outlined in the [*Quick-Start Guide*]({{ "/docs/quick-start-guide/" | relative_url }}).

If you plan to host with GitHub Pages be sure to properly setup jekyll-remote-theme as it is required for the theme to work properly.

2. For an existing site follow the steps outlined in the [*Quick-Start Guide*]({{ "/docs/quick-start-guide/" | relative_url }}). Then work through the guidelines below for migration and setup.

3. For those who'd like to make substantial edits to the theme, download as a ZIP file to customize.

Download Minimal Mistakes Theme{: .btn .btn--success}

ProTip: Be sure to remove /docs and /test if you forked or downloaded Minimal Mistakes. These folders contain documentation and test pages for the theme and you probably don't want them littering up in your repo.
{: .notice--info}

Note: The theme uses the jekyll-include-cache plugin which will need to be installed in your Gemfile and added to the plugins array of _config.yml. Otherwise you'll throw Unknown tag 'include_cached' errors at build.
{: .notice--warning}

Theme migration

To move over any existing content you'll want to copy the contents of your _posts folder to the new site. Along with any pages, collections, data files, images, or other assets you may have.

Next you'll need to convert posts and pages to use the proper layouts and settings. In most cases you simply need to update _config.yml to your liking and set the correct layout in their YAML Front Matter.

Front Matter defaults are your friend and I encourage you to leverage them instead of setting a layout and other global options in each post/page's YAML Front Matter.

Posts can be configured to use the single layout --- with reading time, comments, social sharing links, and related posts enabled. Adding the following to _config.yml will set these defaults for all posts:

yaml
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      read_time: true
      comments: true
      share: true
      related: true

Post/Page Settings: Be sure to read through the "Working with..." documentation to learn about all the options available to you. The theme has been designed to be flexible --- with numerous settings for each.
{: .notice--info}

Install dependencies

If this is your first time using Jekyll be sure to read through the official documentation before jumping in. This guide assumes you have Ruby v2 installed and a basic understanding of how Jekyll works.

To keep your sanity and better manage dependencies I strongly urge you to install Bundler with gem install bundler and use the following Gemfile:

ruby
source "https://rubygems.org"

# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
#     bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!

# gem "github-pages", group: :jekyll_plugins

# To upgrade, run `bundle update`.

gem "jekyll"
gem "minimal-mistakes-jekyll"

# The following plugins are automatically loaded by the theme-gem:
#   gem "jekyll-paginate"
#   gem "jekyll-sitemap"
#   gem "jekyll-gist"
#   gem "jekyll-feed"
#   gem "jekyll-include-cache"
#
# If you have any other plugins, put them here!
# Cf. https://jekyllrb.com/docs/plugins/installation/
group :jekyll_plugins do
end

ProTip: To be bleeding edge install the latest (unreleased) version of Minimal Mistakes by adding this line to your Gemfile: gem "minimal-mistakes-jekyll", :github => "mmistakes/minimal-mistakes".
{: .notice--info}

To maintain a local Jekyll environment in sync with GitHub Pages replace the gem "jekyll" line with gem "github-pages", group: :jekyll_plugins and run the following:

bash
$ bundle install

Note: The GitHub Pages gem installs additional dependencies that may need to be added to your Gemfile if you decide to remove the gem "github-pages" eg. jekyll-paginate, jekyll-sitemap, jekyll-feed, jekyll-include-cache, etc.
{: .notice--warning}

Depending on what gems you already have installed you may have to run bundle update to clear up any dependency issues. Bundler is usually pretty good at letting you know what gems need updating or have issues installing, to further investigate.

When using Bundler to manage gems you'll want to run Jekyll using bundle exec jekyll serve and bundle exec jekyll build.

Doing so executes the gem versions specified in Gemfile.lock. Sure you can test your luck with a naked jekyll serve, but I wouldn't suggest it. A lot of Jekyll errors originate from outdated or conflicting gems fighting with each other. So do yourself a favor and just use Bundler.


File: docs/_docs/04-upgrading.md


If you're using the [Ruby Gem]({{ "/docs/quick-start-guide/#gem-based-method" | relative_url }}) or [remote theme]({{ "/docs/quick-start-guide/#remote-theme-method" | relative_url }}) versions of Minimal Mistakes, upgrading is fairly painless.

To check which version you are currently using, view the source of your built site and you should see something similar to:

text
{% include copyright.html %}

At the top of every .html file, /assets/css/main.css, and /assets/js/main.min.js.

Ruby Gem

Simply run bundle update if you're using Bundler (have a Gemfile) or gem update minimal-mistakes-jekyll if you're not.

When using Bundler you can downgrade or lock the theme to a specific release (tag), branch, or commit. Instead of gem "minimal-mistakes-jekyll" you'd add the following to your Gemfile:

ruby
gem "minimal-mistakes-jekyll", :git => "https://github.com/mmistakes/minimal-mistakes.git", :tag => "{{ site.data.theme.version }}"

For more information on installing gems from Git repositories consult Bundler's documentation.

Remote theme

When setting remote_theme: "mmistakes/minimal-mistakes@{{ site.data.theme.version }}" in your _config.yml you may also optionally specify a branch, tag, or commit to use by appending an @ and the Git ref.

For example, you can roll back to release 4.8.1 with mmistakes/[email protected] or a specific commit with mmistakes/minimal-mistakes@bbf3cbc5fd64a3e1885f3f99eb90ba92af84063d). For a complete list of theme versions consult the releases page.

To update the theme on GitHub Pages you'll need to push up a commit to force a rebuild. An empty commit works well if you don't have anything to push at the moment:

terminal
git commit --allow-empty -m "Force rebuild of site"

Use Git

If you want to get the most out of the Jekyll + GitHub Pages workflow, then you'll need to utilize Git. To pull down theme updates you must first ensure there's an upstream remote. If you forked the theme's repo then you're likely good to go.

To double check, run git remote -v and verify that you can fetch from origin https://github.com/{{ site.repository }}.git.

To add it you can do the following:

terminal
git remote add upstream https://github.com/{{ site.repository }}.git

Pull down updates

Now you can pull any commits made to theme's master branch with:

terminal
git pull upstream master

Depending on the amount of customizations you've made after forking, there's likely to be merge conflicts. Work through any conflicting files Git flags, staging the changes you wish to keep, and then commit them.

Update files manually

Another way of dealing with updates is [downloading the theme](https://github.com/{{ site.repository }}/archive/master.zip) --- replacing your layouts, includes, and assets with the newer ones manually. To be sure that you don't miss any changes it's probably a good idea to review the theme's [commit history](https://github.com/{{ site.repository }}/commits/master) to see what's changed since.

Here's a quick checklist of the important folders/files you'll want to be mindful of:

Name
_layouts Replace all. Apply edits if you customized any layouts.
_includes Replace all. Apply edits if you customized any includes.
assets Replace all. Apply edits if you customized stylesheets or scripts.
_sass Replace all. Apply edits if you customized Sass partials.
_data/navigation.yml Safe to keep. Verify that there were no major structural changes or additions.
_data/ui-text.yml Safe to keep. Verify that there were no major structural changes or additions.
_config.yml Safe to keep. Verify that there were no major structural changes or additions.

Note: If you're not seeing the latest version, be sure to flush browser and CDN caches. Depending on your hosting environment older versions of /assets/css/main.css, /assets/js/main.min.js, or *.html may be cached.
{: .notice--info}


File: docs/_docs/05-configuration.md


title: "Configuration"
permalink: /docs/configuration/
excerpt: "Settings for configuring and customizing the theme."
last_modified_at: 2021-05-11T10:40:42-04:00
toc: true

skins:

  • name: air
  • name: aqua
  • name: contrast
  • name: dark
  • name: dirt
  • name: mint
  • name: neon
  • name: plum
  • name: sunrise

Settings that affect your entire site can be changed in Jekyll's configuration file: _config.yml, found in the root of your project. If you don't have this file you'll need to copy or create one using the theme's default _config.yml as a base.

Note: for technical reasons, _config.yml is NOT reloaded automatically when used with jekyll serve. If you make any changes to this file, please restart the server process for them to be applied.
{: .notice--warning}

Take a moment to look over the configuration file included with the theme. Comments have been added to provide examples and default values for most settings. Detailed explanations of each can be found below.

Site settings

Theme

If you're using the Ruby gem version of the theme you'll need this line to activate it:

yaml
theme: minimal-mistakes-jekyll

Skin

Easily change the color scheme of the theme using one of the provided "skins":

yaml
minimal_mistakes_skin: "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

Note: If you have made edits to the theme's CSS files be sure to update /assets/css/main.scss to include {% raw %}@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin{% endraw %} before the minimal-mistakes import.
{: .notice--warning}

{% for skin in page.skins %}

{{ skin.name | capitalize }} skin: `{{ skin.name }}`

{:.no_toc}

{{ skin.description }}
{% endfor %}

Site locale

site.locale is used to declare the primary language for each web page within the site.

Example: locale: "en-US" sets the lang attribute for the site to the United States flavor of English, while en-GB would be for the United Kingdom style of English. Country codes are optional and the shorter variation locale: "en" is also acceptable. To find your language and country codes check this reference table.

Properly setting the locale is important for associating localized text found in the [**UI Text**]({{ "/docs/ui-text/" | relative_url }}) data file. An improper match will cause parts of the UI to disappear (eg. button labels, section headings, etc).

Note: Localization can also be overridden per page by specifying locale in the front matter.
{: .notice--info}

Note: The theme comes with localized text in English (en, en-US, en-GB). If you change locale in _config.yml to something else, most of the UI text will go blank. Be sure to add the corresponding locale key and translated text to _data/ui-text.yml to avoid this.
{: .notice--warning}

Site title

The name of your site. Is used throughout the theme in places like the site masthead and <title> tags.

Example: title: "My Awesome Site"

You also have the option of customizing the separation character used in SEO-friendly page titles.

Example: title_separator: "|" would produce page titles like Sample Page | My Awesome Site.

Note: Long site titles have been known to break the masthead layout. Avoid adding a long "tagline" to the title to prevent this from happening, e.g. My Awesome Site is the Best Because I Say So.
{: .notice--warning}

Site subtitle

A short tagline that appears below the title in site masthead.

Example: subtitle: "Version 2.0"

Site name

Used to assign a site author. Don't worry, you can override the site author with different ones on specific posts, pages, or collection documents.

Example: name: "Michael Rose".

ProTip: If you want to get crafty with your YAML you can use anchors to reuse values. For example foo: &var "My String" allows you to reuse "My String" elsewhere in _config.yml like so... bar: *var. You'll see a few examples of this in the provided Jekyll config.
{: .notice--info}

Site description

Fairly obvious. site.description describes the site. Used predominantly in meta descriptions for improving SEO.

Example: description: "A flexible Jekyll theme for your blog or site with a minimalist aesthetic."

Site URL

The base hostname and protocol for your site. If you're hosting on GitHub Pages this will be something like url: "https://mmistakes.github.io" or url: "https://mademistakes.com" if you have a custom domain name.

GitHub Pages now forces https:// for new sites so be mindful of that when setting your URL to avoid mixed-content warnings.

Note: Jekyll 3.3 overrides this value with url: http://localhost:4000 when running jekyll serve locally in development. If you want to avoid this behavior set JEKYLL_ENV=production to force the environment to production.
{: .notice--warning}

Site base URL

This little option causes all kinds of confusion in the Jekyll community. If you're not hosting your site as a GitHub Pages Project or in a subfolder (eg: /blog), then don't mess with it.

In the case of the Minimal Mistakes demo site it's hosted on GitHub at https://mmistakes.github.io/minimal-mistakes. To correctly set this base path I'd use url: "https://mmistakes.github.io" and baseurl: "/minimal-mistakes".

For more information on how to properly use site.url and site.baseurl as intended by the Jekyll maintainers, check Parker Moore's post on the subject.

Note: When using baseurl remember to include it as part of your path when testing your site locally. Values of url: and baseurl: "/blog" would make your local site visible at http://localhost:4000/blog and not http://localhost:4000.
{: .notice--warning}

Site repository

Add your repository name with organization to your site's configuration file, _config.yml.

yaml

"NWO" stands for "name with owner." It is GitHub lingo for the username of the owner of the repository plus a forward slash plus the name of the repository, e.g. mmistakes/minimal-mistakes, where mmistakes is the owner and minimal-mistakes is the repository name.

Your site.github.* fields should be filled in like normal. If you run Jekyll with the --verbose flag, you should be able to see all the API calls made.

If you don't set repository correctly you may see the following error when trying to serve or build your Jekyll site:

Liquid Exceptions: No repo name found. Specify using PAGES_REPO_NWO environment variables, repository in your configuration, or set up origin git remote pointing to your github.com repository.
{: .notice--danger}

For more information on how site.github data can be used with Jekyll check out github-metadata's documentation.

Site scripts

Add scripts to the <head> or closing `` elements by assigning paths to either head_scripts and/or footer_scripts.

For example, to add a CDN version of jQuery to page's head along with a custom script you'd do the following:

yaml
head_scripts:
  - https://code.jquery.com/jquery-3.2.1.min.js
  - /assets/js/your-custom-head-script.js

Consult the [JavaScript documentation]({{ site.baseurl }}{% link _docs/17-javascript.md %}) for more information on working with theme scripts.
{: .notice--info}

Site default teaser image

To assign a fallback teaser image used in the "Related Posts" module, place a graphic in the /assets/images/ directory and add the filename to _config.yml like so:

yaml
teaser: /assets/images/500x300.png

This image can be overridden at anytime by applying the following to a document's YAML Front Matter.

yaml
header:
  teaser: /assets/images/my-awesome-post-teaser.jpg
Example of teaser images found in the related posts module.

To insert a logo before the site title, place a graphic in the /assets/images/ directory and add the filename to _config.yml:

yaml
logo: "/assets/images/88x88.png"
Example of masthead with logo and custom title.

Site masthead title

By default your site title is used in the masthead. You can override this text by adding the following to your _config.yml:

yaml
masthead_title: "My Custom Title"

Site direction

site.direction is used to sets the direction of the page. This option can be used for RTL languages (like Arabic, Persian, etc)

Example: direction: rtl sets the direction of the page to right to left. By default this option is direction: ltr.

Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:

  1. Use a category based permalink structure e.g. permalink: /:categories/:title/
  2. Manually create pages for each category or use a plugin like jekyll-archives to auto-generate them. If these pages don't exist breadcrumb links to them will be broken.
yaml
breadcrumbs: true  # disabled by default

Breadcrumb start link text and separator character can both be changed in the [UI Text data file]({{ "/docs/ui-text/" | relative_url }}).

Post dates

Enable post date snippets with show_date: true in YAML Front Matter.

Instead of adding show_date: true to each post, apply as a default in _config.yml like so:

yaml
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      show_date: true

To disable post date for a post, add show_date: false to its YAML Front Matter, overriding what was set in _config.yml.

When dates are shown on blog posts or pages, a date format will be chosen to format the date string. The default format is "%B %-d, %Y", which will be displayed like "February 24, 2016". You can choose your date format by referencing this cheat sheet. For example, to use ISO 8601 style dates, use this date format:

yaml
date_format: "%Y-%m-%d"

You can set a custom date_format for the entire site as a top-level entry in _config.yml. You can override the site's date_format for a specific post by putting it in the YAML Front Matter, or for groups of posts in the _config.yml defaults (just like you can with show_date).

Reading time

Enable estimated reading time snippets with read_time: true in YAML Front Matter. 200 has been set as the default words per minute value --- which can be changed by adjusting words_per_minute: in _config.yml.

Instead of adding read_time: true to each post, apply as a default in _config.yml like so:

yaml
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      read_time: true

To disable reading time for a post, add read_time: false to its YAML Front Matter to override what was set in _config.yml.

words_per_minute can also be adjusted on a per-page basis by adding to its YAML Front Matter. This is useful for sites with multi-lingual content where you'd like specify a different value from the site config.

yaml
words_per_minute: 250

Page meta separator

To customise the separator between the page date and reading time (if both are enabled), edit .page__meta-sep::before in a [custom stylesheet]({{ "/docs/stylesheets/" | relative_url }}).

For example,

css
.page__meta-sep::before {
  content: "\2022";
  padding-left: 0.5em;
  padding-right: 0.5em;
}

Code block copy button

New in v4.26.0

To enable a copy button on code blocks, add the following to _config.yml:

yaml
enable_copy_code_button: true

When enabled site-wide, the button can be disabled on individual code blocks by adding no-copy to the code block's class list.

markdown
```
Hey, I have a "copy to clipboard" button!
```
markdown
```
But I don't have one.
```
{: .no-copy}

{: .no-copy}

Comments

Disqus, Discourse, Facebook, utterances, giscus and static-based commenting via Staticman are built into the theme. First set the comment provider you'd like to use:

Name Comment Provider
disqus Disqus
discourse Discourse
facebook Facebook Comments
staticman_v2 Staticman v2 / v3
staticman Staticman v1 (deprecated)
utterances utterances
giscus giscus
custom Other

Then add comments: true to each document you want comments visible on.

Instead of adding YAML Front Matter to each document, apply as a default in _config.yml. To enable comments for all posts:

yaml
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      comments: true

If you add comments: false to a post's YAML Front Matter it will override the default and disable comments for just that post.

Note: Comments are disabled in development. To enable when testing/building locally be sure to set
JEKYLL_ENV=production to force the environment to production.
{: .notice--info}

Disqus

To use Disqus you'll need to create an account and shortname. Once you have both update _config.yml to:

yaml
comments:
  provider: "disqus"
  disqus:
    shortname: "your-disqus-shortname"

Discourse

For guidance on how to set up Discourse for embedding comments from a topic on a post page, consult this guide.

yaml
comments:
  provider: "discourse"
  discourse:
    server: # meta.discourse.org

Note: Do not include http:// or https:// when setting your Discourse server. The theme automatically prepends the URL //, following a scheme-less pattern.
{: .notice--info}

Facebook comments

To enable Facebook Comments choose how many comments you'd like visible per post and the color scheme of the widget.

yaml
comments:
  provider: "facebook"
  facebook:
    appid: # optional
    num_posts: # 5 (default)
    colorscheme: # "light" (default), "dark"

utterances comments

To use utterances you will need to install the app to your GitHub repository by adding the following to _config.yml:

yaml

Note: Make sure the repo is public, otherwise your readers will not be able to view the issues/comments. The issues feature also needs to be active on your repo.
{: .notice--warning}

To enable utterances on the front end set comments.provider and the color theme of the widget.

yaml
comments:
  provider: "utterances"
  utterances:
    theme: "github-light" # "github-dark"
    issue_term: "pathname"
    label: "comment" # Optional - must be existing label.

giscus comments

To use giscus you will need to install the app to your GitHub repository.

The next step is to go to https://giscus.app and fill out the desired settings. This will generate JavaScript that will provide you with the settings you will need to configure things below.

You'll need to ensure you've added the following to _config.yml:

yaml

Note: Make sure the repo is public, otherwise your readers will not be able to view the issues/comments. The discussions feature also needs to be active on your repo.
{: .notice--warning}

To enable giscus on the front end set comments.provider and the other additional options.

yaml
comments:
  provider: "giscus"
  giscus:
    repo_id              : # Shown during giscus setup at https://giscus.app
    category_name        : # Full text name of the category
    category_id          : # Shown during giscus setup at https://giscus.app
    discussion_term      : # "pathname" (default), "url", "title", "og:title"
    reactions_enabled    : # '1' for enabled (default), '0' for disabled
    theme                : # "light" (default), "dark", "dark_dimmed", "transparent_dark", "preferred_color_scheme"

Static-based comments via Staticman

Transform user comments into _data files that live inside of your GitHub repository by enabling Staticman.

Note: Looking to migrate comments from a WordPress based site? Give this tool a try.
{: .notice--info}

Note: Please note that as of September 2018, Staticman is reaching GitHub API limits due to its popularity, and it is recommended by its maintainer that users deploy their own instances for production (use site.staticman.endpoint). Consult the Staticman "Get Started" guide for more info.
{: .notice--warning}

Add Staticman as a collaborator on GitHub (legacy)

  1. Allow Staticman push access to your GitHub repository by clicking on Settings, then the Collaborators tab and adding your GitHub bot as a collaborator.
  2. To accept the pending invitation visit: https://{your Staticman v2/3 API}/v[2|3]/connect/{your GitHub username}/{your repository name}.

Note: The new GitHub App authentication method is recommended for GitHub repositories to avoid the API rate limit.
{: .notice--info}

Configure Staticman

Staticman v3

Due to the support for GitLab, the URL scheme has been changed. Between v3/entry/ and /{your Git username}, one needs to input a Git service provider (either github or gitlab). For example

text
https://{your Staticman v3 API}/v3/entry/github/{your Git username}/{your repository name}/...
yaml
# _config.yml (defaults)
repository  : # Git username/repo-name e.g. "mmistakes/minimal-mistakes"
comments:
  provider  : "staticman_v2"
  staticman:
    branch    : "master"
    endpoint  : https://{your Staticman v3 API}/v3/entry/github/

Staticman v2

Default settings have been provided in staticman.yml and are commented to guide you through setup. View the full list of configurations.

yaml
# staticman.yml (defaults)
comments:
  allowedFields      : ["name", "email", "url", "message"]
  branch             : "master"
  commitMessage      : "New comment by {fields.name}"
  filename           : "comment-{@timestamp}"
  format             : "yaml"
  generatedFields:
    date:
      type           : "date"
      options:
        format       : "iso8601"
  moderation         : true
  path               : "_data/comments/{options.slug}"
  requiredFields     : ["name", "email", "message"]
  transforms:
    email            : md5

These settings need to be added to your _config.yml file as well:

yaml
# _config.yml (defaults)
repository  : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
comments:
  provider  : "staticman_v2"
  staticman:
    branch    : "master"

Branch setting: This is the branch comment files will be sent to via pull requests. If you host your site on GitHub Pages it will likely be master unless your repo is setup as a project --- use gh-pages in that case.
{: .notice--info}

Note: Staticman is currently compatible with GitHub and GitLab based repositories. Support for GitLab Pages is already available at Staticman v3.
{: .notice--warning}

Staticman v1 (deprecated)

Default settings have been provided in _config.yml. The important ones to set are provider: "staticman", branch, and path. View the full list of configurations.

yaml
# _config.yml (defaults)
comments:
  provider: "staticman"
staticman:
  allowedFields          : ['name', 'email', 'url', 'message']
  branch                 : "master"
  commitMessage          : "New comment by {fields.name}"
  filename               : comment-{@timestamp}
  format                 : "yml"
  moderation             : true
  path                   : "_data/comments/{options.slug}"
  requiredFields         : ['name', 'email', 'message']
  transforms:
    email                : "md5"
  generatedFields:
    date:
      type               : "date"
      options:
        format           : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"

Comment moderation

By default comment moderation is enabled in staticman.yml. As new comments are submitted Staticman will send a pull request. Merging these in will approve the comment, close the issue, and automatically rebuild your site (if hosted on GitHub Pages).

To skip this moderation step simply set moderation: false.

ProTip: Create a GitHub webhook that sends a POST request to the following payload URL https://{your Staticman API URL}/v2/webhook and triggers a "Pull request" event to delete Staticman branches on merge.
{: .notice--info}

reCAPTCHA support (v2 only)

To enable Google's reCAPTCHA to aid in spam detection you'll need to:

  1. Apply for reCAPTCHA API keys and register your site using the reCAPTCHA V2 type.
  2. Add your site and secret keys to staticman.yml and _config.yml. Be sure to properly encrypt your secret key using Staticman's encrypt endpoint.
yaml
reCaptcha:
  enabled: true
  siteKey: # "6LdRBykTAAAAAFB46MnIu6ixuxwu9W1ihFF8G60Q"
  secret: # "PznnZGu3P6eTHRPLORniSq+J61YEf+A9zmColXDM5icqF49gbunH51B8+h+i2IvewpuxtA9TFoK68TuhUp/X3YKmmqhXasegHYabY50fqF9nJh9npWNhvITdkQHeaOqnFXUIwxfiEeUt49Yoa2waRR7a5LdRAP3SVM8hz0KIBT4="

Other comment providers

To use another provider not included with the theme set provider: "custom" then add their embed code to _includes/comments-providers/custom.html.

Custom feed URL

By default the theme links to feed.xml generated in the root of your site by the jekyll-feed plugin. To link to an externally hosted feed update atom_feed in _config.yml like so:

yaml
atom_feed:
  path: "http://feeds.feedburner.com/youFeedname"

Note: By default the site feed is linked in two locations: inside the <head> element and at the bottom of every page in the site footer.
{: .notice--info}

Disable Feed Icons

By default the theme links to feed.xml generated in the root of your site by the jekyll-feed plugin. To remove the RSS icon in the header and footer, update atom_feed in _config.yml like so:

yaml
atom_feed:
  hide: true

To enable site-wide search add search: true to your _config.yml.

Lunr (default)

The default search uses Lunr to build a search index of all post and your documents in collections. This method is 100% compatible with sites hosted on GitHub Pages.

To have it index all pages, update lunr in _config.yml like so:

yaml
lunr:
  search_within_pages: true

Note: Only the first 50 words of a post or page's body content is added to the Lunr search index. Setting search_full_content to true in your _config.yml will override this and could impact page load performance.
{: .notice--warning}

Algolia

For faster and more relevant search (see demo):

  1. Add the jekyll-algolia gem to your Gemfile, in the :jekyll_plugins section.

    ruby
    group :jekyll_plugins do
      gem "jekyll-feed"
      gem "jekyll-seo-tag"
      gem "jekyll-sitemap"
      gem "jekyll-paginate"
      gem "jekyll-include-cache"
      gem "jekyll-algolia"
    end

    Once this is done, download all dependencies by running bundle install.

  2. Switch search providers from lunr to algolia in your _config.yml file:

    yaml
    search_provider: algolia
  3. Add the following Algolia credentials to your _config.yml file. If you don't have an Algolia account, you can open a free Community plan. Once signed in, you can grab your credentials from your dashboard.

    yaml
    algolia:
      application_id: # YOUR_APPLICATION_ID
      index_name: # YOUR_INDEX_NAME
      search_only_api_key: # YOUR_SEARCH_ONLY_API_KEY
      powered_by: # true (default), false
  4. Once your credentials are setup, you can run the indexing with the following command:

    text
    ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia

    For Windows users you will have to use set to assigned the ALGOLIA_API_KEY environment variable.

    text
    set ALGOLIA_API_KEY=your_admin_api_key
    bundle exec jekyll algolia

    Note that ALGOLIA_API_KEY should be set to your admin API key.

To use the Algolia search with GitHub Pages hosted sites follow this deployment guide. Or this guide for deploying on Netlify.

Note: The Jekyll Algolia plugin can be configured in several ways. Be sure to check out their full documentation on how to exclude files and other valuable settings.
{: .notice--info}

Google Custom Search Engine

Add a Google search box to your site.

  1. Create a New search engine in Google Custom Search Engine, give it an appropriate name and setup "Sites to search" to your liking.

  2. Under Look and feel choose the "Results only" layout and a theme (Minimalist is a good choice to match the default look of the Minimal Mistakes).

  3. Select "Save & Get Code" and grab your search engine ID from the line that begins with var cx = 'YOUR_SEARCH_ENGINE_ID'.

  4. Add your search engine ID to _config.yml like so:

    yaml
    google:
      search_engine_id: YOUR_SEARCH_ENGINE_ID

Note: If your site is new and hasn't been indexed by Google yet, search will be incomplete and won't provide accurate results.
{: .notice--info}

SEO, social sharing, and analytics settings

All optional, but a good idea to take the time setting up to improve SEO and links shared from the site.

Google Search Console

Formerly known as Google Webmaster Tools, add your verification code like so: google_site_verification: "yourVerificationCode".

Note: You likely won't have to do this if you verify site ownership through Google Analytics instead.
{: .notice--warning}

Bing Webmaster Tools

There are several ways to verify site ownership --- the easiest adding an authentication code to your config file.

Copy and paste the string inside of content:

html
<meta name="msvalidate.01" content="0FC3FD70512616B052E755A56F8952D" />

Into _config.yml

yaml
bing_site_verification: "0FC3FD70512616B052E755A56F8952D"

To verify site ownership you will need to create a Naver account and then Add your site via Naver Webmaster Tools.

Much like Google and Bing you'll be provided with a meta description:

html
<meta name="naver-site-verification" content="6BF5A01C0E650B479B612AC5A2184144">`

Which you can add to your _config.yml like so:

yaml
naver_site_verification: "6BF5A01C0E650B479B612AC5A2184144"

Yandex

To verify site ownership copy and paste the string inside of content:

html
<meta name='yandex-verification' content='2132801JL' />

Into _config.yml

yaml
yandex_site_verification: "2132801JL"

Baidu

There are several ways to verify site ownership — the easiest is adding an authentication code to your config file.

Copy and paste the string inside of content:

html
<meta name="baidu-site-verification" content="code-iA0wScWXN1" />

Into _config.yml

yaml
baidu_site_verification: "code-iA0wScWXN1"

Twitter Cards and Facebook Open Graph

To improve the appearance of links shared from your site to social networks like Twitter and Facebook be sure to configure the following.

Site Twitter username

Twitter username for the site. For pages that have custom author Twitter accounts assigned in their YAML Front Matter or data file, they will be attributed as a creator in the Twitter Card.

For example if my site's Twitter account is @mmistakes-theme I would add the following to _config.yml

yaml
twitter:
  username: "mmistakes-theme"

And if I assign @mmistakes as an author account it will appear in the Twitter Card along with @mmistakes-theme, attributed as a creator of the page being shared.

Note: You need to validate cards are working and have Twitter approve Player Cards before they begin showing up.
{: .notice--warning}

Fediverse creator

If the site author (or a per-page author override) has a fediverse value set, a <meta name="fediverse:creator"> tag is emitted. This enables "by @user@instance" attribution on Mastodon, Pixelfed, Flipboard, and other fediverse platforms — the same role twitter:creator plays for Twitter Cards.

The value is set in the author block of _config.yml (or in _data/authors.yml for multi-author sites):

yaml
author:
  name: "Your Name"
  fediverse: "@[email protected]"

Facebook Open Graph

If you have a Facebook ID or publisher page add them:

yaml
facebook:
  app_id:  # A Facebook app ID
  publisher:  # A Facebook page URL or ID of the publishing entity

While not part a part of Open Graph, you can also add your Facebook username for use in the sidebar and footer.

yaml
facebook:
  username: "michaelrose"  # https://www.facebook.com/michaelrose

ProTip: To debug Open Graph data use this tool to test your pages. If content changes aren't reflected you will probably have to hit the Scrape Again button to refresh.
{: .notice--info}

Open Graph default image

For pages that don't have a header.image assigned in their YAML Front Matter, site.og_image will be used as a fallback. Use your logo, icon, avatar or something else that is meaningful. Just make sure it is placed in the /assets/images/ folder, has a minimum size of 120px by 120px, and is less than 1MB in file size.

yaml
og_image: /assets/images/site-logo.png
og_image_alt: "Site logo"

og_image_alt sets the default alt text for og:image:alt and twitter:image:alt meta tags. This can be overridden per-page with page.header.og_image_alt in the YAML Front Matter. If no alt text is set, the tags are omitted.

{% include figure
image_path="/assets/images/mm-twitter-card-summary-image.jpg"
alt="Twitter Card summary example"
caption="Example of an image placed in a Summary Card."
%}

Documents who have a header.image assigned in their YAML Front Matter will appear like this when shared on Twitter and Facebook.

{% include figure
image_path="/assets/images/mm-twitter-card-summary-large.jpg"
alt="page shared on Twitter"
caption="Shared page on Twitter with header image assigned."
%}

{% include figure
image_path="/assets/images/facebook-share-example.jpg"
alt="page shared on Facebook"
caption="Shared page on Facebook with header image assigned."
%}

Include your social profile in search results

Use markup on your official website to add your social profile information to the Google Knowledge panel in some searches. Knowledge panels can prominently display your social profile information.

yaml
social:
  type:  # Person or Organization (defaults to Person)
  name:  # If the user or organization name differs from the site's name
  links:
    - "https://twitter.com/yourTwitter"
    - "https://www.facebook.com/yourFacebook"
    - "https://instagram.com/yourProfile"
    - "https://www.linkedin.com/in/yourprofile"

Analytics

Analytics is disabled by default. To enable globally select one of the following:

Name Analytics Provider
google Google Standard Analytics
google-universal Google Universal Analytics
google-gtag Google Analytics Global Site Tag
swetrix Swetrix GDPR-compliant analytics
custom Other analytics providers

For Google Analytics add your Tracking Code:

yaml
analytics:
  provider: "google-gtag"
  google:
    tracking_id: "UA-1234567-8"
    anonymize_ip: false # default

For Swetrix Analytics add your Tracking ID:

yaml
analytics:
  provider: "swetrix"
  swetrix:
    tracking_id: "xyz43567EF"

To use another provider not included with the theme set provider: "custom" then add their embed code to _includes/analytics-providers/custom.html.

Note: Analytics are disabled in development. To enable when testing/building locally be sure to set
JEKYLL_ENV=production to force the environment to production.
{: .notice--info}

Site author

Used as the defaults for defining what appears in the author sidebar.

Note: For sites with multiple authors these values can be overridden post by post with custom YAML Front Matter and a data file. For more information on how that works see below.
{: .notice--info}

yaml
author:
  name     : "Your Name"
  avatar   : "/assets/images/bio-photo.jpg"
  bio      : "My awesome biography constrained to a sentence or two goes here."
  location : "Somewhere, USA"
  fediverse: "@[email protected]"

Author links are all optional, include the ones you want visible under the author.links array.

Name Description
label Link label (e.g. "Twitter")
icon Font Awesome icon classes (e.g. "fab fa-fw fa-square-x-twitter")
url Link URL (e.g. "https://twitter.com/mmistakes")
yaml
author:
  name: "Your Name"
  avatar: "/assets/images/bio-photo.jpg"
  bio: "I am an **amazing** person." # Note: Markdown is allowed
  location: "Somewhere"
  links:
    - label: "Made Mistakes"
      icon: "fas fa-fw fa-link"
      url: "https://mademistakes.com"
    - label: "Twitter"
      icon: "fab fa-fw fa-square-x-twitter"
      url: "https://twitter.com/mmistakes"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/mmistakes"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      url: "https://instagram.com/mmistakes"

To customize the author sidebar, read the full [layout documentation]({{ "/docs/layouts/#author-profile" | relative_url }}).

Footer links can be added under the footer.links array.

Name Description
label Link label (e.g. "Twitter")
icon Font Awesome icon classes (e.g. "fab fa-fw fa-square-x-twitter")
url Link URL (e.g. "https://twitter.com/mmistakes")
rel Optional link relation appended to the default nofollow noopener noreferrer (e.g. "me" for IndieWeb web sign-in)
yaml
footer:
  links:
    - label: "Twitter"
      icon: "fab fa-fw fa-square-x-twitter"
      url: "https://twitter.com/mmistakes"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/mmistakes"
      rel: "me"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      url: "https://instagram.com/mmistakes"

Note: Twitter and Facebook footer links no longer automatically pull from site.twitter.username and site.facebook.username. This behavior has been deprecated in favor of the footer.links array above.
{: .notice--danger}

To change "Follow:" text that precedes footer links, edit the follow_label key in _data/ui-text.yml.

The copyright notice in the footer shows the year the site has been generated. This can be overridden with time in _config.yml. If footer.since is added and the value is not equal to the current year or the optional value of time, then a time range will be shown.

yaml
footer:
  since: "2013"

The above will result for example in © 2013 - 2025 Minimal .... Note that time and footer.since also support values other than year numbers.

Reading files

Nothing out of the ordinary here. include and exclude may be the only things you need to alter.

Conversion and Markdown processing

Again nothing out of the ordinary here as the theme adheres to the defaults used by GitHub Pages. Kramdown for Markdown conversion, Rouge syntax highlighting, and incremental building disabled. Change them if you need to.

Front Matter Defaults

To save yourself time setting Front Matter Defaults for posts, pages, and collections is the way to go. Sure you can assign layouts and toggle settings like reading time, comments, and social sharing in each file, but that's not ideal.

Using the default key in _config.yml you could set the layout and enable author profiles, reading time, comments, social sharing, and related posts for all posts --- in one shot.

yaml
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: true
      share: true
      related: true

Pages Front Matter defaults can be scoped like this:

yaml
defaults:
  # _pages
  - scope:
      path: ""
      type: pages
    values:
      layout: single

And collections like this:

yaml
defaults:
  # _foo
  - scope:
      path: ""
      type: foo
    values:
      layout: single

And of course any default value can be overridden by settings in a post, page, or collection file. All you need to do is specify the settings in the YAML Front Matter. For more examples be sure to check out the demo site's _config.yml.

Outputting

The default permalink style used by the theme is permalink: /:categories/:title/. If you have a post named 2016-01-01-my-post.md with categories: foo in the YAML Front Matter, Jekyll will generate _site/foo/my-post/index.html.

Note: If you plan on enabling breadcrumb links --- including category names in permalinks is a big part of how those are created.
{: .notice--warning}

Paginate

If using pagination on the homepage you can change the amount of posts shown with:

yaml
paginate: 5

You'll also need to include some Liquid and HTML to properly use the paginator, which you can find in the Layouts section under [Home Page]({{ "/docs/layouts/#home-page" | relative_url }}).

The paginator only works on files with name index.html. To use pagination in a subfolder --- for example /recent/, create /recent/index.html and set the paginate_path in _config.yml to this:

yaml
paginate_path: /recent/page:num/

Please note: When using Jekyll's default pagination plugin paginator.posts can only be called once. If you're looking for something more powerful that can paginate category, tag, and collection pages I suggest jekyll-paginate-v2.
{: .notice--info}

Paginate V2

New in v4.26.0

If you're using Jekyll Paginate V2, you can enjoy its powerful features by removing paginate and paginate_path and adding the following configuration to your _config.yml:

yaml
pagination:
  enabled: true
  collection: 'posts'
  per_page: 5
  permalink: '/page/:num/'  # Pages are index.html inside this folder (default)
  title: ':title - page :num'
  limit: 0
  sort_field: 'date'
  sort_reverse: true
  trail:
    before: 2
    after: 2

Then, create /posts/index.html with the following content:

html
---
title: "Posts"
layout: home
permalink: /posts/
pagination:
  enabled: true
---

Your posts will be paginated at /posts/, /posts/page/2/ and /posts/page/3/ etc.

Similarly, if you want to paginate a collection or a tag, you can create another index.html at an appropriate location, and add configuration to the pagination key in the front matter, like this:

html
---
title: "Lovely pets"
layout: home
permalink: /pets/
pagination:
  enabled: true
  collection:
    - cat
    - dog
---

Note: There are two more configuration options from Jekyll Paginate V2 that this theme doesn't support yet. You should either leave them out or use their default values as shown below. Changing them may lead to unexpected results and you're on your own.

yaml
pagination:
  # Optional, the default file extension for generated pages (e.g html, json, xml).
  # Internally this is set to html by default
  extension: html

  # Optional, the default name of the index file for generated pages (e.g. 'index.html')
  # Without file extension
  indexpage: 'index'

Timezone

This sets the timezone environment variable, which Ruby uses to handle time and date creation and manipulation. Any entry from the IANA Time Zone Database is valid. The default is the local time zone, as set by your operating system.

yaml
timezone: America/New_York

Plugins

When hosting with GitHub Pages a small set of gems have been whitelisted for use. The theme uses a few of them which can be found under gems. Additional settings and configurations are documented in the links below.

Plugin Description
jekyll-paginate Pagination Generator for Jekyll.
jekyll-sitemap Jekyll plugin to silently generate a sitemaps.org compliant sitemap for your Jekyll site.
jekyll-gist Liquid tag for displaying GitHub Gists in Jekyll sites.
jekyll-feed A Jekyll plugin to generate an Atom (RSS-like) feed of your Jekyll posts.
jekyll-include-cache Liquid tag that caches Liquid includes.

If you're hosting elsewhere then you don't really have to worry about what is whitelisted as you are free to include whatever Jekyll plugins you desire.

Note: The jekyll-include-cache plugin needs to be installed in your Gemfile and added to the plugins array of _config.yml. Otherwise you'll throw Unknown tag 'include_cached' errors at build.
{: .notice--warning}

Archive settings

The theme ships with support for taxonomy (category and tag) pages. GitHub Pages hosted sites need to use a Liquid only approach while those hosted elsewhere can use plugins like jekyll-archives to generate these pages automatically.

The default type is set to use Liquid.

Note: category_archive and tag_archive were previously named categories and tags. Names were changed to avoid possible conflicts with site.categories and site.tags.
{: .notice--danger}

yaml
category_archive:
  type: liquid
  path: /categories/
tag_archive:
  type: liquid
  path: /tags/

To hide the tag and category lists displayed on each post, set show_taxonomy: false in _config.yml. The taxonomy archive pages themselves are unaffected — only the per-post lists are suppressed.

yaml
show_taxonomy: false

Which would create category and tag links in the breadcrumbs and page meta like: /categories/#foo and /tags/#foo.

Note: these are simply hash (fragment) links into the full taxonomy index pages. For them to resolve properly, the category and tag index pages need to exist at [/categories/index.html](https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.md) (copy to _pages/category-archive.md) and [/tags/index.html](https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.md) (copy to _pages/tag-archive.md).
{: .notice--warning}

If you have the luxury of using Jekyll Plugins, then jekyll-archives will create a better experience as discrete taxonomy pages would be generated, and their corresponding links would be "real" (not just hash/fragment links into a larger index). However, the plugin will not generate the taxonomy index pages (category-archive.md and tag-archive.md) so you'd still need to manually create them if you'd like to have them (see note above).

First, you'll need to make sure that the jekyll-archives plugin is installed. Either run gem install jekyll-archives or add the following to your Gemfile:

text
group :jekyll_plugins do
  gem "jekyll-archives"
end

Then run bundle install.

Now that the plugin is installed, change type to jekyll-archives and apply the following configurations:

yaml
category_archive:
  type: jekyll-archives
  path: /categories/
tag_archive:
  type: jekyll-archives
  path: /tags/
jekyll-archives:
  enabled:
    - categories
    - tags
  layouts:
    category: archive-taxonomy
    tag: archive-taxonomy
  permalinks:
    category: /categories/:name/
    tag: /tags/:name/

Note: The archive-taxonomy layout used by jekyll-archives is provided with the theme and can be found in the _layouts folder.
{: .notice--info}

Tip

To apply Front Matter defaults to pages generated by the jekyll-archives plugin, you can specify a scope of an empty path and a type of either tag or category.

For example, the following configuration enables author profile on tag archives and disables comments on category archives.

yaml
defaults:
  - scope:
      path: ""
      type: tag
    values:
      author_profile: true
  - scope:
      path: ""
      type: category
    values:
      comments: false

HTML compression

If you care at all about performance (and really who doesn't) compressing the HTML files generated by Jekyll is a good thing to do.

If you're hosting with GitHub Pages there aren't many options afforded to you for optimizing the HTML Jekyll generates. Thankfully there is some Liquid wizardry you can use to strip whitespace and comments to reduce file size.

There's a variety of configurations and caveats to using the compress layout, so be sure to read through the documentation if you decide to change the defaults set in the theme's _config.yml.

yaml
compress_html:
  clippings: all
  ignore:
    envs: development  # disable compression in dev environment

Caution: Inline JavaScript comments can cause problems with compress.html, so be sure to /* comment this way */ and avoid // these sorts of comments.
{: .notice--warning}

Note: CDN services such as CloudFlare provide optional automatic minification for HTML, CSS, and JavaScript. If you are serving your site via such a service and have minification enabled, this configuration might be redundant.
{: .notice--info}


File: docs/_docs/06-overriding-theme-defaults.md


When installing the theme as a Ruby Gem its layouts, includes, stylesheets, and other assets are all bundled in the gem. Meaning they're not easily visible in your project.

Each of these files can be modified, but you'll need to copy the default version into your project first. For example, if you wanted to modify the default single layout, you'd start by copying it to _layouts/single.html.

ProTip: To locate theme files, run bundle info minimal-mistakes-jekyll. Then copy the files you want to override from the returned path, to the appropriate folder in your project.
{: .notice--info}

Jekyll will use the files in your project first before falling back to the default versions of the theme. It exhibits this behavior with files in the following folders:

text
/assets
/_layouts
/_includes
/_sass

Additionally, from v4.5.0 onwards the theme-gem will also exhibit above behavior for /_data via a plugin.
Consequently, the data files for UI Text and Navigation are also bundled within the theme-gem.
This doesn't apply if you're building your site on GitHub Pages, however.

For more information on customizing the theme's [stylesheets]({{ "/docs/stylesheets/" | relative_url }}) and [JavaScript]({{ "/docs/javascript/" | relative_url }}), see the appropriate pages.


File: docs/_docs/07-navigation.md


Customize site navigational links through a Jekyll data file.

Masthead

The masthead links use a "priority plus" design pattern. Meaning, show as many navigation items that will fit horizontally with a toggle to reveal the rest.

To define these links add titles and URLs under the main key in _data/navigation.yml:

yaml
main:
  - title: "Quick-Start Guide"
    url: /docs/quick-start-guide/
  - title: "Posts"
    url: /year-archive/
  - title: "Categories"
    url: /categories/
  - title: "Tags"
    url: /tags/
  - title: "Pages"
    url: /page-archive/
  - title: "Collections"
    url: /collection-archive/
  - title: "External Link"
    url: https://google.com
    target: _blank

Which will give you a responsive masthead similar to this:

Optionally, you can add a description key per title in the main key. This description will show up like a tooltip, when the user hovers over the link on a desktop browser.

ProTip: Put the most important links first so they're always visible and not hidden behind the menu toggle.
{: .notice--info}

Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:

  1. Use a category based permalink structure e.g. permalink: /:categories/:title/
  2. Manually create pages for each category or use a plugin like jekyll-archives to auto-generate them. If these pages don't exist breadcrumb links to them will be broken.
yaml
breadcrumbs: true  # disabled by default

Breadcrumb start link text and separator character can both be changed in _data/ui-text.yml.

yaml
breadcrumb_home_label : "Home"
breadcrumb_separator  : "/"

For breadcrumbs that resemble something like Start > Blog > My Awesome Post you'd apply these settings:

yaml
breadcrumb_home_label : "Start"
breadcrumb_separator  : ">"

Custom sidebar navigation menu

See the [**sidebars** documentation]({{ "/docs/layouts/#custom-sidebar-navigation-menu" | relative_url }}) for information on setting up a custom navigation menu.


File: docs/_docs/08-ui-text.md


Text for UI elements, _layouts, and _includes grouped together as a set of translation keys. This is by no means a full-on i18n solution, but it does help make customizing theme text a bit easier.

The English[^yaml-anchors] main keys in _data/ui-text.yml are translated in the following languages:

  • Arabic (عربي)
  • Brazilian Portuguese (Português brasileiro)
  • Bulgarian
  • Catalan
  • Chinese
  • Czech
  • Danish
  • Dutch
  • Finnish
  • French (Français)
  • German (Deutsch)
  • Greek
  • Hebrew
  • Hungarian
  • Indonesian
  • Irish (Gaeilge)
  • Italian (Italiano)
  • Kiswahili
  • Korean
  • Japanese
  • Malayalam
  • Myanmar (Burmese)
  • Nepali (Nepalese)
  • Norwegian (Norsk)
  • Polish
  • Persian (فارسی)
  • Romanian
  • Russian
  • Slovak
  • Spanish (Español)
  • Swedish
  • Thai
  • Turkish (Türkçe)
  • Vietnamese

If you're are interested in localizing them into other languages feel free to submit a pull request and I will be happy to look it over.

[^yaml-anchors]: en-US, and en-GB use YAML anchors to reference the values in en as to not repeat them.

Many of the label based keys like meta_label, categories_label, tags_label, share_on_label, and follow_label can be left blank if you'd like to omit them from view. It really depends on you and if you want an even more minimal look to your site.

Note: Localization can also be overridden per page by specifying locale in the front matter.
{: .notice--info}

Note: The theme comes with localized text in English (en, en-US, en-GB). If you change locale in _config.yml to something else, most of the UI text will go blank. Be sure to add the corresponding locale key and translated text to _data/ui-text.yml to avoid this.
{: .notice--warning}


File: docs/_docs/09-authors.md


Sites that may have content authored from various individuals can be accommodated by using data files.

To assign an author to a post or page that is different from the site author specified in _config.yml:

Step 1. Create _data/authors.yml and add authors using the following format. Any variables found under author: in _config.yml can be used (e.g. name, bio, avatar, author links, etc.).

yaml
# /_data/authors.yml

Billy Rick:
  name        : "Billy Rick"
  bio         : "What do you want, jewels? I am a very extravagant man."
  avatar      : "/assets/images/bio-photo-2.jpg"
  fediverse   : "@[email protected]"
  links:
    - label: "Email"
      icon: "fas fa-fw fa-square-envelope"
      url: "mailto:[email protected]"
    - label: "Website"
      icon: "fas fa-fw fa-link"
      url: "https://thewhip.com"
    - label: "Twitter"
      icon: "fab fa-fw fa-square-x-twitter"
      url: "https://twitter.com/extravagantman"

Cornelius Fiddlebone:
  name        : "Cornelius Fiddlebone"
  bio         : "I ordered what?"
  avatar      : "/assets/images/bio-photo.jpg"
  links:
    - label: "Email"
      icon: "fas fa-fw fa-square-envelope"
      url: "mailto:[email protected]"
    - label: "Twitter"
      icon: "fab fa-fw fa-square-x-twitter"
      url: "https://twitter.com/rhymeswithsackit"

Step 2. Assign one of the authors in authors.yml to a post or page you wish to override the site.author with.

Example: To assign Billy Rick as an author for a post the following YAML Front Matter would be applied:

yaml
author: Billy Rick