Content delivery networks are all the rage now, so I’m looking at creating a CDN that will work nicely with my WordPress installation.
Rather than just blindly use a plugin, I want to make the code trustworthy and reusable among other blogs that I manage. Certainly the easiest way to get a CDN working on your blog is to use the Jetpack plugin from Automattic. This transparently turns the content on your blog into a CDN-delivered bowl of web content.
Some people might not want the full weight of the Jetpack plugin or to use the WordPress CDN so here we go. I’m going to step through the process that I used to get a CDN working myself.
Create An Amazon Cloudfront Distribution
I’m not going to get into setting up an Amazon account – if you haven’t done this or don’t know how you should really stop right now.
Click on the ‘Create Distribution’ button and you can configure the settings here.
First option, download or streaming? Download
Now we’re in the settings screen
Origin Domain Name: Your domain name johnreid.it
Origin ID: A unique identifier for you to find the CDN myWebsiteCDN
And that’s it! Keep the rest of the settings as default for now. We’ll change those as we work through integrating it into your website.
The origin domain name is an important part as it tells Amazon to grab the content from your website. If you have S3 buckets, a list will appear. If you want to manually upload files to a bucket then good for you! But we’re not doing that here. We’re using a technology called origin-pull.
Test The CDN
It takes a little while for Amazon to set up the Cloudfront instance, so now would be a good time to go and make a brew or have a snack. Come back in about 15 minutes.
Oh, you’re back. Well, hopefully you’ll have something along the lines of this screenshot depending on your configuration. Note the green circle and we’re good to go. Get the domain name that Amazon has assigned to you and let’s test this stuff out!
So the next step is to just check the origin-source works. Locate a file on your webserver. I’ve got a NetBeans logo right here. So, let’s compare the URLS:
My content: http://johnreid.it/wp-content/uploads/2013/07/netbeans-logo.jpg
Amazon’s CDN: http://d1my8e09gsstca.cloudfront.net/wp-content/uploads/2013/07/netbeans-logo.jpg
That’s it! Basically just replace the domain name links of your content with the domain name of Amazon’s Cloudfront domain. Amazon will automatically download the image form your server and store it on theirs. Awesome!
So now that we have this working, let’s see if we can extend this into WordPress.