A migration story: from blogofile to hugo

It’s been a long time since I last posted on that blog. Besides the fact that I’ve been too busy to update it, it’s also because it was stuck in 2009.

When I first heard of the concept of static site generator I was very excited, so I used the first tool that existed — Blogofile. I hacked together a site, made nice looking URL (on the nothing.to/do scheme 😉) , and made my site xhtml 1.0 compliant (as was the hype at the time), and integrated my existing dotclear theme into blogofile’s templates.

The site as it was last yesterday

But since 2009, a lot of things changed. HTML5/CSS3 has taken over the world, displays’ resolution got much better and the kind and screen size of devices on which you look at a website became a lot more diversified. The adaptive design looks were’nt fit anymore… So what was then a comfortable and easy to read blog, became an unreadable ugly website in just a few years. Thus an upgrade of the look’n feel was needed.

Then another issue appeared, since I developed the first version of my blog, I kept it up to date with blogofile with ease. But many parts of blogofile broke between v0.7 and v0.8, meaning that upgrading the engine would mean a major rewrite of the code. That made me consider engine alternatives…

Not long before I decided to revamp my blog, my friend Dimitri told me how happy he was using Hugo. I also considered other options, from Pelican to Jekyll. What eventually drove me towards Hugo has been that it featured a hundred of modern-looking themes, and that I was curious about discovering The Go language, on which I had good feedback.

And there I was, following the quickstart to compile and install the tool, browsed through the hundred themes to find the one that met the minimal requirements I had — non-compiled CSS, responsive design, focused on reading comfort, and with a hack friendly license. So, the one I found matching most of those criterias was minimalist’s theme from @rriegger as adapted to Hugo by @digitalcraftsman.

Original theme

And there the fun begun. I took all my old markdown files and moved them in the content folder. I’ve patched them to add the aliases parameter, so I could make sure I wouldn’t break the web, switched from the odd old $$code format for codes, to have proper original markdown support (I would still need to choose an highlighting strategy at some point), and that was done.

Then I went on to hack the theme to make the site header smaller, remove the “about” part on the left of the articles — this blog really is about my hacks — and moved the social-stuff icons to the top right, so they’re there but not in the way. Doing so, I had some fun implementing the blinking cursor (because <blink> forever!) and give it the same look my old Amstrad CPC6128 had.


So after some google search, I found a neat tip to make neon glow, that once a bit reduced would make a perfect case for CRT glow. Then I made the background having some green halo, to feel like the old bubbly CRT of the Amstrad, using a radial gradient as background property of the header.

.site-header div {
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%,
                            rgba(0, 180, 0, 0.2) 0%,
                            rgba(0, 120, 0, 0.1) 50%,
                            rgba(0, 80, 0, 0.3) 75%,
                            rgba(0,0,0,0.5) 100%

I also wanted to give the same texture that old CRT had, so I borrowed from that demo the pixel lines overlay (but skipped on the flicker and on/off effects… as it’d be a bit too much ☺). As sophisticated that demo looked, actually all I needed was to add:

.site-header h2::before {
    background: linear-gradient(
                    rgba(18, 16, 16, 0) 50%,
                    rgba(0, 0, 0, 0.25) 50%
                    rgba(255, 0, 0, 0.06),
                    rgba(0, 255, 0, 0.02),
                    rgba(0, 0, 255, 0.06)

To make it complete, I found:

The Amstrad font

on Fonts2u drawn by Wesley Clarke, who I thank as he made it free to use.

I finally hacked together the tag cloud, using a CSS hack, added the path within the blog within the navigation partial. And I was almost done…

Almost, because I ran into a huge issue, as reported on the hugo’s forum. My problem was that either I root my blog at /blog and all my URL are like i.got.nothing.to/blog/hack/on/stuff, or I don’t and the default URL is i.got.nothing.to/ and then the URL are like i.got.nothing.to/hack/on/stuff. What should have been an easy change, became a major wall I hit.

I finally solved that issue by adding a blog section, and a single post that will get ignored, and which will list all data. Then, I made the index page a redirect to the /blog path. And it was almost done!

I’ve also added a neat feature that enables you to edit the articles on both github or gitlab, by clicking on the logos on top or bottom of the page ! And when I do tweet about an article, you’ll be able to reply to that tweet by clicking the link below !

To make my setup complete, I had to be able to publish with a simple git push and I had that possible thanks to gitlab and the external CI runners! I only had to add the .gitlab-ci.yml which contains the hugo -d ~/www/nothing.to command to deploy the site, ran as www-data! 👌

So now, I’m happily blogging again, thanks to that blog propelled by the hamster in a wheel!