In which I describe how I built this website.
For about as long as I can remember, I’ve been building websites. My introduction to the web as a code platform was as a six-year-old with a book as thick as a telephone directory on how to write HTML for business. It, perhaps, was not the most conventional start, but I found the fact that I could build websites which documented various things around the house, and which could make things happen with basic forms and buttons absurdly cool.
In a way, that was my introduction to the personal web, albeit that none of that stuff ever made it past my local desktop. But I’ve very much grown up with a two-way relationship with the web: it is both something I can read from and write to. I love the freedom it gives you - a completely blank and interactive canvas, possibly one of the greatest artforms in the modern world. And so it seemed right that I should have a personal website.
This site, and the slick, highly automated build process which makes it happen, are far from the first iteration of this site, and along the way I have picked up some very valuable skills and lessons on code quality, maintainability and web design.
As I’m hosted on GitHub Pages, my site is and has always been a publicly archived git repo, which you can browse to see any changes over the years. Pictured above is the very first version I was able to find. The initial commit was made on the 18th November 2023, and you can explore a copy of this version of the site for yourself here [ZIP download].
A lot of this site feels very empty and lacking personality; many of
the pages are simply filler messages. The design may appear archaic, but
as I commented in a file entitled web_design.html:
Fundamentally, the purpose of this site is to give you (albeit pretty useless) information. My primary goal is to share that information with you and this site is the medium by which I have chosen to do so. I have presented it in perhaps the most minimal means possible, so as you might do what you like with it. {…} The information is the product here, the way it is packaged is merely a bi-product of the means of transmission. {…} “Old” is probably not the correct term to use here. Basic is perhaps more accurate.
This was really my first description of something I’ve felt for a long time, that the web should be effectively a structured database of all the world’s information, with a standardised format; as in, you should be able to browse the web with SQL-like commands. With this version of the site, I wanted to take out as much of the document formatting as I possibly could, and instead simply provide you with the information, regardless of the means of transmission.
This version of the site was also entirely hand-written in HTML, with no checks to ensure code quality. I remember losing a few early blogs to spaghetti-encoding, losing track of where I was in multiple nested tags.
This version still lives on in spirit in the current site however. Despite looking much newer and having a different structure (and a lot more writing), the idea of listing text-based links on the home page has stuck around to this day.
Not only does this second iteration of the site look quite different, I had made the very wise decision at this point to ditch hand-coded HTML. Instead, I decided upon using a MarkDown to HTML translator to handle the conversion (albeit still copy-pasting everything manually). Naturally, this meant that losing certain pieces of writing to the mess of spaghetti code which had previously claimed them was less likely, but the issue of inconsistent handling of files became more and more pronounced as I contined to use this method.
Around this time, I decided to take the site further and purchased
the tomprobyn.uk domain name. I felt that the site started
to deserve a little more of my time, and so I decided to completely
change the way in which it was built so that that time could be better
served writing articles on things about which I cared. In order to
remove as much of the overhead as possible from the building process, I
decided to automate the majority of it with a simple Python script,
which could take a directory containing a tree of MarkDown files, and
automatically convert that tree to a tree of HTML files, preserving the
structure.
I chose not to use a fully-fledged static site generator and to build my own for two reasons: firstly to see if I could, and secondly because static site generators are a very general class of product, and are not particularly tailored to existing processes. If you are already running a site, they can take some configuring and getting used to in order to produce useful results. The script I produced worked based on my current procedures.
Around the time of moving to MarkDown, I started to become very interested in semantic technology, and the idea of representing data in computer systems. HTML is a partly semantic means of describing a document, in that one can mark specific parts of the document as being those specific parts (ie. a title is seen by the computer as a title object, as opposed to a section of text which is larger and bold). I wished to ensure that the static site builder would reflect this desire.
In doing so, the site could now be opened in any browser, including simple text-based browsers, and the integrity of the site would be maintained immaculately (significantly more so than for a website which makes excessive use of JavaScript). The page will now successfully load on even a UNIX terminal fully intact:
I learned a lot about the use of semantic technology from this experiment, and indeed a lot about non-semantic technology. The process lead to my choice to disable JavaScript across the web, and experiencing what happens when semantic technology is not used.
I have already written about the process of updating the site generator from this point to the standard at which it is now, here, continue reading at this link.
On reflection, I feel that this site perhaps represents the best of my capabilities currently. As a personal project, it reflects me, and my opinions on technologies and it changes as I learn new things. The site has moved from being a collection of information into being more of an artform, something which both identifies with me, my views on technology, and parts of other websites which I have collected and made mental notes of whilst browsing. Ultimately, though, I feel it has acted as a laboratory for much of my philosophy around technology to grow as I have developed it, especially when distinguishing the difference between progression and progress1.
There are still a few inefficiencies which could be sorted with the site. Code can be further optimised to comply with the DRY ideology. However, this raises the distinct question, especially with regards to aforementioned philosophical points: where does one stop? This is a point with which I have been quibbling for a while and will no doubt at some point develop an article on, because as products are, these days, continually developed and updated, one begins to question: what is the ultimate goal?
progression as in moving forward relentlessly with no purpose; progress as in moving forward with much critical thought resulting in purposeful change↩︎