How to Use CloudFlare CDN for a Static HTML Website

On with 0 Comment
CloudFlare DNS records updateMost websites are now switching to different content management systems like Drupal, Joomla or WordPress which supports usage of CDN in different forms either through plugins or through built-in functionality in the core. But, there is still a large number of websites using good old static HTML structure. If your website falls into this category, you cannot take advantage of a content delivery network out-of-the-box. The reason is that almost every CDN service doesn't cache static HTML content. Static assets like CSS, JavaScript, images and document files are cached easily but when it comes to caching HTML content, there's no reliable way for the CDN to determine whether it's a dynamically generated page or a static one. Today, we're going to see how we can use the popular CloudFlare CDN service for a static HTML website. All we need is to learn how to create custom caching rules that instruct the CDN service to cache the directory structure of our HTML website. Let's setup CloudFlare for static pages.

Start with signing up for a CloudFlare account. Thereafter, you can provide the domain name of your site so that the service can scan the associated DNS records.

CloudFlare DNS records update
As shown in the image above, you can add the relevant A Record and the CNAME Record to ensure CloudFlare collects and routes the traffic correctly. Thereafter, go the next step and select the plan you intend to use. First timers can go ahead with the free plan which is good enough for a general site.

The last step involves change of nameservers which should be completed within the domain name control panel. CloudFlare specifies both the nameservers which should be updated to allow routing of content. These nameservers are:
Leave all other default settings as it is and complete the initial setup.

Analyzing and Creating Caching Rules

As I said before in the opening paragraph that a typical content delivery network does not cache static HTML pages. So we'll create custom caching rules to make that happen.

First of all, you have to analyze which part of the website you want to be cached and what is the structure of your website. A static HTML website can have almost infinite types of directory and file structure which needs to be carefully examined to ensure all the custom rules work correctly.

You can divide your HTML site structure into 3 broad categories to facilitate easy creation of caching rules.
  • Directory based caching - This methodology is fairly simple. You select the directories which need to be cached by the CDN network. Once you specify these directories in your custom rules, all the content within the directory is cached by the CDN. For example:


    The following rule ensures that all the contents of the directory 'articles' is cached by CloudFlare. Pay attention on the asterisk wild character used in the rule directive. If you have more than one directory, you can add more such rules for the respective folders.
  • File extension based caching - This caching rule structure is also quite simple. If you just want to cache static HTML files with a specific extension, then you can use this directive. For example:


    The example shown above has two custom rules. The first one directs caching of files with extension .htm in the root directory of the site. The second example directs caching of files present in the directory 'articles' having the extension .html.
  • Query parameter based caching - And, the last one involves caching those pages having one or more query parameters. Though static HTML websites generally do not have such URL structure for a page still we've included this for the demo purpose.


    The first directive instructs to cache all the files in the root directory having a query parameter ?old=true in the URL. The second directive instructs caching of all the files in the 'articles' directory having .html extension and also includes a query parameter ?type=premium in the URL.

Applying Custom Caching Rules

Now that you've analyzed and created all the custom caching rules, it's time to apply them on the site through CloudFlare's dashboard. The process is quite simple for this.

CloudFlare custom page rule button
Click the 'Page Rules' button as shown above and enter all the custom caching directives we've discussed in the previous section. You can leave all the default settings as it is except the 'Custom caching' option. Every time you enter a new rule, make sure you select the 'Cache everything' option from the drop down menu for this specific option.

The free plan allows up to 3 such custom caching rules. If you want more such rules, you can upgrade to a paid plan anytime. So, this is the simple process one can use to get the CloudFlare CDN service for a static HTML website.


Post a Comment