A Content Distribution Network, commonly known as a CDN, is a large system of web servers deployed across multiple data centers present in different countries around the world. The main goal of a CDN is to serve content (images, video, scripts, CSS etc.) to website visitors with high performance and availability round the clock.
Step 1: Create your Custom CDN URL
In order to use a CDN with your WordPress Blog, you need to create a CNAME Record (Step 2 below) in your web hosting control panel (cPanel, Plesk etc.). For successfully creating a record, you need to first get a Temporary CDN URL from your MaxCDN or CloudFront account.
Note: In this tutorial we will be using our Custom CDN Domain URL as cdn.yourdomain.com. You can always use some other keywords in it like files.yourdomain.com, nickname.yourdomain.com etc.
How to get Temporary CDN URL from MaxCDN?
Follow these steps in order to do so:
1. Login to your MaxCDN Account, click on Zones and then click on Create Pull Zone Button:
2. On the immediate next page, you are required to fill following information:
- In the Pull Zone Name field, enter anything like your Blog Name or your Nick Name.
- In the Origin Server URL field, enter your blog’s Homepage URL with http:// and www. If there’s NO www in the URL, then no need to enter it.
- In the Custom CDN Domain field, enter the URL (sub-domain) using which you want to serve your blog’s content using a CDN. NO need to add http:// and www here.
- In the Labels field, enter anything of your choice or leave it blank.
- Check mark the box in front of Compression. By enabling compression, your blog’s content will be Gzipped. Gzip compression is applicable for text, html, js, css and xml files of your blog.
3. Once you have entered all the above mentioned details accurately, click on Create button and the server will start provisioning a Pull Zone Record for your account. On the next page, you will get your Temporary CDN URL, which will look something like:
Note: Above PQR and XYZ will depend on your MaxCDN’s Account Information and the information you have entered while creating a Pull Zone.
How to get Temporary CDN URL from CloudFront?
Follow these steps in order to do so:
1. Login to your Amazon CloudFront Account, click on Distribution under Navigation and then click on Create Distribution button:
2. The next step will ask you to select your preferred delivery method. Here you need to select Download Distribution and click on Continue button:
3. The next page will ask you to enter/select lots of details so that your Download Distribution can be configured:
- In Origin Domain Name, enter your blog’s homepage URL with http:// and www. If there’s NO www in your URL, then no need to enter it. By entering your domain in this field, you are instructing CloudFront’s server from where to fetch your blog’s content?
- Enter anything of your choice in Origin ID. In this field you are actually describing your origin and its value lets you distinguish between multiple origins in the same distribution. Keep in mind, the value must be unique for each origin.
- Select HTTP under Origin Protocol Policy. By selecting HTTP here, you are instructing CloudFront’s server to connect to your origin using only Hypertext Transfer Protocol.
- Enter 80 in HTTP Port, which will be the port that the origin listens on.
- Enter 443 in HTTPS Port or Leave it blank. This will only matter if you have selected Match Viewer in the Origin Protocol Policy.
Default Cache Behavior Settings:
- Select HTTP and HTTPS under viewer protocol policy.
- Select Use origin cache headers under object caching.
- Minimum TTL (Time to Live) will be zero.
- Select None (improves caching) for forward cookies.
- There’s no need to enter anything in white list cookies.
- Select No (Improves Caching) for forward query strings.
- Select No for Restrictive viewer access (Use signed URLs).
Under Distribution Settings, enter cdn.yourdomain.com in Alternate Domain Names (CNAMEs) field and leave everything else to their default values:
Once everything is set, click on Create Distribution button present at the bottom of the page and you will get your Temporary CDN URL, which will look something like:
Note: The alpha-numeric string in above URL will be unique for your account.
Step 2: Create CNAME Record in Hosting Control Panel
Once you have obtained your Temporary CDN URL, you are now required to create a CNAME Record in your hosting control panel. If you are using cPanel, then following are the steps to do so:
1. Login to your cPanel Account and click on Simple DNS Zone Editor under Domains:
2. On the next page, select the domain for which you want to create CNAME record and you will see Add a CNAME Record:
- Enter cdn.yourdomain.com in the Name filed.
- Enter the Temporary CDN URL that you obtained from MaxCDN/CloudFront in the CNAME field.
Note: There’s NO need to enter http:// and www.
3. Click on Add CNAME Record Button and cPanel will instantly associate your Record with your domain.
Step 3: Configuring CDN with W3 Total Cache
Once you have create a CNAME Record in cPanel, we are now ready to set up your CDN account with W3TC Plugin for WordPress:
1. Install the plugin for your self-hosted blog and go to General Settings. On this page select Enable CDN and then select either NetDNA/MaxCDN or Amazon CloudFront from the drop down menu under CDN Type:
2. Now go to CDN Settings page of the plugin and enter your custom CDN URL i.e. cdn.yourdomain.com and select Auto (determine connection type automatically) for SSL Support.:
Click on Add CNAME and then Test NetDNA/MaxCDN. If the connection test between your server and the CDN server is successful, then you will see Test Passed Message in green:
Click on Save all Settings button to save your configuration details. You can also see MaxCDN in action on DTT.
Important Note: When you first land on the CDN page, you are required to authorize W3TC with your CDN Account. For this just click on the authorize button and you will be taken to this URL. Login to your MaxCDN account and you will get your authorization key in format of alias+key+secret. Example: dailytechtuts+abc897asd12a7sd+123a7sd5:
- Enter your Amazon AWS Account’s Access Key ID and Secret Key (See Note below).
- Your blog’s home URL will be the Origin (selected by default).
- Select Auto (determine connection type automatically).
- Enter your Custom CDN URL i.e. cdn.yourdomain.com in Replace site’s hostname with field and click on Add CNAME Button.
Click on Test CloudFront Distribution and if the test is successful you will see Test Passed Message in green:
Click on Save all Settings to save your configuration details.
Note: In order to generate your Access Key ID and Secret Key, head over to this link and click on Create a new Access Key:
Everything is set now! Wait for at least half an hour and your blog’s content will start getting served from CDN servers.
- Some webmasters have reported broken site (No CSS and Media Content) or blank white pages, just after enabling CDN for their blog. This happens because the data from your hosting server is being sent and stored on CDN servers worldwide. It may take up to 1 hour before you see your site working normally again.
- If your site is broken even after 1 hour, then there’s some problem with your hosting account configuration. Open a support ticket with your web host and tell them about the problem you are experiencing with CDN.
- Before writing this tutorial I have successfully tested both MaxCDN and CloudFront with W3TC.
In case you are experiencing any problem, feel free to leave a comment below and I will try my best to help you.