How to Create a Self Hosted CDN With WordPress
For this tutorial, I will be using the following:
- cPanel web hosting;
- Shell access to your hosting account;
- Apache web server with FollowSymLinks enabled;
- The WP Super Cache plugin for WordPress.
So let’s get started.
Step 1: Creating a Subdomain for the CDN
Start by logging in your cPanel account and then click on the “Subdomains” icon.
Enter the subdomain you wish to use for the CDN. For this tutorial, I am using the “webhostingshed.com” domain so I will be using the “cdn.webhostingshed.com” subdomain for my CDN:
Important: Note that the document root for the subdomain is located outside of the public_html directory. It’s important to do so in order to avoid that the “.htaccess” file located in “public_html” have any impact on your subdomain. The “subdomains” directory needs to be created at the same level as “public_html”.
If you have SSL enabled on your website, then it is imperative that you enable SSL for your CDN subdomain also. Depending on how your server has been set up by your web hosting provider, a free SSL certificate might be generated and installed automatically (AutoSSL) when you’ve created the subdomain. To verify this, simply point your web browser to https://cdn.yourdomain.com and see if the padlock appears in the address bar:
Should you encounter any issue with your SSL certificate, you should contact your web hosting provider.
At this point, your CDN subdomain should be accessible however, it’s still empty. You can still try it out to make sure it resolves correctly even though it will return an error message:
Step 2: Creating Symbolic Links
In order to make the media files accessible through the CDN subdomain, you’ll need to create symbolic links. Also known as a soft link, a symbolic link is a file that points to another file much like a kind of shortcut. Since everything in Linux is a file, you can also create a symbolic link pointing to a directory.
To do this, head back to your cPanel control panel and click the “Terminal” icon from the “Advanced” panel:
Click on “I understand and want to proceed” on the next page to launch a secure shell session:
Now you’ll need to type the following commands to create the symbolic links. For this tutorial, I’m assuming that WordPress is installed at the root of your main domain (ie.: /public_html). Of course, you need to replace “cdn.webhostingshed.com” by your CDN subdomain name:
If you have created other directories outside of the WordPress architecture, you should create additional symbolic links the same way.
Next, we’ll make sure that we can access the files through the subdomain. In this case, I’ll try to pull up the style.css file from the current WordPress theme:
If all is working fine, move on to the next step.
Step 3: Preventing Search Engine From Indexing HTML Content
In order to avoid duplicate content issues, you must prevent search engines from indexing any HTML content. To do so, create a file named “robots.txt” and insert the following content:
If you need to allow the indexation of additional file extensions, just add them there. Once you are done, upload the file into the subdomain root directory (ie.: ~/subdomains/cdn.webhostingshed.com/).
Step 4: Preventing Visitors From Browsing Your Subdomain Directory
To avoid visitors from browsing all the files available on your CDN subdomain, you need to disallow “indexes”. To do so, create a file named “.htaccess”, insert the following content and upload it to your server into the ~/subdomains/cdn.yourdomain.com/ directory:
Step 5: Forcing HTTPS Access
Unless you have SSL enabled on your WordPress site, you can skip this step.
To make sure that the visitors will access the CDN content securely, you must redirect all the requests made through the port 80 to HTTPS on port 443. Append this code to the content of the “.htaccess” file:
Now try to access your subdomain through http://[…] and see if your browser is automatically being redirected to https://[…].
Step 6: Enabling Expiration Headers
In order to optimize the browser caching of the files served through the CDN, you must append the following content to the “.htaccess” file:
Step 7: Enabling Gzip Compression
To make your website load faster, it is recommended that you enable gzip compression. This will greatly reduce the size of the files downloaded from your website. Again, append this to the content of your “.htaccess” file you just created earlier:
At this point, this what the content of your subdomain directory should look like:
Step 8: Installing and Configuring the WP Super Cache Plugin
The WP Super Cache plugin will not only cache your WordPress content into static files for faster access, but it will allow you to replace the URL to every media files with the URL to your CDN subdomain.
Log in to your WordPress dashboard and go to Plugins > Add New. Search for wp super cache using the keyword search.
Once the installation is completed, click on the Activate button and then go to Settings > WP Super Cache. I will not go into detail about how to configure WP Super Cache so I recommend that you read this tutorial.
After you’re done configuring the caching settings, click the “CDN” tab and check Enable CDN Support. Enter the URL for your CDN subdomain:
You also need to make that caching is enabled. Click on the “Easy” tab and select “Caching On”.
Step 9: Testing the CDN
One easy way to make sure that the CDN is working properly is to use our web page speed test. Enter your website’s URL and click on “Start Test”. Once the speed test has completed, scroll down to the “Waterfall” section and expand the line for the style.css file:
If everything is working as intended, the URL should be pointing to the CDN subdomain and your website should be loading much faster if you’ve also optimized the WP Super Cache settings.
Posted on Updated on by