Setup a CDN for Your WordPress Blog [MaxCDN + W3 Total Cache]

It's not too bad!

[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]

This is a follow-up of a few posts in the above aforementioned series and I wanted to quickly give you an idea of what it might take to install and use a CDN system on your WordPress blog.

For this activity I’ll be walking through the steps of installing and using MaxCDN‘s software in tandem with W3 Total Cache, my favorite WordPress caching system and plugin.

Although this is specifically tailored for those two systems you’ll be able to take the principles and apply them to most other systems as well.

Ready? Here we go…

MaxCDN:

Of course the first thing you’ll want to do is to setup an account with MaxCDN, a CDN provider.

The reason I’ve chosen them is that they are competitive in their pricing, have a great UI, and have provided great support for my needs historically.

Of course, you can use whomever you’d like but I recommend them without reservation.

1. Sign Up and Login

Head over to MaxCDN and get an account. Once you’ve got that figured out then you’ll want to of course login:

2. Creating a New Pull Zone

The next thing you’ll want to do once you see the dashboard is create a new “Pull Zone”. You can do that by clicking the Manage Zones tab in the dashboard:

Next you’ll click the Create a Pull Zone button:

Insert the following information as it relates to your blog:

  • Pull Zone Name
  • Origin Server URL
  • Custom CDN Domain
  • Label
  • Compression [Check Box]

See below:

Just make sure to have these things right as anything wrong will instantly break the CDN’s ability to cache.

Hit the Create button and then wait. It might take a few moments to populate. Once it’s done you can jump into the dashboard which should look something like this:

As you can see my system is being used pretty heavily! Note how many hits to the CDN and cache! This is great since it’s making the load less on the main server when it serves up content. This is a great thing!

Next, go to the Settings tab above and you’ll see the following:

Of course, you’ll want to Test IP once you’ve got it in there! It should validate like so:

This is one of the most important parts as you’ll want to make sure that you put in the right Origin IP Address.

Not sure what this is? You can find this in a number of different ways, the first being simply finding it on your own hosting admin panel – they should give you the IP Address.

Another way is to simply use Terminal on your own computer and “pinging” your domain directly:

[cc]ping www.tentblogger.com[/cc]

It should look like this:

As you can see I’ve found my IP Address! So put that in the right box.

Of course, there are some advanced settings which you can take a look at – some of you might choose to customize this area but most won’t need to touch it.

Perhaps one of the more important options listed above is the HTTP Referrer Protection which can help stop people from stealing your large files and reposting them elsewhere thus sucking down your bandwidth. This, of course, is not a good thing since you are the one that is paying for it! If you find yourself quickly working through your allotted bandwidth at incredible speeds then you’ll want to see who’s “stealing” it and stop it right quick.

3. Setup CNAME DNS Record

The next step is setting up the CNAME Alias in your DNS Zone file for your domain. This is not necessarily required because you can use the temporary domain all you want but it’s highly suggested that you do for consistency of brand and to keep the origin pull URL as short as possible.

I mean, who would want http://tentblogger.mycdn.netdna-cdn.com/post-title/my-image-is-awesome.jpg ? It’s much better if it’s just http://cdn.tentblogger.com which is a lot more clean and professional.

Depending on your hosting solution you’ll find a number of different interfaces to work with. I’ve provided a few different “looks” that you might encounter below:

DYNDNS.com's DNS Zone Manager

MediaTemple's Zone Record Manager

VPS.net DNS Zone Manager

Regardless of what it might look like the step is the same – you want to add a CNAME record with a direct link to your temporary/custom CDN URL.

4. Configure CDN in W3 Total Cache

The final step is quite simple – just add your CDN URL into your W3 Total Cache settings like so and then test it:

Testing the mirror should show a Test passed notifcation like so.

And that’s it!

5. Test It

Of course, you’ll now want to test your blog to see if it’s pulling. One of the best ways to do this is to take a look at any of your posts that has an image file and then open the direct link to that file to see if it’s pulling from the CDN instead:

Here's a post with an image in it.

All I’ll do is right-click and hit the Open Image in New Tab:

Will it work...?

And then the address bar should show a pull from the CDN:

Sweet! It's working!

Of course you can also take a look directly as your CDN URL proper and see if it’s working as well – for example, http://cdn.tentblogger.com should pull up just fine!

And that’s that.

Please let me know if you have any questions or need help at any point! Of course you don’t have to use W3 Total Cache – you can use many other systems as well including WP Super Cache!

Good luck and godspeed!

[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]

  • http://analteredreality.com Kevin

    Cool! I looked at MaxCDN before going all out Amazon…I could never figure out their pricing. Do you pay for storage or bandwidth or both? What does the $39.95 get you?

  • Jeswin

    Awesome article. I have a shared hosting site but also have CDN. Per your other article about W3TC, I should then use the WP Super Cache instead with CDN to best serve my blog?

    • http://john.do John Saddington

      that would be great!

  • http://mobilethemesworld.net/ Mobile Themes World

    Thanks for this great tutorial

    • http://john.do John Saddington

      sure thing …!

  • http://www.nectareal.com Greg

    I found your post extremely helpfull as last week Im set everything up and all went well for 2 days!

    Then my blog did not show correct.Simply put after Sat-Sun working it out:I had the wrong IP address with MaxCdn

    Really important to stress that!!!

    Today7 all should be well and with luck it will stay that way for my readers and me

    Thankyou
    Greg

    • http://john.do John Saddington

      awesome job greg! thanks for using it! make sure to share it with others!

  • http://goinswriter.com/ Jeff Goins

    Do you have to pay to set up a CDN?

    • http://analteredreality.com Kevin

      For most there’s no upfront cost. You pay at the end of the month for the resources you used. Amazon has a free tier. If you can stay inside the constraints, you won’t pay a dime. :)

      • http://john.do John Saddington

        you use amazon kevin?

        • http://analteredreality.com Kevin

          Yup. For a long time. S3 and CloudFront.

          • http://john.do John Saddington

            that’s right. you told me that.

    • http://john.do John Saddington

      kevin is right. you don’t have to pay to set it up but you might have to pay in advance for some bandwidth.

  • http://www.nectareal.com Greg

    I have fol,lowed tutorial to the letter,
    My site loads fast however when I come to test it by right clicking an image/open new tab or window it does not show that it is pulling from cdn
    I had this the first time I attempted a week ago.All was great for a day!Then disaster…………….Lost feed,site crashed,etc,etc

    Is there anything you might recognize and what to do to put right

    Regards
    Greg

    • http://john.do John Saddington

      hmm. you follow the instructions well? I wonder if there was a cname issue or dns issue?

  • http://www.nectareal.com Greg

    Thanks John,

    Actually I discovered where the problem stemmed from.
    It had to do with my minify settings in W3 Total Cache

    I have since disabled minify and changed to WP-Minify plugin

    All now seems to work and images are being called from my MaxCDN Pull zone

    Important to note is that this can cause msevere havoc to a site if not configured correctly

    Greg

    • http://john.do John Saddington

      minify has had some challenges. i think he’s fixing it.

  • Chris Langille

    Is CloudFlare a CDN?

    http://www.cloudflare.com

    • http://analteredreality.com Kevin

      Not really…CloudFlare uses nginx (web server)/Varnish/Squid (I don’t know what they’re using to cache everything, but it’s probably one of those 2) to create a cached copy of your website and then serves that to increase load time.

      • Chris Langille

        Thanks Kevin. I recently signed up for their free plan, and along with using WP Super Cache, my page load time is amazingly fast now. Although now I think WP Super Cache is messing up my RSS feed somehow.

      • Chris Langille

        Kevin,

        If I used MaxCDN, would I then not need CloudFlare?

        Which one would you say makes the site load faster? I currently am using WP Super Cache in conjunction with Cloudflare, and my site seems a bit faster than before, but just like every other site owner, I want it to be blazing.

        Thanks in advance for any advice you can drop on me!

        • http://john.do John Saddington

          i don’t have experience with cloudflare… just maxcdn and some others.

  • zimbrul

    Great article and will help me to set up the CDN. After some researches I ve decided to go with MaxCdn too.
    What I don t understand is the part with Setup CNAME DNS Record…do you do that within CDN control panel or elsewhere?

    • http://john.do John Saddington

      that’s in your hosting provider.

  • sandeep

    hi friend i used this and it works but problem when i’m creating new post then its THUMB does not show i changed upload directory but not word.
    please tell any solution
    my cdn url is:
    cdn.mysite.com [self hosted]

    what should be = wp-content/uploads folder path

    if any solution please mail me also

    sandeep.tanwar6@gmail.com

  • Vlad

    Hey, thanks for the post, it made a few things quite clear.

    I set up the CDN as per your post, but I have 2 questions:

    1. Do I have to do anything else, or the “mirroring” of my site is done automatically?
    2. Whenever I add new content or update the content I have, are there any steps I have to take to make sure that the website looks the same across the CDN?

    Thanks a lot!

    • http://john.do John Saddington

      it all should happen automatically.

  • Ryan Imel

    Just wanted to say thanks for putting this together, John. I’m excited/ashamed to say I just now have a CDN set up for WPCandy, and it was much simpler than I though it would be. Thanks for laying it out so simply here :)

    • http://john.do John Saddington

      dude, you’re so awesome! keep it up!

  • http://stylebykelly.com Mark

    John, I’m having some trouble…

    I setup my server at d30e6wo84ph9ju.cloudfront.net and it seems to mirror my site at stylebykelly.com just fine. But then when I turn WP-super-cache caching on, everything breaks. It’s like the css and files aren’t loading. What did I miss?