Jekyll

From Jasper2 to Kaschber

TL;DR: Dark mode with Kaschber

• 2 min read

Previously I used minima and then Jasper2 for my blog theme. Jasper2 was based on Casper v2 and looked pretty great. However, the Ghost team now moved Casper to version 5 already so Jasper2 was lagging a bit behind. So I set out to create a Jekyll theme based on the latest Casper version. The goals were as follow:

  • the files should be as close as possible to the Casper files
  • it should be published as ruby gem
  • it should be easy to maintain so that every new feature pushed to Casper can be incorporated

The process

First approach

As a newcomer to Jekyll themes, liquid templates and handlebar templates (used by Casper), I thought it’d be the easiest to copy the code from Jasper2 and then make the necessary adjustments. Unfortunately, the Jasper2 repository mixes the example website as well as the theme files. For people experienced with Jekyll this is most likely not a big issue, but for me it was quite confusing. I tried the approach set, but after several hours I gave up.

Second approach

After my first attempt failed, I started by copying the handlebar files from Casper into a freshly created and empty Jekyll theme. I created the theme based on the Jekyll recommendation via

jekyll new-theme

and copied my blog to the newly created repository for testing.

Then I started by substituting every handlebar code with liquid template code. Meaning for every .hbs file, I created a .html file with the same name. As I didn’t know liquid templates before, it took quite some effort as I had to go back and forth to the documentation. Once I was done with that and got the pages to render, I thought about splitting up the files and simplifying some code. In the end I decided against that as I wanted to stick as closely to the handlebar files as possible. To still allow some injection of custom content from theme users, I created several files prefixed with custom- to make it clear that these files do not belong to the original Casper theme.

Finally, I decided to include a couple of themes which the minima theme also uses, namely:

  • jekyll-feed
  • jekyll-seo-tag
  • jekyll-paginate-v2

The result

After several days (rather one week) I managed to port the entire Casper theme over and published its first version as a ruby gem. You can use it by just including it in your gem file and setting your Jekyll theme to kaschber.

gem 'kaschber', "~> 0.1.0"

theme: kaschber

Features

  • (Auto) dark mode
  • Full author pages & information via Jekyll collections
  • Auto generated tag pages plus custimisation via Jekyll collections
  • Pagination via jekyll-paginate-v2
  • Atom Feeds by Jekyll-feed

Although it has been quite some work, it was fun to learn a new technology and at the same time prettify my code. If you want to take a look at the source code, head over to Kaschber. Contributions welcome!