I’ve been getting back into blogging as we are all staying at home for the foreseeable future and I’ve realised, whilst reading this blog at midnight, that it needs a dark mode, desperately. So others do not sear their own eyeballs attempting to read said articles. Luckily for me, what looks to have been less than a month ago, minima the super minimal theme that is basically the default for jekyll, are soon to be releasing a v3. As part of that v3 (inferring from their commit logs, and recently merged code), comes with new themes! as well as the following new features:

  • A way to override styles and variables without having to edit the main style sheet
    • Enabling users to keep as close to the latest version without having to do 3 way merges if there are things the users wish to try out
  • New theme engine to allow users to choose between 4 different color schemes straight out the gate
    • These include classic, solarised, solarised-dark, and dark (which is what your reading this on)
  • A new social icons system so users do not need to create their own images
    • And it handles the decentralised git/mastodon instances as well

These are just the ones I’ve found out about and cannot wait to see what else happens before their v3 release. Honestly I’d be happy with just these changes. As of writing, v2.5.1 is the latest tagged release on their github repo, which doesn’t help the lowly blog editor at the family paper trying to get their views to make their family proud. No. So we need to pull from the latest master and get these changes to test it out.

Testing the new changes

The main items you need to change are the following:

  • Update Gemfile to specify using minima via the github repo:
    • gem "minima", git: "https://github.com/jekyll/minima"
  • bundle install && bundle update so we pull in those changes
  • Edit your _config.yml or appropriate configuration file so that it has the new changes.
    • You can read them about them all so far by checking out the readme on the github repo

We want to test out the new color themes to see how pretty everything is again so setup the new minima header and add your color theme!

minima:
  skin: dark
  date_format: "%b %-d, %Y"

Now load up your jekyll instance and check it out!

Testing

Just in case, here are some pretty pictures of what the base themes look like.

Solarized

new solarized minima theme

Solarized-dark

new solarized dark minima theme

Dark

new dark minima theme

Classic

new classic minima theme

The astute reader will see that my theme is closely based upon “dark” but differs slightly.

This is because I have taken advantage of the next features, using custom-variables.scss & custom-styles.scss

Custom Styles and Variables

_sass/minima/custom-styles.scss

Custom styles allows us to ditch versioning of the main minima.scss file, and only care about what our custom changes are. For example, I only have 2 modifications:

  • moving the post-title-images to float: right
  • wrapping on my code blocks

I now no-longer need to commit the minima.scss file and will enjoy upstream’s changes on a more regular basis without having to three-way-merge on a regular basis.

_sass/minima/custom-variables.scss

Now this is where the magic happens. Give your blog the uniqueness it deserves, even though 253,000+ people utilise minima (based upon github numbers). This file is imported on build time and contain all custom variables. My recommended items to change are your $brand-color, $link-base-color, $code-background-color, and $text-color.

Conclusion

Moving to Minima v3 (master) has been pretty easy and I really like how simple the process was to update. A small couple changes to the config files, and a simple rebase of the minima.scss file and I was up and running. The only problem for upgrading would be if you have made lots of changes to your minima.scss file. If that is you, then I wish you good luck! But you probably fancy yourself as a dev and migrating to a custom-styles.scss will be more of a chore than a slightly annoying process.

I’m looking forward to what Jekyll v4 and Minima v3 bring to the table in static site generation, specifically for bloggers but this has been a fun afternoon.

If you were following along, congrats, you’ve made your blog your own. There are other tricks you can do as well. Checkout the sass-lang color documentation for other color tricks you can use in scss.

If you’ve enjoyed this post, checkout the rss feed down below and subscribe for more delicious content coming out soon™

Edit: There is a bug currently in Jekyll v4 that I found with the new theme configuration. Make sure you don’t update Jekyll to v4 and stay on v3.8.6 until Jekyll Bug: #8114 is fixed. :)