Of course, the first post of this blah had to be the dreaded, self-referential one.
The blah is the somewhat less articulate and less self-important cousin of the blog.

The TL;DR version is: ikiwiki compiles a static website, using ikistrap to work well with the Bootstrap 4 stylesheet, for which I wrote a Solarized colorscheme.

Typography

I use Adobe's open-source Source Sans and Source Code for sans-serif and monospace text, which look nice and modern; I also use them for text editing and in the terminal. For headings, I use Josefin Sans from Typemade: it's stylish in a quirky way, yet it's readable. And it's also open!

Bootstrap

I knew from the start I was going to use some sort of canned CSS framework: I have neither the patience, the expertise, or the willingness to learn CSS to get any good result otherwise.

Why Bootstrap?

I had some good experience using Bootstrap on the previous incarnation of my homepage, but the version I used back then was already obsoleted, and, at the time of writing, Bootstrap 4 is the next Release Candidate for Bootstrap.

Moreover, ikistrap already had the templates I needed to make good use of it in my new homepage. Hopefully, I won't have to do CSS-fu again for the next few years... Overall, the experience was pretty pleasant, despite taking a long while to understand I needed to clone Bootstrap and recompile it to customize anything.

My single regret is that there is no extra markup to take advantage of Bootstrap's features (cards, carousel, ...). Perhaps I will add Ikiwiki directives for it.

Solarized

Solarized is a color palette designed by Ethan Schoonover, for console and GUI display, with either dark or light background, and good readability.

I happen to like it a lot, and I was pretty sad to discover there was no Bootstrap 4 colorscheme for it... yet. Pretty soon, I had something banged together:

// Main settings
$body-bg: $base03;
$card-bg: $base02;
$card-cap-bg: $base2;
$link-color: $blue;
$link-hover-color: $violet;
$link-hover-decoration: none;

// Navbar
$navbar-light-color: $base02;
$navbar-dark-color: $base1;

// Buttons
$btn-secondary-bg: $gray-lighter;

Unfortunately, Bootstrap 4 has the nasty tendency to hardcode #fff everywhere. I guess I have quite a bit of patching ahead of me.

Ikiwiki

Ikiwiki is Joey Hess' awesome static site compiler. I discovered it after trying Hakyll and Jekyll, and it was a breath of fresh air.

In any case, the only not-quite-standard thing I did there was a dirty trick to use the more plugin to cut off my posts !inline in the index, yet have them in full in the syndication feeds.

The solution came up while discussing this with smcv from #debian-uk: have a separate page, not_index.md, in which I generate the feeds and link them to the index:

<!-- not_index.md                                    -->
<!-- Awesome hack to have a feed without “Read more” -->
[ [!inline pages="blah/*" reverse="yes" feedonly="yes"]]

<!-- index.md -->
[ [!meta link="/not_index.atom" type="application/atom+xml" rel="alternate"]]
[ [!meta link="/not_index.rss"  type="application/rss+xml"  rel="alternate"]]
[...]
<div class="card-columns">
  [ [!inline pages="blah/*" feeds="no"]]
</div>

Acknowledgments

In no particular order:

  • Joey Hess, Ikiwiki's maintainer, my friend Lunar who made me discover it, and smcv who rubberducked my issues.
  • Mozilla's freddyb listened to my CSP/HPKP rants and suggested putting those in writing somewhere.
  • Many friends and colleagues who patiently listened to those rants over the years.