Explain Amazon S3 and CloudFront Services for WordPress

Amazon – Amazon provides a variety of integrated web services , ranging from databases to content delivery network service. However, the services that are very popular with site owners are S3 Simple Storage and CloudFront for the content delivery network service

And you should know that the Amazon CloudFront service is based primarily on the use of a simple S3 storage unit, and so far, you are still using this feature. Fortunately, a new distinctive feature has been added to the CloudFront service, which I will mention later. Despite this overlap between them, each service is designed for a completely different purpose.This explanation is old. You should know that Amazon services change the way to deal with them according to the developments that the company makes for its services. If you want to complete the explanation, the matter is up to you.

Before we proceed to talk about the Amazon service, I would like to thank Brother Muhammad Al-Omari, who allowed me to try the service from his account for making this explanation. As you know, to read about something that was not an experience yourself, and a greeting to Brother Muhammad Al-Omari

I want to advise everyone who wants to use these services not to rush, because if you make a mistake in using these services, they can be very expensive and you need more expenses.

The important thing is the new feature that Amazon added to the Cloudfront service recently, which solved this difficult overlap between the two services, which is the use of Custom Origin. This method relies on downloading all files from your site directly and storing them in its CloudFront content delivery network and displaying them to your visitors instead of using the traditional method using S3

How do we use Amazon S3?

Amazon S3 service we use when we want to store backup copies or as a storage center for the images in your posts or large files that you place for downloading or video and audio files, and this service can be used as a content delivery network (CDN). Using S3 will also help your visitors access these files at a strong speed and reduce the consumption of bandwidth, and the latter is cheaper on Amazon than anywhere else, and also in terms of the cost of storage space.

You can see the prices for the service from the following page: Amazon S3 Pricing

How do we use Amazon CloudFront?

Amazon CloudFront service we use when there is a very slow site These files are for the visitor

The content here is all that is fixed, i.e. visual and audio files, images, downloads, javascript and format files, everything that comes to your mind from fixed files, and we have previously talked about the content delivery network in this post from here

You can see the prices for the service from the following page:  Amazon CloudFront PricingA simple note, I will not explain the registration method. This is their page for those who want to register for the service. The S3 page and this is the cloudFront page . You will find the registration button on the right of the page. I have not tried to register for this service before

How do we use Amazon S3 as a CDN

This method is rather difficult, as it requires a lot of follow-up and is cumbersome at the same time, and what distinguishes it is that its cost is rather low, unlike the Amazon CloudFront service. Here we will need two add-ons, one for Firefox and the other for WordPress in order to upload the files to S3 and control them as you like. Now we move to the plugins

S3Fox For FireFox Addon

Sfox is a distinctive add-on for Firefox browser, in fact, it has an FTP format. I liked it. The way to use it is easier and faster than the Amazon control panel.

s3fox s3 firefox addon - WordPress Magazine

The official add-on page: S3Fox

This video explains how to install the add-on and how to use it

Explain Amazon S3 and CloudFront Services for WordPress

Amazon S3 plugin for WordPress

This add-on automatically uploads any file that you upload to your post to Amazon S3 without going to S3Fox, which means it will do you half the work or more. The important thing is, its settings are very simple. Get the AWS Key ID,   then tick all the existing options and save the settings. If you no longer want to upload files to S3, remove the tick from File Upload

Amazon S3 Settings

Plugin Page: Amazon S3 plugin for WordPress

Upload files to S3

First, we will create a folder for the blog files using s3fox. Follow the following images:

The rights of some of the images used by hongkiat site, due to the lack of time and the tired device, I was unable to take pictures at this moment

create bucket - WordPress Magazine

In our case, we will create a folder with the name of your site, for example, cdn5.mwordpress.net, and put a tick on the place this bucket in Europe so that your site files will be placed in the strategic place, which is Aruba. After creating the folder, we will upload the files that we will need.

Second, download the wp-content and wp-includes folders to your computer and put them on the desktop so that we can delete the files we don’t need.

After downloading the two folders, do the following:

Start -- Run -- CMD
cd C:\Documents and Settings\mouad\Desktop
del /s wp-content\*.pot
del /s wp-includes\*.pot

These are the file formats that we will use to delete files that we don’t need

.php .po .mo .pot

After deleting all of them, we upload the two folders to the folder that we created using s3fox. After the files are uploaded, choose the two folders, right-click, and choose Edit ACL as shown in the following image:

edit acl - WordPress Magazine

The image is only illustrative. You must do this step for the wp-content and wp-includes folders, and the declaration must be like the following image:

s3fox change acl - WordPress Magazine

Don’t forget to check Apply to Subfolders so that the permission will be applied to all files and visitors can browse through them. This process takes a period of time depending on the files uploaded. If you want to make files that you do not want anyone to access, put a red tick on Read, for example, backup copies.

Now that you have finished uploading your entire blog files, right-click on the folder in which you put the wp-content and wp-includes folders in order to get the link that we will use as in the following image:

s3fox get link for cdn - WordPress Magazine

The link will be like this:


If you want to change it to cdn.sitename.com, just use CNAME and we have talked about it in this post from here. The important thing is whether you use CNAME or the default link, you will need to change your site URL in all the plugins and the template that you use and we will use one of the two plugins either WP Super Cache or W3 Total cache or CDN Linker lite Watch the explanation of using Google App Engine as a CDN to learn more

Here we have finished explaining how to use S3 like the CDN method, and the one who will try it will know that it is tiring with the passage of time, but it removes your hosting problems, so say goodbye to hosting problems after using it.

How do we setup CDN CloudFront

As for this Amazon service, there are two ways to use it, the first using the S3 and the second using the Custom Origin Pull, and the latter is the easiest way, which I will explain now. We move on to its settings

First, log on to the CloudFront page from here, after that we create a Create Distribution, as shown in the following image:

AWS Management Console Create Distribution - WordPress Magazine

After clicking on it, the following window will appear:

AWS Management Console Create Distribution Wizard e1314229313410 - WordPress Magazine

Choose Custom Origin, and then put the name of your site as in the image, click on Continue to move to the next step:

AWS Management Console Create Distribution Wizard2 e1314228178299 - WordPress Magazine

You can only write a comment and the rest of the settings leave them as they are, click on Continue to move to the next step:

AWS Management Console Create Distribution Wizard step last e1314228472495 - WordPress Magazine

The important thing here is to click on Create Distribution in order to add the service, then you will wait a little while until the service is fully activated. At this moment, the service status will be in the process of being activated.

AWS Management Console stat e1314228731211 - WordPress Magazine

After the status becomes Deploy, we will use the domain name in the image, which will be the replacement for all links in our blog

If you want to change its shape, as we mentioned earlier, using a custom link that we add from the CNAME control panel or your domain provider, you can review the explanation of  using Google App Engine such as CDN to learn more about how to add a custom link using CNAME

Now use one of the two add-ons either WP Super Cache or W3 Total cache or CDN Linker lite Watch the explanation of using Google App Engine like CDN to learn more

end of transmitter

Here, we have completed this modest explanation of these two services, and this is only a quick experience. I mean, I have not used them for a while in order to advise their use. It is up to you, and even I did not talk about all their features in boring detail because they require months and days of experience, and I have no energy for this service now. The important thing is that I hope that you will benefit from this explanation in the near future, God willingBrothers, if anyone subscribes to the MaxCDN service, I hope that he will allow me to try the service to make an explanation and I will be grateful to him.

If there is any question or lack of explanation, please leave a comment. And don’t forget to subscribe to our mailing list, thank you very much

Leave a Comment