So, I have now setup Amazon S3 and Amazon CloudFront and it looks pretty good! It has taken quite a bit of work, but I have managed to have all static files served by Amazon CloudFront.
I know a lot of other bloggers are probably wondering how they can setup Amazon S3 and CloudFront to work with their blogs so I have prepared a step by step walkthrough below.
First, lets gather a list of all files that we are going to store on amazon S3.
You should now navigate to the WordPress directory on your server. Generally, it can be located at /home/user/public_html or /var/www/ or similar.
Type in the following:
CD FilePath
Of course, replace FilePath with the actual location of WordPress on the server.
After that, you are going to want to run a query on your file system. The command listed below should be run in the SSH terminal, it will output a list of files we need to download.
find * -type f ( -name *.css -o -name *.js -o -name *.png -o -name *.jpg -o -name *.gif -o -name *.jpeg ) >> files.txt
Now we need to generate a zip file with all of our data so that we transfer it to Amazon.
Now, we are going to make a zip file. Use the following command:
zip -r files . -i@files.txt
Now you should have generated a zip file, files.zip with all of the contents we need to upload to Amazon S3.
Now, to download and delete that zipped file…
We now need to download the zip file we just created. Visit your WordPress blog (in my case, mattdsworld.com).
Simply append /files.zip to the end of the url. For example I would download the files from mattdsworld.com/files.zip.
Now we need to be patient. Let the file download completely to your desktop, in some cases this will be faster than others.
You can now delete the temporary files we created from the server. Enter the following in the command line to do so:
rm files.txt
rm files.zip
Y0u are done with your server for now at least!
Finally, its time to get everything on S3!
Hopefully you already have S3Fox and Firefox installed, but incase you don’t I have found a great video tutorial which will help you get started with S3Fox.
Look on the very bottom right corner of Firefox, you should see the text S3Fox/logo, click on it. You should see a create Bucket Symbol
. Click it. Your bucket name must be unique accross all of Amazon S3 so I recommend setting it to something like images.yourdomain.com. For example, I used images.mattdsworld.com. Once you name your bucket, click okay.
Double click the bucket you created (it will be displayed in a list below those buttons).
Now, extract that zip file you downloaded earlier. Once extracted, select all files, and drag them into the white area where your bucket was listed earlier.
Wait… You should be in the Transfer View tab. Scroll all the way to the bottom, and wait until the last object shows Completed.
Now, time to set our permissions up…
Since everything is now uploaded we are going to have to set permissions. Go back to the Remote View Tab (click on it near the top of the S3 Firefox Organizer window).
You should now see 3 folders. Click on the first folder, hold shift and click on the last one.
Now, right click over any of the selected folders and select Edit ACL.
You can click on The Green Checkmark and Red Crosses to switch them. Make sure they are setup like the picture below.
Also, be sure to check the box beside “Apply to subfolders”.
Now you can click okay, your bucket is setup!
Now, to test it out… Loading your Amazon Bucket!
For example, I would load:
http://images.mattdsworld.com.s3.amazonaws.com/wp-includes/js/autosave.js
Replace images.mattdsworld.com in that url with your bucket’s name.
If the first line reads the same as it does below, we are ready to go! If you see an XML sheet, try reapplying the permissions. If that doesn’t work post a comment below and I’ll try to help you.
var autosaveLast = ”;
Finally, I can say that all of the confusing work is over.
Time to setup WordPress to load files from Amazon S3, don’t worry, its easy!
Log into your WordPress Admin Panel, click Plugins from the menu on the left, then Add New below that.
In the search box enter My CDN and then press enter. The first result should be My CDN. Click install on the right side.
Now click on Plugins again, it should bring up a list of plugins including My CDN. Click activate to the right of My CDN.
The plugin is ready to be configured, just one more step, really!
Still under the admin panel click on settings. You should now see My CDN in the sub menu below it, click on My CDN.
Your blog’s main URL should already be entered, if it isn’t be sure to enter it here. You may want to add your website with and without the www. if it can be accessed both ways, simply enter
http://mattdsworld.com,http://www.mattdsworld.com
Replacing mattdsworld.com with your domain name of course!
Leave the “Excluding URL Patterns” textbox alone.
Now there should be 3 more text boxes below. In all of them we will enter the same thing. You are going to have to recall your bucket name one last time.
Enter the following in each box:
http://images.mattdsworld.com.s3.amazonaws.com
Be sure to replace images.mattdsworld.com with your bucket name.
Click Save Changes!
And you’re done!
If you have any problems, feel free to send an post a comment below and I will try my best to help you!
