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)
Create 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: _____________________________________
The Cloudfront URL is: __________________.cloudfront.net
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“- Create 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’“
- Get 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.
- Get 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.
- Backup 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)
- Start 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)
- Create 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. - Download 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.
- For 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”.
- For 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”"
- Test 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.
- Find 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]/” - Edit 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
- Upload 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
webserver for integrity check.
- Upload 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.
- Refresh 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
- Go 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.
- Go 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.
- If 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 !
Comments
One Comment on How to Integrate Wordpress Blog with Amazon S3 Cloudfront CDN
-
solve quick tasks earn $$ on
Thu, 29th Apr 2010 20:00
Just have bookmarked your website, and waiting for the next interesting article
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!