Why This is a Great Website

This website is a great website. Unfortunately many websites I have visited are laggy, slow and frustrating to use. As I am a big advocate for simplicity, I decided to make this website different. But before discussing why this is a great website, we have to know how it works.

How Does This Site Work?

This website is entirely made of static web pages. The basis of the website is a Python build script that creates those static files. This build script is written in Python and uses the jinja2 templating engine to build the HTML files. Most of the data of the site is baked directly into the templates. Things that change more often, like the list of projects shown on the front page or the posts, come from a JSON file and a directory of markdown files respectively.

Other files needed for the site are CSS stylesheets and some images. The page has two CSS files: one for overall styling and one which is automatically generated to support styling of code blocks in markdown-based posts. The images and the main stylesheet are copied to the build directory and the code highlight CSS file is generated at build time.

The site code lives in a private GitHub repository. The page build script runs with GitHub Actions on push events to that repository. The workflow builds the site to the build directory and deploys it to Cloudflare Pages where it is then served. After creating a commit, the changes become visible in about 30 seconds.

Why is it Great?

Let's now look at why this website is so great.

Loads Quickly

This website loads quickly because it is so small. At the time of writing, the whole website is about 55 kb in size. There are also no redirects. When you make a GET request for the page you immediately receive the ready HTML page without any redirects. This makes the page ever so slightly faster by minimizing extra requests and the waiting time associated with them.

It also does not load anything external like fonts or analytics, instead it uses standard fonts that are widely available in most browsers anyway. The front page only needs two things to display correctly: the main HTML file and the global CSS file. You can test the loading speed by throttling your network speed with browser devtools. You will notice that it is still fast 😉. Try it!

No JavaScript

This website does not have a single line of JavaScript. This means that (1) it also loads on browsers which have JS disabled and (2) it consumes minimal resources. Serving static HTML files without JavaScript also means that the site is well optimized for search engines, many of which have trouble with dynamic content. This in turn helps discoverability.

On a site like this there isn't anything that would require JavaScript in the first place, yet many websites still use it. The posts are rendered statically into HTML pages and the mobile navbar toggle works with plain CSS and an HTML checkbox element. Both of these could have been done with JavaScript, eg. posts are fetched from a database by the client or the navbar button runs a JavaScript function to show the page list. But making them without JS is simpler and honestly more fun!

Accessible and Responsive

Due to having a simple HTML structure and no dynamic content, this website is also accessible. Due to its simple structure and layout it was also easy to optimize for mobile. The lack of images also helps when considering accessibility since all the information is in text, not images.

Simple to Maintain

From the point of maintenance, this site is also easy to maintain due to its simplicity and because deployments are easy to automate. Due to its simplicity, it was also easy to set up, this site was implemented in just one day. Making the website static also completely eliminates the need for any backend code. This in turn makes it very simple and affordable (in this case free, thanks to Cloudflare free tier) to host. The codebase of the site is also very small, meaning that changes are easy to implement.

Good UX

This site is about content, not about CSS. The point of the website is not to show off but to convey information. This means that for example the front page does not show fancy loading animations but tries to offer the most important info right away. The design elements of the page, like the navbar and cards, are widely used and well known elements of websites which users expect to find. If a page is full of animations and CSS trickery, it does not fulfill its purpose: to convey information.

Make it Simple

Please don't overcomplicate things. To be honest, my initial plan was to create this site with NextJS and host it on AWS or Azure. I'm glad I didn't.

An idiot admires complexity, a genius admires simplicity.

- Terry A. Davis

Now go and make your website simple.