Why does this site look like crap?

Does it? Do you really thing it looks like crap? We think it looks retro - The kind of site which wouldn’t have looked out of place in the early 2000s, when data was expensive, bandwidth was low, and (good) sites were as pared back as it was possible to be to deliver the best experience to the reader.

Since those heady days, bandwidth has improved and dynamic sites have become the norm. Individual pages are generated on the fly in response to visitors erm… visiting. This results in a heavy load for servers, increased loading times, and incredibly weighty web pages.

Visit any WordPress based site and download the webpage complete. You’ll find it comes in at somewhere between 20MB and 30MB. Now, the Crow is an old bird, fledged in the days of before CDs, DVDs or other means of bulk data storage were readily available. I was amazed when floppy disks became a thing, succeeding the tape drive on my old Amstrad CPC 464. Having a single webpage, the contents of which would fill 20 floppies, is kind of obscene.

Roughly 30 per cent of the internet runs on WordPress, and up until last night, this site did too.

Look! It had a carousel. And columns!

And why not? Size considerations aside, WordPress is great open source software. It’s free in both senses of the word, you can install it on pretty much anything, and it’s incredibly easy to use. You could generate a username and password, pass both to your locked down, technologically illiterate nan, and she would have a blog running and live within minutes, proclaiming to the world how Covid isn’t real, and grassing up her neighbours who had their grandson round for an illict slice of cake. And she can make it look however she wants with a ridiculously huge range of themes, layouts, widgets, tickers, and gizmos. Fab - so long as she keeps it updated and secure.

Because it wasn’t just the size and inefficiency of freshly generating content for every visitor which eventually drove me away from WordPress. It was this video.

In it, an attacker uses WordPress to gain root shell access on a host machine. If you’re renting a VPS, this might not be a complete disaster, but for me, hosting The Crow at home on a Raspberry Pi, along with a load of other services, it would be devastating. And then there are the security concerns which go with running all of the aforementioned themes, layouts, widgets, tickers, and gizmos.

WordPress - and The Crow in its earlier incarnation - had to go.

Jekyll is a static site generator. It runs on your local machine, and creates a site which you can dump in the root directory on your server. Alternatively, Github will host the pages for free - meaning you only need to pay for a domain name.

There is no login page. No interactions of any kind, and it is secure because of this.

The downside is that creating a website is not quite as simple as it used to be - at least when you’re starting out. There is no easy to use interface that’s hosted on the site and no back end. Pages are created from markdown files that you write in your favourite text editor - we started off in nano, but ended up using Atom - and Jekyll will update the static site pages every time we save. We can view them on localhost:4000.

Editing in Atom is a fantastic experience

That green text you see up at the top of the page is called “front matter,” and defines such things as the date, the title, author, featured image, and so on. Jekyll will pull out this information to create the site.

It took about a day for me to get comfortable creating sites with Jekyll - largely thanks to Mike Dane’s excellent tutorial series on YouTube, which will get you used to the concepts involved and give practical examples.

But Mike can only take you so far. Using his tutorial, reading the docs, and pulling down some ready-made themes will give you a good looking blog, but you actually need some experience in making web pages in the traditional way to make it look good, and the Crow’s experience in this area is pretty much limited to some basic HTML 1.0 from back in the day.

The Crow is running the default ‘Minima’ theme which comes bundled with Jekyll. By default it looks like this:

Not bad, but not quite right either

But we’ve made some changes. You will notice we have images of different sizes, different information and excerpts. The header is nice, and we’re quite attached to the colour scheme. It’s the absolute bare minimum in our opinion, and right now, we’re pushing the limits of our competence envelope.

To go back to the original question, “Why does this site look like crap?” It’s because my HTML skills are crap. They’re getting better though, and as they develop, so will this site. I’m quite happy with the default single post layout, but I’m going to be working on the front page, to make it both more functional and more aesthetically pleasing.

In the longer term, I’d like to have some kind of comments section, and some basic analytics. Nothing sinister, nothing to track you across the internet - it’s nice to know which pages are popular.

I’m not going to lie and say that it’s been a problem free journey with Jekyll so far. I’ve run into problems with images, and with permalinks - but reading the documentation helps - as does actually paying attention to what I’m doing.

I need to update the permalink to the RSS feed so that my current subscribers don’t get error messages (sorry, you may end up with your feed flooded), then I’m gong to push the pages to the Pi. It shouldn’t take long as the entire site weighs in at a mere 20 MB. It’s also hella fast to load in a browser.

20 MB. Think about that for a moment.

edit: I have columns, and have added some CSS which hides them on screens under 702px wide (because they looked even more crap). Overall, I’m pretty happy :)

---

If you like the customisations I’ve made to the template and want to use them yourself, I’ve zipped up the entire site and uploaded it Here. It unzips to ~40MB as the archive contains the static pages and images as well as the markdown files and images again.

If you use it, I’d appreciate a backlink or a mention. No obligation. Obviously.

---