March 10, 2020

Creating this site

I've had this domain for a few years, letting Amazon's Route 53 auto-renew it each year without actually doing anything with it. I've made a few starts, but hubris would always get the better of me. I'd start writing something overly complicated like, say, a single-page app in React (or whatever the framework du jour was at the time). I kept rediscovering the obvious: I'm too busy, and I'm rubbish at estimating what I can accomplish in my free time. I'd get 80 percent there, life would crowd in, the work would languish until some other shiny new technology caught my eye and I'd start again. A cycle of failure.

When a mostly free Sunday afternoon presented itself last week, I remembered with some chagrin that I had promised one of the charities I work with a web site. I promised this back in 2017. You already know what happened with that (see "cycle of failure") and no web site has materialised. So, I really do need to get going on this, and I figured the best way to get started on the charity web site is to practice on one of my own.

Requirements

That leads me to my first requirement: It has to be simple. I just don't have the time for complicated. Yes, static web sites are very late 1990s/early 2000s, but I don't really have the need yet for anything more fancy.

Other requirements: It has to be cheap. I don't want to be spending even tens of pounds a month for something I'm likely to stop updating after a while. (Maybe not, we'll see.) I also want the site served from HTTPS with a globally valid SSL certificate because, well, it's the 21st century and browsers are starting to get bitchy about "not secure" web sites. Finally, I'd like the site to be responsive and be usable from a small iPhone screen -- because, again, 21st century and mobile-first is becoming mobile-only.

Note a missing requirement: It doesn't have to look super spiffy. If I get the urge, I might tinker with the CSS, but if the pages are legible, and the design doesn't make my eyes bleed, then that's good enough for now.

All of these requirements apply equally well to the charity site. If this works, I'll have a pattern to follow.

Cryogen

I had recently bookmarked Cryogen, a static website generator, as something to investigate. It creates a very simple blog site with posts (like this one) and pages (like About Me). By default, pages and posts are written in markdown and then compiled into HTML that can just be uploaded directly. It's also written in Clojure, a language that I've been focusing on lately, so that was another plus.

The Readme explains how to get up and running. Basically, all I did was delete the sample pages and posts and write a couple of my own.

However, as I discovered a bit later, I also needed to make some configuration adjustments due to my chosen deployment platform: Amazon Web Services. The configuration you need still isn't documented, so I really should put in a pull request. I'll add that to the to-do pile.

Steps

  1. Create a repository on Github for the site.
  2. Use the leiningen Cryogen template to generate the site skeleton (lein new cryogen eamonnsullivan.co.uk)
  3. Clear out the sample pages and write an "about" page, an initial post and edit the configuration.
  4. Run the site locally (lein ring server) and verify that it all works.

Deployment

Amazon Web Services has a good guide for getting a static web site installed in S3. I followed that and ended up (once I had configured Cryogen to generate all of its files at the top level) with a public bucket on S3 that's accessible via HTTP.

I then followed this article on Medium to configure Cloudfront (a global caching layer) and an SSL certificate. The final bit of this document describes how to configure the bucket in S3 to only allow access via Cloudfront.

Once that was all configured, I can publish changes to the web site using the AWS command-line interface, like so (assuming I've nicknamed my account as "home" in AWS's configuration):

lein run
aws s3 cp ./public/ s3://eamonnsullivan.co.uk/ --recursive --profile home

Next steps

My next challenge is to automate updates as much as possible. I've been meaning to learn Github Actions and this is a good opportunity. Ultimately, I'd like for the web site to automatically publish each time I merge to master.

Wish me luck!

Tags: programming