How to Integrate WordPress Blog with Amazon S3 Cloudfront CDN

Since we know why it’s useful to integrate your blog with a CDN, now it’s time to technically integrate your blog with Amazon Cloudfront. What you need is only internet browser, your favourite Amazon S3 browser and a text editor.

Here is the checklist. (Tips: Just reading trough it to get overall picture, then if you want, just printout this page and start ticking the box one by one from 1 until finish)

  1. tickboxCreate a new bucket & distribution on Amazon S3/Cloudfront dedicated only for this website. Enable the logging. Enable the distribution on Amazon Cloudfront and define the CNAME that you want to use. You also need to know the Cloudfront’s domain name. CNAME is just like alias name for your domain.
    Your CNAME will be: _____________________________________spacer
    The Cloudfront URL is: __________________.cloudfront.netspacer
    You need to check above setting using Amazon’s console. For example:  this website use “statics.internetmarketingbyme.com” and the cloudfront domain is “d2jasdf78ew6gw.cloudfront.net
  2. tickboxCreate a CNAME on your domain DNS using (1) above. If you are not sure about this, just create a support ticket on your hosting company and tell them: “Please create a CNAME for ‘statics.internetmarketingbyme.com’ to point to ‘d2jasdf78ew6gw.cloudfront.net’
  3. tickboxGet a list of the image and static from the homepage of your blog: Go to Pingdom Tools, http://tools.pingdom.com, put the URL of homepage of your website  and test. Printout the result (or leave it open on your browser).Notice that you also have the total loading time from the test for your reference.
  4. tickboxGet a list of the image and static from blog post or page from your blog: Go to Pingdom Tools, put the URL of one of your blog post (the one with comment if possible) and test. Printout the result (or did it on a new tab/window on your browser). Notice that you also have the total loading time from the test for your reference.
  5. tickboxBackup the themes of your blog. Connect with FTP and just download all the file on your theme directory: /wp-content/themes/[your theme]/ into your local hard disk somewhere. Create a zip copy of the theme directory (the zip version will be the real backup, the downloaded one will be our work in progress)
  6. tickboxStart upload to Cloudfront. Start with the main image directory of your theme (usually /wp-content/themes/[your theme]/images/ – but could be different depends on your theme) also your favicon.ico (usually in root directory)
  7. tickboxCreate a file named “robots.txt” with content as below:
    User-agent: *
    Disallow: /

    This is to instruct search engine not to index your Cloudfront directory. Then upload to your bucket.
  8. tickboxDownload now the content of your upload directory. Usually it is /wp-content/uploads/. But this could be different each blog. Check on your wordpress admin page: Settings=>Miscellaneous. Tidy up the content as it may contains some “leftover” from wordpress automatic plug-in update – delete the one not necessary (js_cache folder, some *zip from failed installation) and then upload the rest to your bucket as well.Tips: no need to maintain the structure of the folder/subfolder. Just copy everything into one flat directory for maximum speed from CDN.
  9. tickboxFor all the uploads above, set the ACL for readable by public and set the HTTP Header for caching purposes. Add 2 important caching headers: “Cache-control” with “max-age=2592000, no-transform, public” and “Expires” with some distant future date, e.g: “Sat, 01 Jan 2011 00:00:00 GMT”.
  10. tickboxFor the upload above, make sure also the Content-Type field on the header of each file is the correct one for that type. For complete list of content type see this page. I have seen that sometimes the content-type is not right: e.g: a jpg image have “binary/octet-stream” instead of “image/jpeg””
  11. tickboxTest your new distribution directory on Cloudfront. For example: just type on your browser http://[your CNAME]/somepicture.gif and your browser should display the correct picture. You need to be able to successfully display any existing imaged on your browser via your new CNAME. Do not proceed until you get this result. Until this step, nothing has been change on your website – we just copy the image file to the Cloudfront but no change as yet.
  12. tickboxFind out the main CSS stylesheet for your website and edit all the reference to image. Usually just open header.php on your local copy of theme directory and find something like below:
    <link rel=”stylesheet” type=”text/css” href=”http://internetmarketingbyme.com/wp-content/themes/online/style.css” media=”screen” />
    Then open that css file, and using your text editor start replacing the image reference. The reference to image will be with “url” code. So, search and replace all reference made by “url(“. For example: Just search “url(images/” and change it to “url(http://[yourCNAME]/”
  13. tickboxEdit the reference to image on header.php, sidebar.php, single.php and footer.php to your Cloudfront CNAME. But don’t feel overwhelm if you miss one or two, it doesn’t;t matter the bulk of it has been moved to your CDN
  14. tickboxUpload to your webserver (not CDN) all the modified file. Your webserver should have all the latest file. Not all is being transfer to CDN, but even the moved one, we need to retain a copy in the
    Wordpress With Cloud

    Wordpress With Cloud

    webserver for integrity check.

  15. tickboxUpload the last final update of the main CSS an other statics file. Don’t forget to set the ACL, Content-Type, Cache-control and Expires as required.
  16. tickboxRefresh your website. Hopefully it looks exactly like before with faster access. If it doesn’t don’t panic. It could be as silly as forget to give access to style.css on CDN
  17. tickboxGo to Pingdom Tools again, http://tools.pingdom.com, put the URL of homepage of your website  and test. Compare the result with your previous printout. Pay more attention with the one reported missing/non-accessible (with red color), fix one by one all problem that listed there. Then manually update the location and reference of the rest of the list of file. Do this with one of your article URL as well.
  18. tickboxGo around to every post and page that you have and copy the image, especially the big one, to Amazon Cloudfront and change the URL at the same time. If you really don’t want to do this, that’s fine as well as you can always only do it for the new post.
  19. tickboxIf your host is using PHP 5, you can install this Amazon S3 Plugin for WordPress for seamless integration between WordPress Blog and Amazon S3 (when you upload using WordPress, the plugin will upload it to your bucket). very cool

That’s it. I hope you don’t find it too difficult. If it is just make sure your IT help be with you during this update. I would expect usually all set and done within less than 1 hour (excluding step (18)).
Good luck !

Be Sociable, Share!

 

Comments

5 Comments on How to Integrate WordPress Blog with Amazon S3 Cloudfront CDN

  1. solve quick tasks earn $$ on Thu, 29th Apr 2010 20:00
  2. Just have bookmarked your website, and waiting for the next interesting article

  3. expekt on Tue, 11th May 2010 6:37
  4. It’s always pleasure to read your posts, will back here soon

  5. Lucas on Fri, 28th May 2010 14:35
  6. I think this is what I’ve been looking for…. YAY

  7. Amazon News on Thu, 22nd Jul 2010 18:45
  8. Interesting article, your articles have all the flavors that are essential to collect readers attention.

  9. Edgar Lopez on Mon, 18th Apr 2011 0:33
  10. I had looked for hours trying to make sense to all of this, since it is all new to me. I have developed a ton of web pages and stuff like that… So, I thought that this would be a piece of cake! Wrong! For starters, when I signed up to Amazon and saw that they had buckets and other terminology that I had never heard of, I knew I was in for a for a big surprise. However, thanks to you… You have made it ALL, including the terminology so well explained that I think I can go in and proceed and achieve my goal. Thank you so much for taking the time to blog this information and specially for doing it as detailed as you have done it! Great job and thanks again!!!

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





Newsletter Subscription

Get website update right into your mail box! And rest asure we respect your privacy and will never abuse your trust with your email address.
 
SIGN UP now! It's Free..