This Website

Evolution

Evolution of my personal website to the current version

I first did a personal web site in the 1990s - it’s mainly an online resume, and I think it was created in pure HTML without any CSS or Javascript, and uploaded via FTP to my dial up internet service provider (I don’t think they exist any more).

I remember it was hard to edit HTML using a text editor. In 1996 Microsoft acquired a company called Vermeer and launched FrontPage, a WYSIWYG HTML editor that made editing web pages almost as easy as using a word processor. I liked the concept, except the HTML generated by FrontPage was really ugly and full of non standard markups.

A year later, Macromedia (since acquired by Adobe) launched a product called Dreamweaver, which allowed you to edit vanilla HTML but has a preview feature that lets you see what the rendered result would look like in real time. It also checks the HTML for errors and highlighted the code. It’s the precursor of the modern web editor/IDE.

I really liked Dreamweaver, but never had time to create a website on it. It was still too hard to create HTML, CSS, and Javascript.

In the 2000s I created a few websites on Google Blogger, notably a travelogue of my Lord of the Rings New Zealand Tour 2004 and my Trip to Japan 2008.

Blogger made it easy to create websites without using HTML. But I would have liked more flexibility and the ability to create my own design rather than using one of the pre-existing themes.

Also in the 2000s, web content management systems became increasingly prevalent. These systems not only provided an environment for creating web sites without using HTML, but they managed the entire process including approvale workflows, provided access control for authors and viewers, and stored the web content in a backend database, which allowed dynamic functionality.

The most widely used web content management system today is WordPress. I started creating websites in WordPress around 2016 or so. I liked the ease of use and flexibility of WordPress, and the rich ecosystem of themes and plugins. It seemed like I could almost do anything in WordPress.

However, WordPress requires a server to run, which I can either deploy myself or use a hosting provider. I started by using HostGator which offered cheap hosting plans and unlimited storage, but I discovered they were slow. I ended up deploying my own server running Plesk on AWS.

In 2020, during the COVID-19 pandemic when much of the world was in lockdown, I decided to finally learn modern web development. I had been trying to avoid it my entire life, because I hated Javascript. I tried looking at alternatives: Python with Django or Flask, Go, ASP.NET and C#, F#, but at the end of the day everyone I spoke to just said “Suck it up, and just learn Javascript.”

Even with technologies like WASM, which is in theory allow you to write in any language you like (provided it can be compiled into WASM code), standard HTML, CSS and Javascript is still the best way to create a web site. It has the richest ecosystem and the broadest browser support, and fastest load times. In these days when Google is starting to rank websites based on their performance, that actually mattered.

So what exactly is modern web development? It’s basically HTML, CSS and Javascript but augmented with web and UI frameworks and modern build tools and development environments. Progressive Web Applications written in JQuery and AngularJS was popular 5 years ago, but now its static site generation, serverless hosting and backend microservices and APIs.

I started off by learning React, and using UI frameworks like Bootstrap and Bulma. Then I experimented with static and dynamic site builders like Gatsby and NextJS.

I built several websites using Gatsby and NextJS, but ultimately both are quite complex and hard to build in. It was difficult to integrate vanilla JS packages into them, there is a lot of work to build a fully functioning blog site.

Frustrated, I started going back to basics and playing with static site generators like Jekyll and Hugo. These allowed me to create websites using vanilla HTML, CSS and Javascript. Imagine, the very thing I was trying to avoid (writing raw HTML, CSS etc.) turned out to be easier and simpler than any other option. But Jekyll and Hugo were also quite cumbersome to use, requiring mastery over a moustached templating language which always end up limiting and frustrating for me.

The current version of this website is written in a brand new Javascript based static site generator and framework called Astro - Version 1.0.0 was released on 9 August 2022. I started by creating a prototype in Jekyll and Bootstrap, then a functional pilot usin Hugo. When I discovered Astro, I realise how powerful and easy to use it was, and managed to write most of the code that powers this website (excluding content) in less than 1 month.