Themeing the Blog

Till now, I’ve been using the default Jekyll theme: minima. This was good enough for my my use, yet it was a little too outdated to my taste.

The idea was to customize the theme a little bit, adding a splash of colour while retaining the simplicity of minima.

Custom CSS to add color

Initially, I stared the theming with injecting custom CSS into the site, but this was a tedious process and more labour intensive that I wanted to exert, which meant, I needed to find other ways to theme.

With that idea in mind, I started looking at other themes. I liked a few, but again the same issue arose. I was comfortable with Minima and it’s no-hassle philosophy. I wasn’t about to exert additional effort into a new theme.

Updated Minima

The laziness led me back to Minima’s GitHub page in search for the current development version of Minima. I could use that instead of the latest stable release, which at the time of writing was v2.5.1

The latest stable release was on 2019 (3 years ago, at the time of writing) which was too old, really.

However, this also meant that the development version for the next major release (v3+) had to have some good improvements in features and styles for me to use. So, I stayed with Minima, but updated to the latest version.

Setup and Configuration

GitHub Pages

Since there is no release yet for v3+ for minima, I couldn’t directly use that. Thankfully, GitHub Pages automatically fetches any remote-theme from a repository if the link is provided.

In _config.yml the remote-theme is added.

remote_theme: jekyll/minima

Local Dev Env Setup

Instead, setting up my local development environment was a little trickier. By default, Jekyll doesn’t fetch the remote theme. To achieve that, I used the Jekyll Remote Theme Plugin.

Custom CSS

Minima v3+ required a little change in the project structure. Among them, first was to include a style.scss inside assets/css/ folder. This would import all the styles from the theme, and would be applied to the blog.

Any other custom styles went inside _scss/minima/custom-styles.scss file.

One of the breaking changes in v3+ at the time of writing was that the header spacing broke for me.

Minima v3+ Header Spacing Broken

I overrode the CSS inside custom-styles.scss to correct that spacing.

Minima v3+ Header Spacing Fixed

Another thing that was causing an issue was my StackOverflow profile link was getting broken, i.e, on clicking the StackOverflow icon in the footer, the page it was sending me to was incorrect.

This was rectified inside _includes/social.html

{%- if social.stackoverflow -%}
    <!-- The href link was corrected below: -->
      href="{{ social.stackoverflow  | escape }}"
      title="{{ social.stackoverflow | escape }}"
      ><svg class="svg-icon grey">
          xlink:href="{{ '/assets/minima-social-icons.svg#stackoverflow' | relative_url }}"
{%- endif -%}

Additional Customizations

Custom Head

Some more content needed to be injected inside <head>

  • <meta> keywords
  • Google Site Verification <meta> tag
  • Favicon

Previously, these were added directly inside _includes/head.html which overrode the default.

But, v3+ onwards, additional content could be placed inside _includes/custom-head.html

Previously, the footer was populated with RSS, Author, Email, Site Description, and social links which made the not only dense, but also have an awkward layout.

Old Footer

I simplified it so that, the current footer has RSS, author on the left, and the social links on the right.

New Footer

Custom 404 Page

The default 404 page is simply bland, so I set about to customize it.

Researching for a free template that I could use to create my own 404 page led me to the CodePen for the page which I ended up using.

Credit and my thanks, goes to the original author.

There is a hidden <div> inside the 404 page which also credits the original author.

Check out the 404 Page here.

My Jekyll Blog modification is complete for now.

Check out the entire series of posts related to Blog Setup