Introduction
Jekyll is a tool that simplifies website creation. It converts text into websites without the need for complex components like databases. This efficiency makes Jekyll both fast and user-friendly. A popular theme for Jekyll websites is “Minimal Mistakes,” known for its appealing design and customizability. This article guides you through customizing templates from “Minimal Mistakes” using the Ruby gem theme.
Replacing HTML Files or Adding Code to Existing Ones
Begin by referring to Minimal Mistakes - Overriding Theme Defaults for foundational knowledge. Customizing the theme can be approached in two ways:
- Replacing existing HTML files from the theme with your own.
- Adhering to a specific naming convention to layer your customizations atop the existing layouts and includes.
Replacing the HTML Files from the Theme with Your Own
To replace theme HTML files with personalized versions, create a _includes folder at your project’s root. Here, you can craft HTML files named identically to those in the theme. For instance, to customize the footer, generate _includes/footer.html and insert your unique HTML code.
A practical tip: start by copying the original HTML file from the theme into your project. This acts as a useful reference.
Unsure about file naming? Consult the Minimal Mistakes repository specifically the _includes folder, or use gem fetch minimal-mistakes-jekyll to download the gem and explore its _includes folder.
Following a Specific Naming Convention for Additional Customizations
In a project of mine, I wanted to augment the existing header with a few HTML lines without replacing the entire header. This goal was achievable by adhering to a specific naming convention. Similar to the previous method, create a _includes folder at your project’s root. Then, inside _includes, make a head directory. Within this, create custom.html and add your HTML enhancements. These additions will seamlessly integrate into the website’s existing header.
This method is equally applicable for footer customizations.
Example
Consider this example for organizing the _includes folder:
├── _includes
│ ├── footer.html
│ └── head
│ └── custom.html
Links
Appendix: Structure of Minimal Mistakes
├── minimal-mistakes-jekyll-4.24.0
│ ├── checksums.yaml.gz
│ ├── data
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── _data
│ │ │ ├── navigation.yml
│ │ │ └── ui-text.yml
│ │ ├── _includes
│ │ │ ├── analytics-providers
│ │ │ │ ├── custom.html
│ │ │ │ ├── google-gtag.html
│ │ │ │ ├── google-universal.html
│ │ │ │ └── google.html
│ │ │ ├── analytics.html
│ │ │ ├── archive-single.html
│ │ │ ├── author-profile-custom-links.html
│ │ │ ├── author-profile.html
│ │ │ ├── breadcrumbs.html
│ │ │ ├── browser-upgrade.html
│ │ │ ├── category-list.html
│ │ │ ├── comment.html
│ │ │ ├── comments-providers
│ │ │ │ ├── custom.html
│ │ │ │ ├── custom_scripts.html
│ │ │ │ ├── discourse.html
│ │ │ │ ├── disqus.html
│ │ │ │ ├── facebook.html
│ │ │ │ ├── giscus.html
│ │ │ │ ├── scripts.html
│ │ │ │ ├── staticman.html
│ │ │ │ ├── staticman_v2.html
│ │ │ │ └── utterances.html
│ │ │ ├── comments.html
│ │ │ ├── documents-collection.html
│ │ │ ├── feature_row
│ │ │ ├── figure
│ │ │ ├── footer
│ │ │ │ └── custom.html
│ │ │ ├── footer.html
│ │ │ ├── gallery
│ │ │ ├── group-by-array
│ │ │ ├── head
│ │ │ │ └── custom.html
│ │ │ ├── head.html
│ │ │ ├── masthead.html
│ │ │ ├── nav_list
│ │ │ ├── page__date.html
│ │ │ ├── page__hero.html
│ │ │ ├── page__hero_video.html
│ │ │ ├── page__meta.html
│ │ │ ├── page__taxonomy.html
│ │ │ ├── paginator.html
│ │ │ ├── post_pagination.html
│ │ │ ├── posts-category.html
│ │ │ ├── posts-tag.html
│ │ │ ├── scripts.html
│ │ │ ├── search
│ │ │ │ ├── algolia-search-scripts.html
│ │ │ │ ├── google-search-scripts.html
│ │ │ │ ├── lunr-search-scripts.html
│ │ │ │ └── search_form.html
│ │ │ ├── seo.html
│ │ │ ├── sidebar.html
│ │ │ ├── skip-links.html
│ │ │ ├── social-share.html
│ │ │ ├── tag-list.html
│ │ │ ├── toc
│ │ │ ├── toc.html
│ │ │ └── video
│ │ ├── _layouts
│ │ │ ├── archive-taxonomy.html
│ │ │ ├── archive.html
│ │ │ ├── categories.html
│ │ │ ├── category.html
│ │ │ ├── collection.html
│ │ │ ├── compress.html
│ │ │ ├── default.html
│ │ │ ├── home.html
│ │ │ ├── posts.html
│ │ │ ├── search.html
│ │ │ ├── single.html
│ │ │ ├── splash.html
│ │ │ ├── tag.html
│ │ │ └── tags.html
│ │ ├── _sass
│ │ │ ├── minimal-mistakes
│ │ │ │ ├── _animations.scss
│ │ │ │ ├── _archive.scss
│ │ │ │ ├── _base.scss
│ │ │ │ ├── _buttons.scss
│ │ │ │ ├── _footer.scss
│ │ │ │ ├── _forms.scss
│ │ │ │ ├── _masthead.scss
│ │ │ │ ├── _mixins.scss
│ │ │ │ ├── _navigation.scss
│ │ │ │ ├── _notices.scss
│ │ │ │ ├── _page.scss
│ │ │ │ ├── _print.scss
│ │ │ │ ├── _reset.scss
│ │ │ │ ├── _search.scss
│ │ │ │ ├── _sidebar.scss
│ │ │ │ ├── _syntax.scss
│ │ │ │ ├── _tables.scss
│ │ │ │ ├── _utilities.scss
│ │ │ │ ├── _variables.scss
│ │ │ │ ├── skins
│ │ │ │ │ ├── _air.scss
│ │ │ │ │ ├── _aqua.scss
│ │ │ │ │ ├── _contrast.scss
│ │ │ │ │ ├── _dark.scss
│ │ │ │ │ ├── _default.scss
│ │ │ │ │ ├── _dirt.scss
│ │ │ │ │ ├── _mint.scss
│ │ │ │ │ ├── _neon.scss
│ │ │ │ │ ├── _plum.scss
│ │ │ │ │ └── _sunrise.scss
│ │ │ │ └── vendor
│ │ │ │ ├── breakpoint
│ │ │ │ │ ├── _breakpoint.scss
│ │ │ │ │ ├── _context.scss
│ │ │ │ │ ├── _helpers.scss
│ │ │ │ │ ├── _legacy-settings.scss
│ │ │ │ │ ├── _no-query.scss
│ │ │ │ │ ├── _parsers.scss
│ │ │ │ │ ├── _respond-to.scss
│ │ │ │ │ ├── _settings.scss
│ │ │ │ │ └── parsers
│ │ │ │ │ ├── _double.scss
│ │ │ │ │ ├── _query.scss
│ │ │ │ │ ├── _resolution.scss
│ │ │ │ │ ├── _single.scss
│ │ │ │ │ ├── _triple.scss
│ │ │ │ │ ├── double
│ │ │ │ │ │ ├── _default-pair.scss
│ │ │ │ │ │ ├── _default.scss
│ │ │ │ │ │ └── _double-string.scss
│ │ │ │ │ ├── resolution
│ │ │ │ │ │ └── _resolution.scss
│ │ │ │ │ ├── single
│ │ │ │ │ │ └── _default.scss
│ │ │ │ │ └── triple
│ │ │ │ │ └── _default.scss
│ │ │ │ ├── magnific-popup
│ │ │ │ │ ├── _magnific-popup.scss
│ │ │ │ │ └── _settings.scss
│ │ │ │ └── susy
│ │ │ │ ├── _su.scss
│ │ │ │ ├── _susy-prefix.scss
│ │ │ │ ├── _susy.scss
│ │ │ │ ├── plugins
│ │ │ │ │ ├── _svg-grid.scss
│ │ │ │ │ └── svg-grid
│ │ │ │ │ ├── _prefix.scss
│ │ │ │ │ ├── _svg-api.scss
│ │ │ │ │ ├── _svg-grid-math.scss
│ │ │ │ │ ├── _svg-settings.scss
│ │ │ │ │ ├── _svg-unprefix.scss
│ │ │ │ │ └── _svg-utilities.scss
│ │ │ │ └── susy
│ │ │ │ ├── _api.scss
│ │ │ │ ├── _normalize.scss
│ │ │ │ ├── _parse.scss
│ │ │ │ ├── _settings.scss
│ │ │ │ ├── _su-math.scss
│ │ │ │ ├── _su-validate.scss
│ │ │ │ ├── _syntax-helpers.scss
│ │ │ │ ├── _unprefix.scss
│ │ │ │ └── _utilities.scss
│ │ │ └── minimal-mistakes.scss
│ │ └── assets
│ │ ├── css
│ │ │ └── main.scss
│ │ └── js
│ │ ├── _main.js
│ │ ├── lunr
│ │ │ ├── lunr-en.js
│ │ │ ├── lunr-gr.js
│ │ │ ├── lunr-store.js
│ │ │ ├── lunr.js
│ │ │ └── lunr.min.js
│ │ ├── main.min.js
│ │ ├── plugins
│ │ │ ├── gumshoe.js
│ │ │ ├── jquery.ba-throttle-debounce.js
│ │ │ ├── jquery.fitvids.js
│ │ │ ├── jquery.greedy-navigation.js
│ │ │ ├── jquery.magnific-popup.js
│ │ │ └── smooth-scroll.js
│ │ └── vendor
│ │ └── jquery
│ │ └── jquery-3.5.1.js
│ ├── data.tar.gz
│ └── metadata.gz