I use Google Sheets a fair amount to catalogue stuff like my runs and reading lists. I was curious about using its API as it seemed like a fun and low maintenance way to manage content on a website. Some implementations I’ve seen use the Google Sheets API and then utilise Javascript on the client side to render the content. I wanted to avoid that because, well… it’s just not the web. After a quick search I found this simple CSS Tricks tutorial which manages it with a static site generator - Eleventy - on the server side. I’ve not used Eleventy before but it interests me as it’s based on Javascript (Jekyll, which generates this website is based on Ruby which I’m less familiar with).

After a couple of weekends noodling I managed to generate a page which displays trees I’ve catalogued in my local area using content from a Google Sheet and then photos and their metadata I’ve uploaded to Cloudinary (a digital asset management tool). Overall it was fairly straightforward. The trickiest bit was my limited knowledge of Eleventy and extending it to publish the image metadata. My Javascript skills are also rusty, to say the least, and pre-date ES6 so it was a bit of a bumpy ride however I did eventually manage to wrangle it to retrieve and display the date from the photo EXIF information. My next steps are to publish location and colours from the Cloudinary API but before all that I should probably find some time to properly get my head around Eleventy (and, of course, the interface needs a lick of paint too). It was fun to dip my toe back into Javascript and I’m interested in the potential of using Eleventy, Google Sheets and Cloudinary to manage content on other sites.