Step by step procedure to add Cloundfront CDN in WordPress blog with SSL certificate. Screenshot included for better understanding.
In this article we will walk you through steps where we gonna configure AWS CloudFront CDN for WordPress blog under W3TC (W3 Total Cache) plugin. We will be using basic setup under AWS CloudFront so we wont be using IAM authentication and accesses in our configuration.
See Cloudfront content delivery network pricing here.
We assume below pre-requisites are completed before moving on with this tutorial.
- You have logged in WordPress console of your blog with Admin login
- You have W3TC plugin installed in WordPress blog
- You have logged in AWS account
- You have access to change zone files for your domain (required to have fancy CDN cnames)
Without further delay lets jump in to step by step procedure to add Cloudfront CDN in WordPress blog with screenshots.
AWS certificate manager
You can skip this step if your blog is not https enabled.
In this step, we will import your SSL certificate in AWS which needs to be used with Cloudfront distributions in case you are using fancy URL (like
cdn.kerneltalks.com) for distributions instead of default system generated
You can skip this step if you want to buy SSL certificate from Amazon and dont want to use your own. If you are ok to use system generated distributions name like askdhue.kerneltalks.com and dont want custom CNAME like cdn.kerneltalks.com then also you can skip this step.
You can buy SSL certificate from many authorized bodies or you can get open source Lets Encrypt SSL certificate for free.
Login to AWS certificate manager console . Make sure you use region US East (N. Virginia). Since only certificates stored in this region are available to select while creating Cloudfront distributions. Click on
Get Started and in the next screen click
Import a certificate. You will be presented with below screen.
Fill in your certificate details in fields above. Certificate body will have your SSL certificate content, then private key and finally certificate chain (if any). Click
Review and import.
Your filled in details will be verified and information fetched from it will be shown on screen for your review like below.
If everything looks good click
Import. Your certificate will be imported and details will be shown to you in dashboard.
Now, we have our SSL certificate ready in AWS to be used with Cloudfront distributions custom URLs like cdn.kerneltalks.com. Lets move on the creating distributions.
AWS Cloudfront configuration
Login to AWS Cloudfront console using your Amazon account. On left had side menu bar make sure you have
Distributions selected. Click
Create Distribution button. Now, you will be presented with wizard step 1. Select delivery method.
Get Started under Web delivery method. You will see below below screen where you need to fill in deails –
Below are few fields you need to select/fill.
- Origin Domain Name : Enter your blog’s naked domain name e.g. kerneltalks.com
- Origin ID : If you like autogenrated value keep it or you can name it anything.
- Origin protocol policy : Select HTTPS only.
- Viewer protocol policy : Redirect HTTP to HTTPS
- Alternate Domain Names : Enter fancy cdn name you want like cdn.kerneltalks.com
- SSL certificate -> Custom SSL certificate : You should see your imported certificate from previous step here.
There are many other options which you can toggle based on your requirement. Above listed are most basic and needed for normal CDN to work. Once done, click
You will be redirected back to distributions dashboard where you can see your created distribution and its status as
In progress. This means now AWS is fetching all content files like media, CSS, JS from your domain hosting server to their edge servers. In other words you cn say your CDN zone is being deployed. Once all sync completes, its state will be changed to
Deployed . This process will take time depending on how big your blog is.
Meanwhile, your distribution is being deployed you can head back to your zone file editor (probably in cPanel) and add entries for CNAME you mentioned in distribution setting (e.g. cdn.kerneltalks.com)
You can skip this step if you are not using custom CNAME for your Cloudfront distribution
Goto zone file editor for your domain and add CNAME entry for custom name you used above (here cdn.kerneltalks.com) and point it to Cloudfront URL of your distribution.
Cloudfront URL of your distribution can be found under
Domain Name in above distributions dashboard screenshot. Its generally in format XXXXXXX.cloudfront.net
This will take few mins to hours to propagate change through internet web. You can check if its live on internet by pinging your custom domain name. You should receive ping back from cloudfront.net
Thats it. You are done with your AWS configurations. Now, you need to add this custom CNAME or cloudfront.net name in W3TC settings in your WordPress admins panel.
Login to WordPress admin panel. Goto W3TC
General Settings and enable CDN as per below screenshot.
Goto W3TC CDN settings.
Scroll down to
Configuration: Objects . Select SSL support as
Enabled and add your CNAME in below
Replace site's hostname with:
Once done click on Test Mirror and you should see it passed. Check below screenshot for better understanding.
If you are test is not being passed, wait for some time. Make sure you can ping that CNAME as explained above and your Cloudfront distribution is deployed completely.
Check blog for Cloudfront CDN
Thats it. Your blog is serving files from Cloudfront CDN now! You can open website in new browser after clearing cookies. View website’s source code and look for URLs with your custom domain name (here cdn.kerneltalks.com) and you will see your CSS, JS and media files URL are not of your naked domain (here kerneltalks.com) but from CDN (i.e. cdn.kerneltalks.com)!
To server files parrallely you can create more than 1 (ideally 4) distributions in same way and add their CNAMEs in W3TC settings.
Enjoy lightning fast loading web pages of your blog!