How I built this website
Sometimes people ask me (well, one person did) how I actually author content on this site and also how I maintain and host it. Essentially, it’s a run-of-the-mill Jekyll site hosted on pages.sr.ht. The following explains how all of this came together.
Origins
About five years ago I realized I wanted to have a website again. Yes, again, this wasn’t the first time I had had a website.
I think I had my first website in the late 90s, it was hosted on xoom.com and I had to upload content to it via FTP over a 56k modem, no broadband at that time yet. We had fast internet at our school so sometimes I edited the site there. Later on I switched to hosting provided by a Finnish computer magazine MikroBitti. I stopped maintaining that site around 2005 or so, I must have been 17 or something and had more important things to worry about (like school and World of Warcraft… ok, mostly World of Warcraft).. It wasn’t interesting anymore, it mostly contained some CSS website layouts I had made.
Early 2015 I decided I wanted to write a blog. I had no idea what about, but everyone on the internet seemed to have some sort of verbal outlet for their computer things. So I joined the club, copied some Jekyll theme from somewhere, and wrote a couple of posts. Eventually I ended up deleting those, and I had actually nothing on this site, but in January 2016 I lowered the bar and started again.
It seems the most active year (up to now) was 2016, with the quietest period being the years 2018-2019. I had lots of things going on in my life around that time, and I was still holding the site to too high a standard. I was torn: because I was misusing blogging as a medium, I couldn’t blog as a journal instead I was blogging as a magazine. I’ve come to accept that if I am to blog often it needs to be an informal journal, otherwise I will set the posting standard too high and not post.
Fast forward to 2020 I ended up revitalizing my interest on this site, and this happened almost by accident. I created a microblog and then ended it, because I realized it made no sense to have a blog with an arbitrary minimum post length. Then I realized I need to actually have more than just blog posts, many of the blog posts I have are actually quite gargantuan in size.
So I started to transition the site towards the blog being, well, just an online journal of sorts. More structured content is grouped and assembled into the front page, you can read about that below. Eventually, most of the content will live outside the blog in various sections, because I think blogging as a medium should focus more on a streams-of-though type of posting instead of having informative content. I think combining the two makes it very confusing for readers.
Infrastructure
This site is a fairly standard Jekyll static website. The site is divided into two principal sections: content and blog. Posts are written primarily in Markdown. The site is versioned using Git and hosted at sourcehut, a builds.sr.ht job builds the site after every commit and then pushes the contents to pages.sr.ht.
An essential part of the content section is the _link function in Jekyll. All the hyperlinks to documents in the site are linked using that, absolute file references are not used. The link function ensures the files are there, this ensures that there are no dead links on the site. I don’t use collections anymore (I used them for the microblog), basic pages are sufficient to maintain the non-blog content on this site. They are not useful for my purposes, perhaps I’ll need them one day.
I once tried to use Org to maintain this site, but it was slow and I saw very little gain in that. It was quite painful to configure as well. Jekyll is fairly easy to hack on and the templating language is quite sufficient.
For editing, I make heavy use of markdown-mode and web-mode. Both are Emacs major modes for editing markdown and HTML, respectively. web-mode in particular is essential for HTML editing since it can handle template engines and has great structural navigation and editing commands. Markdown mode does many things, what I use the most is the ability to hide the markup (C-c C-x C-m), so it just looks like text, and hyperlinks are formatted inline so I don’t see the ugly link syntax. I also insert hyperlinks using C-c C-l since I can use links I’ve previously inserted in the same file.
Design
This page describes the design of this website. If you come here often you might notice that every now and then something changes. That is normal, because I really enjoy tweaking the smallest of things here, be it adjusting margins, adding padding, changing fonts, and so on. It’s a neverending project, I can’t tell you if the site as you see now will be how it will look like in five years. But here’s a rough idea how it looks like at the time of writing.
Most people will ask, “what design?”, as you’re greeted with the browser default font, probably a serif or sans-serif font, no colors beside the links, barely any borders or visual frills. This is by design, or the design: the design emphasizes this site’s focus on content. I want the text to be as readable and distraction-free as possible. To this end,
- the content is center-aligned and constrained to a maximum width on large screens,
- the font is black-on-white at about
16pxof height, - the navigation is at the top of the page, and also aligned to the center,
- there are no colours or background highlights unless absolutely necessary.
Part of the reason why I don’t specify any extra fonts or the like is to make sure the site works on any device possible. I also happen to enjoy browsing “unstyled” pages because it puts emphasis on content over form, although some styling is necessary to make this enjoyable. There is no need to design for responsiveness when the site mostly just text.
The stylesheet is a couple hundred lines of SCSS and mostly just deals with the formating of the navbar and images, and removing some built-in ugliness of the default browser styles, e.g., by thinning out horizontal rules to a single line.
I plan for the central index at the front page to evolve in a tree-like structure of the whole site itself, but as the content outside the blog is rather thin, it’s just a link to, well, this section.