Storing assets in an AWS bucket

code × November 4, 2018

🙏 I’m still ironing out the steps in this post and updating as I’m learning. So far I’ve learned that most of these configurations take (multiple) hours to fully kick in. Sometimes I wake up in the morning and things aren’t how I left them. I’m still having fun.

This is part II to Download Flickr photos in your Jekyll posts and a rundown of how I setup a subdomain that points at an AWS S3 bucket to host my site’s assets. And https, too!

Create a bucket

I started by creating a bucket on S3 to store my photos. To keep my bucket secure and allow me to test locally, I added a policy to allow my IP address access. In the next step, I’ll allow CloudFront to configure my bucket policies further.

Make it https

Next, I followed these instructions to serve HTTPS requests for my Amazon S3 bucket.

In addition to the instructions, I pointed my subdomain at CloudFront:

Secure assets to the domain

To keep my assets secure, I followed the steps on How to Prevent Hotlinking by Using AWS WAF, Amazon CloudFront, and Referer Checking (I used Approach 1: A separate subdomain).

Next, I followed these steps to allow access to an Amazon S3 bucket only from a CloudFront distribution.

Now only my site can load my content, which keeps others from hotlinking my stuff and driving up my AWS bill.

Create a custom error page

Now that CloudFront is blocking traffic to my bucket outside of my domain, I created an error page. I did this in CloudFount by clicking Error Pages and then Create Custom Error Response. From the dropdown I selected 403: Forbidden and hit Yes on Customize Error Response. I entered a response path of /oops.html which is a file I uploaded to my bucket.

Generate photo versions

For each photo, I created these versions based on the max-width of my site:

For the time being, I’m using Panic’s Transmit to sync my photos to my bucket. I’m currently working on a build script that will resize images and upload it to S3 for me (stay tuned 📺).

Replace img with picture

As a last step, I replaced all instances of the img element with picture so I could use srcset.

To implement, I decided to create an include called img.html. I used my code editor’s regex find and replace to swap out the img element for the new include in all my posts:

For markdown images:

Both regex searches keep all attributes intact, which means that I’m passing the original image’s src, alt, class attributes as variables to the include.

The include contains logic and the picture element. The include determines which size photo to display based on the classes that are passed through to the include. When I’m developing locally, my site will use my AWS bucket’s URL that my IP address can access (set by permissions when I created my bucket earlier).

You can check out the include on GitHub.

We’ll see

I’m not sure how this new journey of hosting my assets on AWS will go, how my include will change, or the future of my photo sizes. Nevertheless, it was really fun figuring out all the pieces.

Download Flickr photos in your Jekyll posts