A Shiny New Website
This is the third iteration of my personal website now and I like to think that each one has reflects a new level of understanding of how the web works. Like most people, my first was just static pages, a bunch of HTML and CSS files I copied from various places and just edited the text. The second was a bit fancier with some interactivity, enabled by a lot of javascript/jQuery. I even made a game based on this (it was a long summer and I didn't have a lot to do).
This latest version is the biggest step so far as I've started using a dynamic backend. For me, this is really exciting because it means I can start to write web applications using python, which I find so much more natural than other traditional web stacks. In this post I'm going to quickly detail how I made this website, partly so I can remember what I did when I make changes later and partly so that if anyone else is interested they can recreate it.
This has two caveats: 1) I am not a web programmer and don't claim much technical knowledge. This is just from my perspective as someone new to this; 2) This is definitely not the easiest (or cheapest) way to make a personal website and making a static website and hosting it with Github pages would make a lot more sense in most cases. Unfortunately, this is the price paid for the extra features a dynamic backend will give you.
Implementation & Hosting
The website is implemented using the python web development framework Flask and draws heavy inspiration from Miguel Grinberg's excellent tutorial. It is hosted on an Ubuntu 18.04 server rented from Digital Ocean. Their cheapest option is the 'Droplet' server which is around £5 for a month of continuous usage. As suggested in the tutorial I use a gunicorn server listening on a private port (not accessible from the wider web) and an external server (nginx) listening on the public port. If a static file is requested this is handled entirely by the public-facing server whereas if a request requires the dynamic backend this can be forwarded to the internal (gunicorn) server. The idea is to lessen the amount of requests to the backend.
Enabling HTTPS
The website is secured by the HTTPS protocol. What this means is that communications between a user and the server are encrypted and thus can't be read by any intermediaries in the network. This differs from the HTTP protocol which do not encrypt requests. Exactly how this encryption occurs is really interesting (how can we establish a secret password with a server when everyone can listen?, especially since computers can't reliably acknowledge each other!) but suffice to say this is a very deep and complicated process.
Fortunately there are two protocols that deal with all this already; the older SSL ('Secure Socket Layer') and the newer TLS ('Transport Layer Security') protocol. I used SSL, although I believe it is supposed to be depreceated now so TLS would have probably been a better choice. To enable HTTPS, one must first obtain a SSL certificate, a data file containing a public key which allows connecting clients to be sure they are connected to the correct server. This public key allows clients to check requests came from the source they were expecting rather than some sketchy intermediary. These certificates are issued by trusted authorities upon demonstration that you are fully in control of your domain. Traditionally these certification services cost but thankfully nowadays they can be obtained for free from the not-for-profit Let's Encrypt project. This is super easy and can be done near instantly using the open source Certbot tool.
Design
Anyone who knows me is well aware design is not my forte. Fortunately for me and others who only just scraped through art exams (I got a C because the tree I drew was 'cute') there are a lot of templates that can help you here. In fact these are so ubiquitous that I don't feel much need to mention any particular sites. I used TEMPLATED for my first website but this time I just thought I'd go for something much simpler and cleaner so I used a minimal example from Bootstrap. This means minimal messing around with HTML/CSS to get everything as I want it. I find with templates there's a desire to fill in all the boxes and it ends up as a crowded mess.