November 10th, 2019

New Server, Site Tech Updates

Brought the site over to a new server a couple of days ago. This one offers SSL out of the box - unlike the old one, which actually had the guts to charge for a LetsEncrypt certificate. In any case, the transition went pretty smooth as far as I can tell. The only issue might have been that mails to utz at this-domain may have bounced in the last days, though that should be fixed now.

After hacking together a new layout for bintracker.org last weekend, I got the itch again yesterday. So I spend the past 1½ days on upgrading the tech stack that powers irrlichtproject.de. Since launching my own site in the year 2000, I always hand-crafted everything directly in HTML and CSS. For the Bintracker site, I tried out a static site generator for the first time, since I needed some results fast. I quickly got used to the workflow, and since it was about time to implement pagination for the irrlichtproject.de front page anyway, I thought I’d give static site generation a try on here as well.

I originally wanted to use the Hakyll SSG. It would have been a nice addition to my set of frequently used Haskell tools (xmonad, pandoc, and lately shellcheck), and a good excuse to actually learn some more Haskell. However, it wouldn’t run properly on my machine due to some version incompatibilities, and sorting them out started to turn into a major hassle that I didn’t have the time or patience to sort out at this point. Maybe later.

I originally used Hugo for the Bintracker site, but found it too heavy-weight for my needs. Also, thumbs down for integrating GoogleAnalytics by default. So in the end I settled on the good old Jekyll. It may not be hip, but it works, and it doesn’t force any ominous Javascript on you. So far I’m rather happy with, so I decided to use it for irrlichtproject.de as well.

Integrating the site with Jekyll was actually a breeze. It was pretty much just a matter of dropping the assets and CSS in the right places, and porting the page structure to a default template. Can’t say I like Liquid very much (the templating language used by Jekyll), but with a bit of wrestling I was able to fix all the issues. The trickiest part was to replicate the excerpt/expansion feature for blog posts that conditionally adds a “read more…” link at the end of the excerpt. The only post on the internet that I found that explains this was pulling its code examples from some long-gone github gist, but it set me on the right path nevertheless. So here it is, for anyone that might need it.

{% for post in paginator.posts %}
  {{ post.excerpt }}
  {% capture wc_excerpt %}
    {{ post.excerpt | number_of_words }}
  {% endcapture %}
  {% capture wc_full %}
    {{ post.content | number_of_words }}
  {% endcapture %}
  {% if wc_full != wc_excerpt %}
    <a href="{{ post.url }}">read more...</a>
  {% endif %}
{% endfor %}

The idea is very simple: Compare the word count of the post content with the word count of the excerpt. If they do not match, display the “read more…” link. Unfortunately you can’t do this directly in liquid, so you need to capture the respective word counts into a variable.

Of course the content also needed some tweaks in order for it to play nicely with Jekyll. Unfortunately kramdown has a few issues with html-heavy parts inside markdown, and the other markdown renderers available in vanilla Jekyll seem a bit under-featured for my needs. So I needed to manually de-html-ify quite a few things. Also the main page needed to be broken up in order to turn it into an actual blog. Did it manually as well, which was quite a chore. In hindsight, perhaps I should have written a script to do it, though I’m not entirely sure if that would have been faster.

The site layout itself is still mostly hand-crafted CSS, though I did take some “inspiration” from Bootstrap for the new contact form that I’ve been meaning to add for several years. Also the new std.css adds some auto-generated parts from Rouge, the default syntax highlighter in Jekyll. With a few optimizations done on the hand-written parts, std.css is now 7.2 KB minified. Perhaps a better minifier could squeeze out a bit more (using minify at the moment).

The site is still 100% Javascript-free, though that might change in the future as I intend to add audio/video players at some point. There is still a little bit of PHP magic running in the background, though much of the heavy lifting is now done by Jekyll. So in theory the site should be a little faster now, though I doubt it’s really noticeable as even before everything was heavily optimized for speed.

One thing I haven’t gotten around to yet is improve the way the menu/navbar works on mobile. Most sites, especially Bootstrap based ones, just throw a ton of Javascript at you to get this done. Of course I’d much prefer not to do that. I recently implemented a responsive JS-free navbar on bintracker.org. Unfortunately I can’t just port that over, since irrlichtproject.de’s navbar is implemented in a very different manner. So I’ll need to find some more free time to tweak and experiment. There are also a few accessibility issues here and there. It’ll probably take a while till I get around to fixing those things. So in the meantime, please accept my excuses for the inconvenience.