Dumping Flickr Pro for a quick and dirty static site using S3, Jekyll, and Netlify
Like many other olds, I have a Flickr account I’ve had forever. At some point along the way, Flickr required folks with more than 1,000 photos to buy a Flickr Pro account or you’d lose access to those photos. So I paid $7 every month for way too long. I wanted to free those photos from their Flickr handcuffs and get them online, and I wanted to do that as cheaply and simply as possible. So here’s what I did. (Note: this post assumes you have a Mac)
First, download your photos from Flickr
Go to your Flickr account page and navigate to the “Your Flickr Data” section and request your data download. It will take a day or so, but you’ll soon have access to a bunch of zip files to download.
Surprise, none of the organizational effort you put into Flickr is in these files. The concept of Flickr albums and galleries is not present in any of the data you will receive. Take a moment of silence and just keep moving forward. The chaotic disorder that your photos will be in will be kinda neat later. Trust.
Unzip all of the files into a directory and look at all that damn photographic history. Take a moment to determine if you really want to keep these. If yes, let’s proceed.
Resize ‘em
My photo archive was around 50Gb. Putting all those photos directly on a website as-is would be a bad idea, so let’s generate resized images and use those thumbnails on our photo archive homepage.
Grab this script and customize as necessary. Change “initial_folder” to the appropriate path, on line 24, change “700” to whatever size you want to use for your new thumbnails. I chose 100 since I have so many and I like to see lots of them at once. Run that script and generate your thumbnails.
Upload ’em to S3
Create a bucket on S3. Toggle all the dumb configuration checkboxes to enable public access. Oops, that’s still not enough! In the S3 console, go to the Permissions section and edit the bucket policy, and add this policy. Make sure to edit the bucket name, and yes, that policy date of 2012 needs to be used exactly.
Do yourself a favor and download Transmit. We’ll use that to upload your photos to S3, and the generous trial period will allow us to do this for free.
Create your security credentials and use them in Transmit to upload your data to S3. I’ll leave those details an an exercise for the reader and your Google-fu.
Quick and simple Jekyll site
Look up how to use Jekyll if this is your first time. Some details:
- Remove the theme declaration from your new Jekyll site — we’re going custom here
- Use these snippets on your Jekyll site
- Install FrescoJS into the site, this is a simple way to get a modal image popup on your site
- Create a Data file in your Jekyll site, which lists all the file names. Add a single line at the top of the file with the word “filename” on it, above the list of files:
ls ~/photos > jekyll-site/_data/photos.csv
Ship it
- Push your jekyll site to GitHub
- Sync up that repo with Netlify
- Use a custom CNAME if you like (I use DNSimple)
Tada 🎉
You now have a static website, hosted on Netlify, with your photos stored on S3. This is 10–100x cheaper per year than Flickr Pro (depending on how many photos you have), and I’ve found that having a huge index of 6k photos that you can click on to get a full view — is immensely more usable and fun than the Flickr UI is anyway.
Feel free to ping me with any questions you might have along the way.
