Maxim Burgerhout

Maxim Burgerhout

Speaker,
Red Hatter,
open sourcerer

© 2020

Tempus Fugit, or moving from hubpress to Jekyll

The other day, I was looking at writing a new blog post about something I was trying out with Quarkus1 and Kubernetes.

When I opened my blog, I realised I hadn’t updated the underlying hubpress code in quite a while. A long while. So long, in fact, that I couldn’t update hubpress anymore, because, much to my distress, the hubpress project had been archived by its author in the meantime. It had been archived months ago, and because I had not written a blog in over a year, I hadn’t even noticed.

I think it’s safe to say I do not have a lucky hand in picking new open source projects to build my own stuff upon. But that’s part of the risk of running new tech sometimes, right?

A new year, a new blog

Anyway, after some brief looking around, I decided to move my blog into Jekyll, which seems to have a decent community and is conceptually quite close to hubpress: being just text files with some markup in Git.

Another quite nice aspect of Jekyll as a migration target was that I could make it so that all of the URLs to my posts would remain identical. Quite nice for search engines and blog aggregation. It’s also really easy to generate an RSS feed with Jekyll, and embed things like Disqus comments and Google Analytics.

Speaking of feeds, I really do hope that switching from the Hubpress feed to the Jekyll feed will not make all of my old posts show up as new ones in aggregators. If they do, sorry :/

I did decide to move away from hosting my blog in Github, because the experience with hubpress on Github wasn’t always stellar.

Setting up a new Jekyll blog

The migration itself wasn’t that hard. These are the steps I took to migrate from hubpress to Jekyll. The obvious step 0 was to install Jekyll and create a new blog with it. I installed via rubygems because I wanted to get started with Jekyll 4.0.0, not an older version. My workstation runs on Fedora 31, my server on EL7, so installing through a rubygem will make it easier to keep my various Jekyll installations in sync.

So:

$ gem install jekyll bundler
$ jekyll new 100things
$ cd 100things
$ git init .
$ git add .
$ git commit -m 'Initial commit of empty blog' # further git commits will not be
mentioned

Converting my posts

Then, I took all the adoc files from the _posts directory in my hubpress repo and dropped them into the _posts directory in my Jekyll directory. Because these files are in asciidoc and the default for Jekyll is markdown, I had to install the asciidoc plugin for Jekyll. You can do this by adding gem "jekyll-asciidoc", "~> 3.0.0" to your Gemfile and running bundle install from your Jekyll directory2.

I added so-called “front matter” to all files, adding the name of the layout, the title of the post, the date and a converted set of tags to each file. I converted the hp-tags of hubpress into Jekyll tags, though I’m not actually using them yet.

This basically means you just go from having

:hp-tags: satellite6, youtube, virt-who, vdc, subscriptions, activation keys

to

tags: [satellite6, youtube, virt-who, vdc, subscriptions, activation-keys]

Quite simple, and easy to automate with a little vim macro.

Some files I had to rename to .markdown from .adoc and manually convert to markdown because embedding Youtube videos didn’t work. Moving files from asciidoc to markdown can be automated through some asciidoc and pandoc commands, but I settled on doing it manually. It was only a dozen or so posts that needed converting, and I had to fix embedding videos manually anyway.

Embedding Youtube

I created two little include files in order to easily embed Youtube videos in a DRY way, following the instructions on this page.

In short, I created _includes/youtube.html, containing:

<style>
{% include youtube.css %}
</style>
{% if include.width != '' %}
  <div style="width: {{include.width}}; margin:0 auto;">
{% else %}
  <div>
{% endif %}
  <div class="ytcontainer">
    <iframe class="yt" allowfullscreen src="https://www.youtube.com/embed/{{include.id}}"></iframe>
  </div>
</div>

and _includes/youtube.css, containing:

div.ytcontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
iframe.yt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

This allows me to do something like this to embed a video, which I think is pretty nice:

{% include youtube.html id="byIf3Vb8sS0" %}

Adding some extra functionality

I’ve installed some additional plugins to make my future life a little easier. Jekyll has very nice plugins to create archive pages (still under construction though), and for embedding asciinema recordings. I don’t think I’ve used to those much yet, but I sure will now :)

Themes

I’m using plainwhite as my theme for the time being. It’s exactly what is says. White and plain. I’m looking for something nicer, but on whether I’ll buy a theme, create my own theme or find something that looks nice and is free, I’m still undecided.

Up next!

I’m in the process of learning more appdev related stuff. Partially for work (I’m broadening my horizon, so to speak) and for fun. This means I’m diving into Java programming (with Quarkus), some Rust programming, integration, Kubernetes and it’s various extensions, like Tekton and knative, and more. Much to learn, much to do.

This means I need to (and actually will) start blogging again! This post is step one in at least creating more blogs than in 2019 (achievement unlocked! 2020: 1, 2019: 0). Over the next couple of days, I hope to publish my first blog on Quarkus. I’m not sure what’ll be next, but I am sure you’ll read about it here!

  1. Quarkus is the most awesomemest Java framework. Even I can do things with it! 

  2. I have configured rubygems to install all gems into my home directory, not system wide.