How I built this page.

10 Aug 2023

Some people were asking me how I built this page, and if it's hand-written. The answer is, 'kind of'.

The tech

At a high level, I rely on a little help from a tool that can manage content a little more dynamically, but the raw information is format-agnostic and served as close as HTML & CSS as a I can, with a little help in content management.

The site runs on Grav, a lightweight static site generator that serves Markdown files as content, with some PHP-esque configuration.
I am running a modified version of the Hypertext theme which serves up some HTML1.0 vibes, and some CSS for styling.

Images are resized, and compressed using ImageOptim. Videos are compressed down using a mix of online tools - I was displaying in WebM until I realised Safari devices couldn't render these correctly, so now I use MP4 as it seems to have universal compatibility.

I aim to only use media as necessary, with a target size of 30kb or lower per image, Videos under 1MB if possible. The goal is to keep the weight of each page low, and I'm planning on adding further reductions in the vein of lazy loading.

Guiding principles.

I can recall so many times that I've visited a website heralded as award-winning or cutting-edge, only to become highly frustrated as I find my cursor morphing into strange shapes, my scroll position being hijacked, unable to select content in a manner I expect. Pages so heavy that on anything but a high-speed connection, I could do nothing but wait and wait for content to appear. This is the antithesis of the web I want to experience.

Why do so many choose to force the web into strange shapes? This was something that sat deeply in my mind as I set out to create my own website.

Frank Chimero's "The Web's Grain" describes this sentiment magnificently. The web is best expressed in its mother tongue.

Page weight is also of interest and concern to me. Many do not consider their own footprint in the digital world, the invisible cost.In a time where data centres consume significant chunks of Ireland's electricity grid we face a bleak future of resource shortages. Why is the solution always to find ways to accommodate monstrous growth, rather than optimise our existing tech? You probably don't need a React app and a CDN to manage text content.

Iterations

Archive.org has archived various iterations of my site, for better or worse.. cringes

The very first iteration of my site was hosted on a University of Limerick Comp Soc server, and I wish I could find it. I was quite earnest at the time and I remember doing some cute things with CSS, like using half-height image frames to make grayscale images pop into life on hover. It was exciting to understand that web had a language that one could learn and manipulate!

For some time after this, I tried, and failed to create a meaningful pure HTML site and blog. It's not that it isn't possible, but I found that more time was spent tweaking every page to feign dynamic content was taking energy away from writing and sharing ideas, and my philosophy was overruling actual content.

I turned to WordPress for a while, and it was an excellent tool for standing up a website. I carried on with this for a while, learning how to customise themes and configure to my heart's desire, while being able to freely write without constraints.

Eventually, the challenge of optimisation came up again, and I started to think about how I could serve content without a tool. This quickly fell flat - having to write core elements such as navigation across every new HTML page I generated, and holding it all together manually, became a tedious endeavour.

I started looking at the lowest tech way to manage content more dynamically, and I came across lightweight content management systems that allowed users to store data in Markdown files and serve them as HTML content. Markdown is a wonderful format, as it can be interpreted and converted to many mainstream tools while retaining the original integrity of the data in a highly readable format.

The choice was down to Hugo, Jekyll, and Grav. I forget why I specifically chose Grav - I suppose they all could have worked in some form. Finally, my vision of low-tech, semi-automated content generation was achieved, and I haven't looked back since.

Future work

Now that I've settled on a system to run content, I want to focus on fixing up the styling and optimising it. There are still a few spacing hiccups - I relied on the 'lobotomised owl' trick a little too heavily to standardise spacing and it's caught me in a few places. I'm figuring out where I need to add more character without affecting the content-first nature of the site. It's all a bit of fun, though.

Inspirations for this site

Low-Tech Magazine - My all-time favourite website ever. Takes all the principles of lightweight, native web, still manages to look distinctly stylish, and runs off a solar powered server. An inspiration to us all for a resource-scarce future.
Anthony Hobday - Adore the simplicity of content and the stylistic choice of headline tags.
Adam Silver - Champion of making websites simple to be accessible. Great site design.
Christopher Butler - Fantastic writing on a page that focuses on content hierarchy over gimmicks.
HeyDingus - Fun use of technicolor, running on Blot.