Simple image hosting for Static Sites

This is another follow-up blog post to Static Site Generators & the IndieWeb, the other one being Social connectivity service for IndieWeb.

I am building things to make independent web publishing (the IndieWeb) easier. Lewis Denham-Parry and Salman Iqbal are from Cloud Native Wales and have offered to give some pointers to help me build them with cloud native technologies.

One of the big problems I have with my own Hugo static site forestgarden.wales is hosting the images. I currently use Flickr, as I can upload garden photos from my mobile easily. However, I don’t think they’re keen on hotlinking and I’m not keen on trusting all my photos to a 3rd party that is probably selling my data.

Unfortunately, I can’t find a cost-effective alternative. The closest I’ve come is Cloudinary, which has great functionality, but their free tier only has 10GB storage, then after that it’s $99 a month!

So, the solution is to roll my own solution. This is a wish list:

  • Upload photos from mobile
  • Option to upload low-res photo from mobile
  • Upload progress indicator
  • Capability to resume interrupted uploads
  • Images automatically resized to presets
  • Option to customise presets
  • Metadata: title, description, tags, EXIF data
  • Simple web interface, thumbnails listed by date
  • Simple search facility
  • URL-based options eg /photo-name.jpg & /photo-name-small-320.jpg
  • “Click to copy” URL

This is a screenshot of Flickr’s size presets:

Screenshot of Flickrs all sizes presets

And here is a screenshot of the “upload low-res photo” from the iPhone:

Screenshot of iPhone, showing options to resize image

Stack

I have no clear idea! I was thinking of a very simple Gatsby frontend, as it’s a Progressive Web App out of the box, and there are ways to resize images in browser. I think it would also make sense to use React functionality for an upload indicator and resuming interrupted uploads.

An alternative is to use Functions as a Service (FaaS) to process the image resizing.

As for where the images are uploaded, I was thinking of cloud-based Object Storage such as Amazon S3.

Workflow

  1. Take photo on mobile
  2. Upload photo
    • Full-res on wifi
    • Lo-res on mobile
  3. Create post
  4. Copy & paste title, alt text & URL from web interface

Some sort of conclusion

A lot of this work is already being done by Netlify CMS, where there is an issue to Host images using a 3rd party service, relating to Backend restructure - Integrations. I think my energy would be best suited to supporting these efforts rather than creating a behemoth of my own!