Authored on
<div class="alert alert-warning w-75 mx-auto">Much has changed since this article was created in 2013. Now SSL is standard, but there are several other benefits to Cloudflare which I will discuss in a later article.</div>
<h2>Overview</h2>
<p>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.</p>
<h2>Create a subdomain</h2>
<p>The standard installation of MODX Revolution utilizes <code>domain.com/assets</code> to serve images, cascading style sheets (CSS), and JavaScript (js) files. On a CPanel site, simply access <code>domain.com/cpanel</code> and go to the Subdomain option under the Domains section.</p>
<ol>
<li>Utilizing an FTP client rename the <code>assets</code> folder to something else</li>
<li>Create an assets subdomain in the same location as the one renamed in step 1: <code>/public_html/assets</code></li>
<li>Go back to your FTP client and delete the newly created assets folder</li>
<li>Rename the original assets folder back to <code>assets</code></li>
<li>Check the site, as everything should be working as it was before</li>
</ol>
<h2>Create a CloudFlare Account</h2>
<p>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.</p>
<p>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.</p>
<p>Warning: once this step is completed Internet Explorer and other browsers may no longer present the non-SSL content, but this is only temporary.</p>
<h2>Create a System Setting</h2>
<ol>
<li>Name = cdn</li>
<li>Key = cdn</li>
<li>Type = text</li>
<li>Value = //assets.domain.tld/</li>
<li>Save the System Setting</li>
</ol>
<p>Take special care to provide the <code>//</code> instead of <code>http://</code> or <code>https://</code> as the browser will complete the protocol for you. I would suggest your using <code>//</code> for all external links to avoid SSL content mismatch errors.</p>
<h2>Create a PHP Snippet: swapSSL</h2>
<p>The following PHP Snippet will perform the magic:</p>
<pre>
<?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]]';
</pre>
<p> </p>
<p>Essentially, this will return the MODX Revolution System Setting which matches the connection protocol. Standard connections will receive the CDN fed <code>//assets.domain.tld/</code>, whereas SSL Connections will be given <code>/assets/</code>.</p>
<h2>Implementation</h2>
<p>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:</p>
<pre>
<img src="[[!swapSSL]]images/slide-1.jpg" alt="Something should be here" height="" width="" />
</pre>
<p>Make sure to call the Snippet uncached. It may be suggested to place the Snippet Call in the Template and have it utilize <code>$modx->toPlaceholder('placeHolderName','value'); </code>. This way the Snippet is only called once per page.</p>
<h2>Test the CDN</h2>
<p>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.</p>
<p>Additionally, you can use <a href="https://webpagetest.org/">webpagetest.org</a> to verify the CDN's being used on the site</p>
<p>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.</p>
<h2>Caveats</h2>
<ul>
<li>The site hit count may diminish due to the CDN.</li>
<li>Awstats, Webalizer, and other domain host statistics applications may no longer be accurate</li>
<li>Using Google Analytics or other third-party service should not be affected by the changes discussed herein</li>
</ul>