☁️ How I use AWS S3 to host images on my blog

As I learned more about Amazon Web Services (AWS) at work, I was curious to see how I could make use of their services for my own stuff. I’ve seen the power it has in big enterprises and was keen to leverage whatever I could with my smaller projects.

WordPress

I’ve used WordPress for most of my blogging life. Although it does has it’s faults sometimes (feeling “clunky” being the most annoying thing for me), I’ve always returned to it because it just serves my purposes of this blog – to blog.

When I launched into the Pawlean 2.0 rebuild, switching from building my themes in PHP to using Next.js and the WP API, I was spoilt by the performance improvements! Since then, I’ve been keen to look at other ways that I can optimise my tradionally clunky blog.

The media library

The media library is where all your images, videos, pdf files, audio files, etc. reside. Essentially, it is the place where you upload all the different types of media files to use on your WordPress blog. This is usually stored in the disk. If you have access to cPanel or even direct ssh access, you can see this for yourself under the folder “wp-content“.

If you blog for a long time, you can see how this folder can start to build up with files over time. This results in needing extra disk space and can contribute to slow performance.

I’ve been blogging for over 10 years, with Pawlean.com online since 2015. With most of my posts heavy with media, my blog’s performance wasn’t doing too well. I was keen to look for a different solution!

AWS Simple Storage Service (S3)

“Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface.”

I always like to think of S3 as a place where you can store files (objects.) Similar to Dropbox or Google Drive, but with the ability to use the files in any way that you like including embedding onto your posts. 🖼

The benefits of S3 are endless. My favourites are it’s super cheap to use (I pay £1 every month to host all the images on my blog), it’s flexible, it’s scalable and has been designed for 99.99% availability which means it is almost always avaliable. You can read more about S3 and it’s benefits here.

There’s several ways that you integrate the use of S3 onto your blog. My thought process at the time of implementation of this was:

1. I keep the existing media files as they are in my WordPress server, and just use S3 moving forward – uploading to the console, setting the objects to public and copying the image URL. This was the easiest way, but was too manual for me.
2. I somehow migrate all the media files across all my posts, replace all the image URLs to S3 URLs and moving forward, every time I upload an image to my blog, it automatically uploads to S3. I wouldn’t have to log into the AWS Management Console and manually upload images to S3 to then embed.

Although 1) was tempting as it was the easiest route, I decided to do 2) because it felt like the best way to improve my blog’s performance in the long run as well.

Offloading media from your WordPress server to AWS S3

1) Log into your WordPress Dashboard. Head over to Plugins > Add New.

2) Install these two plugins:

• Amazon Web Services – Includes the Amazon Web Services PHP libraries, stores access keys, and allows other plugins to hook into it.
• WP Offload Media Lite – Automatically copies media uploads to Amazon S3, DigitalOcean Spaces or Google Cloud Storage for storage and delivery. Optionally configure Amazon CloudFront or another CDN for even faster delivery.

3) In the Amazon Web Services plugin, add in your Access Key ID and Secret Access Key. If you’re unsure where to get these, check out this tutorial.

4) Assuming that you’ve successfully linked your AWS account and created an S3 bucket with the correct permissions, this should be relatively straight forward. In WP Offload Media, you’ll find a bunch of different settings to go through.

My settings have been set up so that when I upload files to the Media Library (found in wp-content/uploads), they copy it to the bucket I specified. When I upload a file, by default, Year/Month is added to the image URL.

Rewrite Media URLs does what it says on the tin! It rewrites all the existing image URLs embedded on your blog to the URLs generated by S3.

Remember to tick this last option! This ensures that when you upload new files to your blog, it gets rid of a temporary copy in your WordPress server. This is actually how this plugin works: you upload a new image > this is uploaded to the server > this is copied to S3.

If you don’t tick this last option, it keeps that temp copy onto your server, which is not what we want for better performance!

5) Once you save your settings, it should start kicking into action! Wait around for a few minutes because it can take a while depending on how many images are on your blog.

Head over to your AWS Management Console > S3 and in the bucket you specified, you should start to see images being uploaded by Year/Month.

Images that are uploaded, are also automatically get different sizes which can be used for things like thumbnails or featured images for posts. Pretty neat, huh?

---

You’re done! 🥳 If you ever need to start from scratch or move your blog at all, your images will be safely stored away in S3 which makes migrations less stressful. Win.

If you get stuck at any point, please refer to the plugin’s documentation which goes into more detail and answers to some frequently asked questions.

Go and enjoy your faster blog, now backed with a highly scalable, highly available, detached media library. 😄