March 23, 2020

A useful tweak

On this site, I want URLs like https://my-site.com/my-page/ instead of https://my-site.com/my-page.html. It's a subtle difference, but the addresses just look a bit neater, a bit more professional, less late-1990s without a filename at the end.

Cryogen, which I use to generate this site, can do this and does this by default. I had been overriding this behaviour because it wasn't working with Amazon's S3 service, but apparently I was just doing it wrong and Amazon's S3 should be able to handle URLs like this.

My issue now was that I had already deployed the site and had to fix it on production. Here's how I did it, albeit with a few minutes of downtime:

Get the correct endpoint

Grab the endpoint from the S3 bucket

I copied the entire endpoint (including the "http://") from the properties of the bucket in S3 where my content is stored.

Edit the origin

Edit the origin in CloudFront

In CloudFront, find the distribution for the static website, select it and click "Distribution Settings", then "Origins and Origin Groups" and paste in the URL you copied from the endpoint into "Origin Domain Name", then save it.

Change the site's configuration and publishing script

The next couple of steps are a bit tricky, because we're going to change the way the site is generated pretty radically, push those changes and then invalidate the CloudFront distribution (removing all of the files and directories from the global cache). This will mean that the site is broken for a few minutes (between the push and invalidate steps). But, in my case, that is fine. I think I'm the only reader of this site! There probably is a better way.

The configuration change in Cryogen was to change the :clean-urls setting to :trailing-slash from :dirty, which was the default that I overrode at the beginning.

Also, in my .github/workflows/publish.yml file, I needed to add an argument to the S3 sync job: --acl public-read. This is actually a recommended setting, but I didn't need it previously. With this new configuration, where it creates a sub-directory for each post and page, it became necessary.

When I commit these two changes, and push to Github, the site is generated automatically and synced to S3.

And, at this point, the site was badly broken to anyone looking at it. The front page was OK, but none of the links worked. The cache didn't match up at all with reality.

Invalidate the CloudFront distribution

Invalidate CloudFront distribution

To fix that, I needed to clear the cache in CloudFront.

That was it. After a few minutes (this is still a small site), the distribution was cleared and the site began to work with better, cleaner URLs.

Tags: aws static website s3