Why My Website Looks So Awful

Well noticed: my website looks pretty, erm, “basic” at the moment. This is because I’ve been experimenting with a static site generator over the holiday period. I went for Hugo (I think the recommendation came from Robert Douglass when I was in Cologne just before Christmas).

Static site generators: simpler than a CMS

The idea behind a static site generator is that everything is really simple: instead of setting up a CMS with a database and all the deployment nightmares this entails, you can store content in markdown files and generate static HTML files from them.

For devs, apparently it’s great to integrate it into your workflow, especially if you host your website with Github pages for free.

Static site generators: I still don’t know what my editing workflow will look like

In practice, as simple as it sounds, a static site generator quickly becomes very complex.

It makes you realise how much work a simple CMS like WordPress does for you without you really noticing.

On my old website, I set up WordPress, added a nice-looking theme, and installed a page-building plugin (WP Bakery, formerly known as Visual Composer). Writing a blog article was really simple because I could log in from anywhere, and it got updated instantly. Photos were resized automatically, galleries were easy to create with drag-and-drop, and I had all the fields I needed to fill out right in front of me.

Even installing an SSG is hard work

It’s been a few years since I’ve had something resembling a developer setup on my Mac. I had to reinstall Homebrew, Git, then get stuck into Hugo. At least I didn’t have to install PHP and Apache – Hugo has its own server to build and preview content.

Building my own theme

I tried a few themes, mostly minimalistic. I wanted to make some modifications, but wanted to do it “the right way”. I found the Hugo documentation somewhat unhelpful in this regard: it doesn’t seem to differentiate very well between content creators and themers.

I ended up deciding to build my own theme: first, because I wanted a minimalistic theme anyway – so why not start from scratch? Second, because one of my motivations for experimenting with a static website generator is to have a swim in the shallow end of web development without drowning in the diving pool.

So far, it seems as though Hugo is good for this sort of application: people like me who work with the web a lot, want to keep their hand in e.g. with front-end development, but not go down the rabbit hole of devops, server admin and backend development simply to write some (S)CSS and do a bit of front-end development with a templating language that uses curly braces.

Hardly anyone actually goes on my website, so I’m not too worried about how it looks for the time being. Some freelancers don’t even have websites! It’s unfashionable to write lots of text these days, and conventional wisdom says you have to pepper everything with images. However, I’m hoping to be more text-focussed.

Page bundles

Adding images is more work than with WordPress. The simple way is to upload your images to the static folder, and link to them with conventional Markdown.

However, I have also got to grips with automatic image resizing, which is handy for a featured image. Using archetypes (a template that determines the default front-matter fields that each new piece of content contains), I have added a field for me to enter the path of a featured image.

This only works if the article is set up as a page bundle. This is a directory containing an index.md file with the markdown, and directories containing page resources such as images.

Yes, it’s a pain, but it’s a learning experience and maybe it’s a good thing to force me to think about each image I add.