Jekyll Themes

Jekyll Themes

As I continue to hack away at the design of Made Mistakes and improve on things, I try to release simplified Jekyll starters and themes after each major site revision. Should make development easier for those who sift through my main repository trying to strip out the cruft and site specific content to make it their own.

Below are all of the Jekyll starters I’ve open sourced thus far. Each “theme” contains all of the _layouts, _includes, Sass/CSS, JavaScript, and other sample files needed to build a site or blog. There are a lot of similarities between how they work and the file organization — which should make switching and updating between them easier.

Setup

The basic setup for each of my theme’s is roughly the same:

  1. Fork the Jekyll theme repository you’d like to use.
  2. Clone the repository you just forked and rename it appropriately1.
  3. Install Bundler gem install bundler and run bundle install to install all dependencies (Jekyll, Jekyll-Sitemap, Octopress, etc)
  4. Update _config.yml, navigation data files (found in _data), and replace sample posts and pages with your own.

For more specifics, review each themes’ documentation by clicking on the Theme Setup buttons below.

Minimal Mistakes

Minimal Mistakes Jekyll theme
A minimal design to let your content shine.

A flexible two-column Jekyll theme with a minimalistic aesthetic.

  • 100% Compatible with GitHub Pages
  • Several layout options (single, archive, splash pages)
  • SEO optimized with support for Twitter Cards and Open Graph data
  • Optional header images, sidebars, table of contents, galleries, related posts, breadcrumb links, and more.
  • Optional comments (Disqus, Facebook, Google+, Staticman, and custom)
  • Optional analytics (Google Analytics and custom)

Skinny Bones

Skinny Bones Jekyll theme
Includes a fun off canvas menu

A Jekyll starter used to build the latest incarnation of Made Mistakes.

  • Minimal design meant to be hacked up and customized
  • Built-in support for Sass and data files (requires Jekyll 2.x)
  • Off canvas menu
  • Tile based archives
  • Optional table of contents, share links, Disqus comments modules, and more
  • Plugin free. 100% compatible with GitHub Pages.

So Simple

So Simple feature image
Large images and site logo if that's your thing

A simple and clean responsive Jekyll theme for words and large photographs.

  • Minimal design
  • Simple search (searches by post title)
  • Built-in support for Sass and data files (requires Jekyll 2.x)
  • Plugin free. 100% compatible with GitHub Pages.

HPSTR

HPSTR feature image
A traditional blog approach with a modern style

A responsive Jekyll blog theme designed to give your site a modern and somewhat cliché feel.

  • Modern, subtle design
  • Animated main menu
  • Built-in support for Sass and data files (requires Jekyll 2.x)
  • Plugin free. 100% compatible with GitHub Pages.

License

These themes are free and open source software, distributed under the MIT License. Feel free to modify them to suit your needs.

  1. Follow these steps if you’re going to host your site on GitHub Pages to get the repo name and branches setup correctly.

Filed under: , , , and

Comments

Nghi Nguyen

Hi Michael. I’m upgrading my site which is based on Phlow’s Feeling Responsive; I figured the best way is to do that is to simply migrate my small site over to the code based on mademistakes. It’s an awesome site. There is though one thing I can’t figure out how to do which is to get a large header like this: https://mmistakes.github.io/minimal-mistakes/layout-header-image-text-readability/.

As an aside, though I started out looking for a way to upgrade my site’s Foundation code, I discover a whole new world of painting on the iPad. I now got a 53 pencil and Procreate. Thank you for sharing with the world your very own beautiful world. You’ve made us all so much richer.

Michael Rose

Made Mistakes isn’t the same code base as my Minimal Mistakes theme. Some things are similar but not all. It also isn’t that documented since it’s my personal site.

I’d suggest using Minimal Mistakes since that is released and documented as a full fledged theme.

Leave a Comment

Your email address will not be published. Required fields are marked *

Just another boring, tattooed, time traveling designer.

Michael Rose avatar