Website overhaul and support

I am excited to announce that I finally got around to renewing my website. I have had this domain for almost four yours now, and I have learnt a lot about programming, networks, websites, etc. This month, I was finally able to rebuild my website using the experience that I have gained over the years. Building a new version with newly chosen tools has allowed me to add a few things that I have wanted for a while.

Old tech stack

The previous version of this website was a static website. It was served by Nginx and the code was generated by Hakyll. The css was mostly copy-pasted and partially hand-modified.

Using a static-site generator like Hakyll makes it really easy to get up and running but it has some obvious shortcomings. I could never add any authentication to have some sort of admin panel for myself. I could never store any submitted information to have a contact form or comment fields, for example.

The manually written CSS had some disadvantages too. The number one biggest disadvantage of me writing CSS is that I am terrible at making anything look good.

DevOps is the most important area where I gained experienced in the last few years, and gaining this experience made me realise all the problems with the way I deployed the site. I built the site with some specific older versions (the newer versions broke my build) of tools (less) that were installed using some funky language-specific package manager (npm). I just copied over the files to a virtual private server on AWS, resulting in a big state bucket that would do the wrong thing in unexpected ways.

But now, I had ideas of how to fix these problems!

New Tech stack

This time around I wrote an actual web server. I used Haskell as the language, because of the safety aspect. Using Haskell has also allowed me to simplify the code that I used to write in templates to be much smaller. I used Yesod as the web-framework for similar reasons, and because it has all the bells and whistles that I need. These tools allow me to add features like authentication, forms, etc...

I may write some specific Yesod tutorials later, so be sure to keep an eye out for those if you are interested.

I used a CSS framework called Bulma for the style, so that I wouldn't have to write any CSS myself. That's why the site looks half decent now.

For deployment, I started using Nix. This ensured that builds were entirely reproducible, including all the necessary dependencies and specific versions of them. Using Nix, I generate a Docker image that runs the web server and contains everything that is necessary to do that. Because I used Nix to build the docker image, I could make a docker image FROM scratch which reduced the size significantly.

To have some code in this blogpost, I will show you the part of the nix code that makes the docker image. It is suprisingly simple:

dockerImage = final.dockerTools.buildImage {
  name = "site_${env.name}";
  tag = "latest";
  contents = [
    "${final.site-static}/bin"
  ];
  config = {
    Cmd = [
      "${final.site-static}/bin/site"
      "serve"
    ];
    WorkingDir = "/www/site";
  };
};

I hope you enjoy the new site!