Geert Arien

Jekyll Theme Munky

One of the first decisions I had to make, when creating this website, was what CMS to use. I wanted to move away from WordPress, which I had used before but felt a bit bloated to my taste, to something more lightweight. And so, after doing some research, I finally decided to go with Jekyll, a static site generator. Jekyll has an extensive theme system that you can use to customize your websites presentation. Now, instead of creating this website with one of the pre-existing themes, I decided to work the other way around, starting from scratch and finally publishing my own theme on RubyGems for others to enjoy.

Munky theme logo
The logo for Munky theme, courtesy of Sharon Roovers.

Static site generators, such as Jekyll, avoid using databases altogether. Instead they use plain text files, written in a markup languages such as Markdown, and run them through a layout or a series of layout files. As a final product, a static website is generated.

Munky theme comes with 7 such layout files:

  • default.html — The base layout that lays the foundation for subsequent layouts.
  • home.html — The layout for the landing-page, gives an overview of the last blogposts.
  • page.html — The default layout, for pages such as the 404 error page.
  • post.html — The layout for posts and projects.
  • about.html — The layout for the about-page.
  • photography.html — The layout for the photography-page.
  • projects.html — The layout for the projects-page.

The aim was to create a lightweight theme that avoids as much javascript as possible and to rely mainly on CSS for the presentation while still maintaining high browser compatibility. When it comes to CSS, Jekyll provides built in support for Sass, a CSS extension language that allows us to do all kind of funky stuff such as using variables:

$font-size:   18px;
$small-font-size:  $base-font-size * 0.8;

body {
  font: $small-font-size;
}

Nesting CSS selectors:

ul.github-buttons li {
  float: left;
  margin-left: 10px;

  &:first-of-type {
    margin-left: 0;
  }

  &:last-of-type {
    float: right;
  }
}

And a whole bunch of other awesome features.

Jekyll also has a plugin system which makes it very easy to add specific functionality to your website. Although it’s not a requirement for the theme to work, Munky theme does provide strong integration with the jekyll-seo-tag plugin which adds metadata tags for search engines and social networks.

For a more detailed overview of features, as well as installation and usage instructions, please refer to the documentation. Munky theme is also available on RubyGems for Jekyll 3.4 and later. As for a live preview, well, you’re looking at it right now!