Want to know how to install a CDN with CloudFront?  I did too, and after searching for days I couldn’t find one good tutorial that walked through the entire process.  After a day or two of troubleshooting I was able to get a CDN working on my site with WP Super Cache.  I use Amazon Web Services and in particular, their CloudFront and S3 service.  You may have been notified by ySlow or some other web tool, that having a CDN helps boost speeds.  This is true.  It does so by hosting your site’s files on multiple servers across the entire globe.  This allows people overseas to be closer to the “server”, and thus, shorten the time it takes to load a page.  If you host a server in the United States, than you might not see much of a difference because you were already near the server.  I saw a slight speed boost, mostly because my server is severely underpowered as it is.  At this point, hosting my content on a different server saves requests, bandwidth, and time.

And now for the step-by-step tutorial on how to setup a CDN with CloudFront using WP Super Cache in WordPress. We will be using an Original Pull method.

1. Go to Amazon Web Services (AWS) and sign up.
2. At the top of the screen, click the link, “Sign in to the AWS Management Console.”
   
3. In the secondary horizontal navigation, click on the CloudFront Tab seen below…
   
4. The yellow box below asks you to sign up for CloudFront.  Click the yellow-orange button located on the left-hand side, below this yellow dialogue box.
   
5. Follow the next couple steps and fill out all the information necessary.  AWS will call you to confirm identity.  This will be an automated massage so you won’t have to talk to a real person.  Just enter the code they provide you.
6. SPECIAL NOTE :: You will not have to pay a single cent until you have correctly setup CloudFront.  You only pay for the live data you exchange.  See the pricing section for more info.
7. Log back into the AWS Management Console.  You may already be in this screen.
8. Make sure you have clicked on the S3 Tab located in the second horizontal navigation.  (This should be the default screen for the management console.)
   
9. Under the “Buckets” header, click on the “Create Bucket” button.
10. Usually a good name for a bucket is, “cdn.yourSiteName”.  This keeps things simple with a clean name.  Finish creating this bucket and confirm.
11. Click on the CloudFront tab located in the secondary navigation.
12. Below this navigation on the far left is a button entitled, “Create Distribution.”  Click on this button.
    
13. This will prompt you with a new dialogue box, “Create Distribution Wizard.”  First, select the “Download” radio button under the section, “Delivery Method.”
    
14. In the “Select Bucket” option, find the S3 bucket you created in step 10 and click “Continue”.
15. In the second step of the Wizard you will leave most options to the defaults or empty.  First, for the options that displays, “Default Root Object”, type in, “index.php” .   Make sure this is all lowercase and no http:// or www. suffixes.
16. Next turn “Logging” ON.
17. For “Select Log Bucket” find your S3 bucket in the drop-down.
18. Finally, make sure “Distribution Status” is set to “Enabled”, click “Continue”, and “Create Distribution”.
19. You have now successfully setup CloudFront for WP Super Cache.

Setting Up WP Super Cache

1. First follow my guide on setting up WP Super Cache.
2. In the wp-admin screen, go to Settings > WP Super Cache > CDN tab.
   
3. Most of the settings will remain at the defaults. First, check the box adjacent to “Enable CDN Support”.
4. Next to “Off-site URL” type in “http://yourS3BucketName.com”. For Example, mine is http://cdn.geebart.com.  You created the name for this bucket in steps 9-11, in the last section.
5. Scroll to the bottom and click the large blue button, “Save Changes”.
6. Now we must clear the old cache.  Go to the “Contents” tab, scroll to the bottom of this page, and click on the large gray button, “Delete Cache”.  This will reset WP Super Cache to correctly display new content from the new CDN.
   
7. Click the “Preload”, scroll to the bottom of this page, and click the large gray button, “Preload Cache Now”.  This will now generate new cached files with CDN support.
8. Go to your website in a browser.  Right click on the static background of the site and select, “View Page Source”.
   
9. Find a URL/blue link that contains “http://yourCDN.com.  Click on one of these links to make sure the contents/media are loading properly.  If successful, than you have successfully implemented Amazon CloudFront CDN with WP Super Cache.

Troubleshooting

When I first installed this CDN, I did notice some errors in the wp-admin screen. Initially, I could login, but I couldn’t click on any links. I would receive database errors. Just remember to clear the cache and be patient for the entire site to cache properly. You also may need to clear the cache on WP Minify if you are using it.

For more info on troubleshooting, check out these links…

AWS Support
Other Tutorial

Feel free to leave questions in the comments sections below.