Website: Creation

We live in the age of the corporate internet. Most pages are related to news from large news organizations, social media websites tracking your every move, many webstores and a whole lot of junk websites.

Today's web is bloated beyond comprehension: Huge banners, large images, a lot of wasted words, cookies, many server requests, loads and loads of javascript that no one needs, lots of trackers too.

The original internet wasn't this; it was a medium to share information and exchange knowledge. To have your own unique constructed space in the vast digital ocean.

With this blog I want to reconstruct what the internet stood for.

Requirements

I wanted something simple that could scale for a host of devices. My primary targets are mobile phones and desktop browsers. The target browser for feature support is Internet Explorer 11. My target website size is simple; it need to be transferrable in one go by a 56k modem. Since I don't want my website to use javascript, my only real option is to go for prerendering everything.

The purpose of the website itself was clear: I wanted it to be a small blog for me to write for. The content on it is mostly programming related, but sometimes also some personal stuff from time to time.

Since I don't like writing html by hand, I decided I would use markdown for my articles and have those translated to html at some point. Code highlighting is another thing I really wanted because the code is so much nicer to read that way at a relative low price in size.

All of those rules forced me to go for a simple non-bloated design.

Putting it together

I decided that using bootstrap 5 and stripping it down to the bare minimum was the best course of action for basic theming. They got the scalability right and stripping it down means I don't have to serve 260KB of css.

For code highlighting I went with prism since shiki embeds the color inside the html, which means more to serve overall. Highlightjs doesn't support all my use-cases.

First I went for showdown to generate md to html as it supported all my use-cases at first, but I've replaced it now with markdown-it.

To lower the size of the website as much as possible, I minify the html, and bundle + minify the css files using html-minifier and cleancss. That means less requests and less redundant data to transfer to the browser.

At last I had to write a static website generator to combine it all together. I opted for writing the whole thing using jsdom to get a browser-like syntax for manipulating the html code. I tried writing it using vite-plugin-ssr but the whole website was far more bloated with than without, in addition to not being able to debug the website without a web server running.

Result

I'm pretty happy with it! I only have to write an article and press the build button to get everything just the way I want it to be. Maybe I could look into replacing jsdom with a more lightweight alternative, but it works good enough for now.