To have my current web page up and running as it is now, I had quite the journey. For years I desired to have a small web presence where I can occasionally write posts and tinker around with web technologies. I wanted to reduce maintainability time, hence I opted for Wordpress in the beginning. Unfortunately, I was quite disappointed. While having a nice backend to write blog posts and tons of addons, it was not what I was seeking for. Firstly, the page size was too large. Secondly, I always seemed to have way too many dependencies to other services (and I definitely wanted to be Google free). Lastly, pasting source code and writing mathematical equations was not as straight-forward as I hoped it was. With the release of Gutenberg, I finally decided to move on, as I did not like it.
The next stop were static site generators such as Hugo and Jekyll, where I arbitrarily tried the first one. While I like the idea in general, most themes did not suit my needs. It also felt like that adjusting the templates for the different themes took more effort than just writing plain old HTML and CSS, which took away the fun. Additionally, many templates still had dependencies, especially to Google Fonts. So eventually I decided to write what I needed from scratch, because I wanted to have my web page to communicate as well as encourage and strengthen the custom blog scene. Blogs like Jordan Lewis and several others add so much more value compared to blogging platforms like Medium.
To get a head-start, I chose to use water.css which is a classless template that already looks quite neat without any further adjustments. I added a custom style.css to be able to make some alterations, built a simple navigation bar and added a view-port so that the site looks a bit better on mobile devices. I also made sure that the dark theme was working correctly, because you know, it is hip. Then, I added some .html files for some content and I avoided writing any JavaScript, because for what I wanted to do, it was not required and I also wanted the page to be small and fast. The result is quite satisfying, I have a simple template file for blog posts which I can reuse and the only manual thing I have to do is to add a link to the blog overview page. What I do not like so much is copy-pasting the top navigation bar into every .html file, but I could not think of a nice solution for that and I only had to do it once, so it was not too annoying.
To complete my lists of requirements, I still had to add the possibilities to write mathematical equations and to format source code. For the former one, I originally intended to use KaTeX, but it seems that it does server-side rendering and I did not want to have any code running on the server. Hence, I went for Mathjax. For the latter one, I went for prism.js as it lets you select only those languages which you actually need.
The result is quite nice in terms of performance. For the .html content, around 3KB are required which of course also depends on the amount of content. water.css provides minified versions for the light and dark theme, which require around 2.92KB each. Additionally, around 1.26KB are taken for my custom style.css file. In the future, there will probably also be a favicon which requires a few kilobytes. All together, this is around 10 to 12 kilobytes per page request and I am quite happy with that, especially considering all the softwares I have tried before. If I need source highlighting for a blog post, that adds 2.13KB for prism.css and 18.71KB for the prism.js file. In case I want to render Latex equations, I need to add around 708.53KB for tex-chtml.js and four fonts with each having a size between 1 and 34 kilobytes, which is quite a heavy load I am not so happy with. I suppose that is the price for having a Latex renderer on the client side which does not depend on any other services.
Initially, I also wanted to add Font Awesome for some sweet icons, but its size was simply too heavy. Also, I can use fancy Unicode emojis 🍔 anyway which suit my needs quite well for the beginning 😎. With all of this, I am satisfied with the setup that I have at the moment. I might tweak some things here and there in the future and might eventually be able to focus on some content if I feel like it. Maybe I will extract the template for this web page and host in on GitHub so you can use it as well if you need. Maybe.