Backdrop CMS CDN Integration

Introduction

A Backdrop CMS CDN integration can improve delivery of stylesheets, JavaScript, images, and other static files by serving them from your CDN Service Domain instead of directly from the origin server. This can reduce latency for visitors and offload static traffic from the origin.

This guide shows how to configure the contributed CDN module in its Origin Pull mode. The procedure was tested on Backdrop CMS 1.34.3 with CDN module 1.x-2.10.0 and covers both theme assets and public files.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to enable CDN in Backdrop CMS

  1. Download and install the CDN module using Backdrop's standard module installer. Select Functionality from the administration menu, locate CDN under Performance and scalability, select its checkbox, and save the module configuration.
    Backdrop CMS Functionality page with the CDN module enabled
  2. Select Configuration, open Development, and select CDN. Open the Details tab and select Origin Pull as the mode.
  3. Enter your CDN Service Domain in CDN mapping. The example uses https://barsoom-cdn.cdnsun.org. Leave Far Future expiration disabled and click Save configuration.
    Backdrop CMS CDN Details tab configured for Origin Pull with the CDN Service Domain
  4. Open the Other tab and select CDN supports HTTPS. Enter the same HTTPS CDN Service Domain in CDN mapping for HTTPS, then click Save configuration.
    Backdrop CMS CDN Other tab with HTTPS support and HTTPS CDN mapping enabled
  5. Open Configuration, Development, and Performance. Make sure Aggregate and compress CSS files is enabled, then save the performance settings. This allows files referenced by aggregated stylesheets to use the CDN Service Domain correctly.
  6. Return to the CDN configuration and open the General tab. Set Status to Enabled and click Save configuration.
    Backdrop CMS CDN General tab with the integration status enabled
  7. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Styled Backdrop CMS frontend after enabling the CDN integration

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

             ___              
    ___     / _ \\    ____    
   /   ||  / //\ \\  |    \\  
  | [] || |  ___  || | [] ||  
   \__ || |_||  |_|| |  __//  
    -|_|| `-`   `-`  |_|`-`   
     `-`             `-`