Photographs on my blog: Part I

I've had fifteen thousand iterations of this blog and exactly zero of them have had any way for me to upload photos or display images inline because I'm a stubborn idiot and refuse to use something like WordPress or Medium. This has bothered the hell out of me for some time because I'm a half-decent photographer, and I've even shot a few photosets to display with unwritten blog posts and aborted the project, sacrificing the good for the perfect.

A good chunk of the reason I wanted to build the latest iteration of this blog in React is because I wanted the ability to build a high quality photo viewing experience. I haven't built that yet, but the capability is there. Honestly, building the UI isn't the problem: the problem is media storage and curation. There's no backend with this site—it's statically generated—so I need a way to handle photo upload, delivery, and resizing without managing a server.

Going serverless

I wanted to build an application (using create-react-app, naturally) to let me manage albums and upload photos to S3, with the ability to add and store additional metadata such as EXIF data alongside photos where appropriate. I'd never had the opportunity to do so, but I was aware that you could use AWS APIs in the browser by using AWS Cognito to authenticate users and retrieve short-lived tokens for use with AWS APIs, like S3.

Once I was able to get everything configured correctly in the AWS console, I managed to get it working: authentication and upload to S3, entirely client-side. The AWS JS SDK was a pleasure to work with, and the Cognito Auth SDK for JavaScript made the credential path easy. I had one of those rare moments of delight and surprise when I got this working for the first time. So, that solved the problem of photo upload and organization.

Delivery and on-the-fly resizing

Imgix makes this about as easy as can be: you point it at your S3 bucket and then you can scale, resize, and transform your images all just by tweaking URL parameters. You pay per number of source images and then pay bandwidth on top of that. My only gripe is that there's a minimum $10/month charge, but I terminated two $5/month DigitalOcean instances in the process of getting this blog up and running, so it's a wash. The best part of this is getting zero-effort responsive, Retina images with react-imgix.

I'm still tweaking this to get optimal image sizing and delivery costs, but it's a start.

The MVP

So, without further ado, here's the first image I've ever posted to my blog, uploaded to S3 with my upload application and delivered via Imgix. It's a picture I took of Eilean Donan castle on my trip to Scotland last August: