Serving a Dynamically Loaded Album from a Cloudflare R2

This idea came from the observation that each modification to the website requires a fresh build that takes a few minutes. I want the flexibiity to post photos to the website whenever I want it. I started exploring way to dynamically load images from a cloud storage and decided to go with Cloudflare R2 and Worker considering its generous free-tier allowance. Exploring the offering of Cloudflare definitely feels like a treasure hunt at this point but I digress.

The system consistes of two pieces of code. One is for the Cloudflare Worker responsible for returning photos from a bucket. This provides a controlled interface without exposing the bucket to the public internet. The other piece of code is a client-side Javascript that runs when the Album page is loaded. It first fetches an index of available images from the Worker and then programmatically generates each image with a caption. As much as I dislike Javascript, I have to give credits to the ecosystem of Node.js. The development of both the server-side and the client-side codes went quite smoothly. I learned to deal with CORS, which prevented the webpage from accessing my CF Worker endpoint. I also had to add my client-side js file to the exclusion list of jekyll-minifier, which completely rearranged its content for space optimization causing it to fail. In retrospect, I should have structured my code better to be more robust as the other js files did not have this issue.

Anyway, after a few hours, I got everything to work in the way I wanted. I still need to make a few improvements on the album.

• Change the vertical layout to be more aesthetically pleasing, having a bit of juxtaposition and a bit more random (for the lack of a better word)
• Create tools to make photo posting and album managing as easy possibile. I already plan to write a Share Extension for iOS, with which I can directly post a photo from anywhere Share Extension is supported.