I’ve had an itch for a while to create my own photoblog site. Flickr is convenient, but it doesn’t feel like your own site, and you can’t style it the way you would like. I’ve tried other photo hosting options, but they have the same kinds of issues. Lately I’ve wanted to host my own stuff in my own way, using — as far as possible — simple frameworks that I understand and can maintain. I have been working on it for a while, but I’ve finally got my Hugo-based static photoblog setup to a presentable state, and made it public. Here’s how it works.

My basic idea was as follows: I would write a Python script (or set of scripts) to process exported images offline (locally, on my own computer). These scripts would use the wonderful ExifTool to pull embedded EXIF metadata from each of the images, then write them to YAML metadata in a Hugo content file. Each content file would essentially be mostly metadata, which I could then use in specially-constructed Hugo templates, in order to present the files and their related information. The image files themselves would be hosted on an AWS S3 bucket, and the source URLs in Hugo would be configured in the config file, so that if I changed my mind about where to host them, I would just need to update the URL in the config file and rebuild the site to rewrite all the URLs. If you’re curious to see the details of each of the setups, you can go and look at my Hugo source files and the photo2hugo python scripts.

It is all fairly simple really. I use tags (pulled from EXIF) to add a layer of thematic grouping, and albums to group together particular photo-taking events (or collections, like photos of my cats). Otherwise, the home page presents thumbnails of all the images (paginated), and you can click on each one to view it on a single page, with some extra information about the shot (again, pulled by the script from EXIF, and embedded in the YAML metadata of the content file).

One thing I have wanted for a while is to be able to write essays or posts, which are mainly images grouped together, but with some explanatory text around them, to explain what I was aiming for when I shot them. You may think ‘isn’t that what you do on this blog?’, but in my mind, the balance between words and images is different in each case. On this blog, I use images to illustrate my words, with the main emphasis on the writing. On the photoblog, I intend the words to expand on the images, with the main emphasis on the images.

The whole process goes like this:

1. I process my photos in Capture One Pro, exporting my selected images to a folder on my desktop, embedding EXIF data in each image, and naming and sizing the image files using Capture One’s Process Recipes.
2. I run my photo2hugo.py script on the images (the source and destination folders are defined in a config file), which creates a Hugo content file for each image, writing the EXIF metadata to the YAML metadata block at the top. When the script runs, it asks for an album, so if you export files in thematic groups, you can assign them to albums at the same time. At the moment, I need to create the album metadata manually, to set the description and cover image.
3. Once the Hugo files are created, I optimise the image files (stripping out the EXIF data, optimising the JPG file, and so on), then upload them to my AWS bucket.
4. I then run hugo server locally and check everything is as I want it, editing the files if needed, and then commit and push the changes to GitHub, which triggers a Netlify build.

It’s a work in progress. Most things are how I want them, but I need to tweak the stylesheet a bit to optimise the presentation for different sizes of screen. However, I have been very pleased with a new CSS framework I came across: Tachyons. It’s a bit of an odd framework at first glance. Instead of doing what other frameworks like Bootstrap do, and defining holistic styles for buttons, headings, tables and so on, it provides atomic classes to control each aspect of an element. For example, the class mr-3 applies a 1rem right margin. This seems bizarre and very repetitive if you are used to the usual way of either writing CSS or using a CSS framework, but it is incredibly easy to get the result you want, without having to deal with mind-bending problems created by the CSS cascade. I’m quite a convert!

I will also investigate adding static comments using Staticman, but I haven’t yet got my head around how to do that. I do know that I want to ditch Disqus though, which is getting increasingly intrusive, and injecting ads and pushing all sorts of other unwanted stuff on to users. If I get Staticman working on the photoblog, I will steel myself for the task of converting existing Disqus comments on this site to the correct format, and then switch to that here.