Overview

CloudFlare is a free Content Delivery Network service which allows site owners to serve static content via a CDN, though it does not handle authenticated / SSL connections on their free service. The following steps are the ones I used to create a dynamic SSL/non-SSL connection for static components.

Create a subdomain

The standard installation of MODX Revolution utilizes domain.com/assets to serve images, cascading style sheets (CSS), and JavaScript (js) files. On a CPanel site, simply access domain.com/cpanel and go to the Subdomain option under the Domains section.

  1. Utilizing an FTP client rename the assets folder to something else
  2. Create an assets subdomain in the same location as the one renamed in step 1: /public_html/assets
  3. Go back to your FTP client and delete the newly created assets folder
  4. Rename the original assets folder back to assets
  5. Check the site, as everything should be working as it was before

Create a CloudFlare Account

On CPanel this is very easy. Simply click the company's icon in the Advance section of CPanel, agree to the conditions, and provide an e-mail account.

Once this is complete, a screen showing the domain name should appear, click on the name and the site's subdomains should appear to the right.

Warning: once this step is completed Internet Explorer and other browsers may no longer present the non-SSL content, but this is only temporary.

Create a System Setting

  1. Name = cdn
  2. Key = cdn
  3. Type = text
  4. Value = //assets.domain.tld/
  5. Save the System Setting

Take special care to provide the // instead of http:// or https:// as the browser will complete the protocol for you. I would suggest your using // for all external links to avoid SSL content mismatch errors.

Create a PHP Snippet: swapSSL

The following PHP Snippet will perform the magic:

<?php
$ssl = false;

if($_SERVER['HTTPS'] == 1)  {
       $ssl =  TRUE;
    } elseif ($_SERVER['HTTPS'] == 'on'){
       $ssl =  TRUE;
    } elseif ($_SERVER['SERVER_PORT'] == 443) {
       $ssl = TRUE;
    }

return ($ssl) ? '[[++assets_url]]':'[[++cdn]]';

Essentially, this will return the MODX Revolution System Setting which matches the connection protocol. Standard connections will receive the CDN fed //assets.domain.tld/, whereas SSL Connections will be given /assets/.

Implementation

I would suggest starting on a page which is light with graphics and experiences lower traffic for the first page. Go through and find the images in the page content and change them to:

<img src="[[!swapSSL]]images/slide-1.jpg" alt="Something should be here" height="" width="" />

Make sure to call the Snippet uncached. It may be suggested to place the Snippet Call in the Template and have it utilize $modx->toPlaceholder('placeHolderName','value'); . This way the Snippet is only called once per page.

Test the CDN

After saving the page, visit it using both the SSL and non-SSL methods. The link on the images should change based on the connection.

Additionally, you can use webpagetest.org to verify the CDN's being used on the site

Now you can go through the rest of the site, starting with those pages which are the most graphics intensive. Your visitors should experience a much faster page load and your server will simultaneously have a lower system load.

Caveats

  • The site hit count may diminish due to the CDN.
  • Awstats, Webalizer, and other domain host statistics applications may no longer be accurate
  • Using Google Analytics or other third-party service should not be affected by the changes discussed herein

In this article