colophon

This is my website's Colophon page, which describes my website, e.g. how it is made, what software and software libraries were used, the design and motivation behind it, etc. Originally the term Colophon is used in the context of book publishing, but it has extended to Small Web or Indie Web to describe a website. For more info on Colophon pages indieweb.org explains it quite well.

Inspiration

I took inspiration from various small personal and professional websites for mine. I initially started discovering Small Web websites on Mastodon and Lemmy and was inspired to create my own small corner on the web. If you want to start exploring for yourself, here's a nice list or use the sidebar of indieweb.org to checkout a random website. If you are feeling really adventurous, try out wander, an open-source Small Web exploration web console.

Software and Hosting

This website is built using Eleventy, a JavaScript-based static site generator.

I use NodeJS to run Eleventy and I do all the website editing (incl. content) in VSCodium text editor and Firefox browser for development. The content itself is authored in Markdown (which Eleventy transforms into HTML).

The source code and content of the website is version controlled using Git and the site is hosted on a Linux Virtual Private Server that I manage myself.

List of software libraries (npm packages) used for this site:

• @11ty/eleventy
• @11ty/eleventy-plugin-syntaxhighlight

Design Decisions

Semantic HTML with a simple Header-Footer-Main structure and vanilla, handwritten CSS (except for code highlighting). The website should be light on browser's resources. Initially only dark theme until I choose a light theme palette I like.

The reasons for my decisions above are that CSS is powerful and I know so little of it and Semantic HTML is beautiful and descriptive, yet I don't see it used as much as it should be. I chose dark theme because I find it to be easier on the eyes and I'm still struggling with choosing a nice color palette for a light theme.

I use this website to practice and keep up with vanilla CSS and Semantic HTML, as well as tiny bits of JavaScript.

The font used on this website is JetBrains Mono, which I chose to give the website the feeling that it belongs to someone who programs (and I just like monospace fonts). For actual programming I use Droid Sans Mono font.

Process

Once I had decided to use Eleventy static site generator to build my website, I got familiar with how it works and with their official starter template repository. Once I had played around with their starter project I made my own project structure based on it, with some tweaks. The structure has changed many times and content even more times than that until I settled to what I have now.

I spent quite some time on Mozilla mdn reading about CSS and HTML, and on GoogleFonts while choosing the font.

Motivation

I have some thoughts and projects that I wanted to share on web in the form of blog posts (but not really keep up a regular blog, hence not naming the page blog but notes instead). I also have found some incredibly cool small websites that I've enjoyed exploring, so I thought about making my own.

I also find myself hoarding links to all kinds of cool content on the web and wanted to have a public, personally curated link collection.

So I decided to put the above two together and publish it online.