Grav CDN integration

Introduction

A CDN helps a Grav site deliver CSS, JavaScript, images, and fonts from edge servers closer to visitors. This can reduce the load on the origin server and improve page-loading performance for visitors in different locations.

This guide shows how to set up a CDN for Grav with the Team Grav CDN plugin. It covers Grav 2.0.15, Admin2 2.0.18, and CDN plugin 1.5.2, from plugin installation through frontend verification.

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 Grav

  1. Log in to the Grav administration panel.
  2. Open Plugins, click Add, and search for CDN. Find the CDN plugin by Team Grav and select its download icon to install it.
    Grav Add Plugin window showing the CDN plugin by Team Grav
  3. After installation, open Plugins and select CDN.
  4. In the CDN Domain field, enter barsoom-cdn.cdnsun.org without https://. If your origin already uses HTTPS, leave Force HTTPS Disabled. Keep Inline CSS Replace Enabled and leave the other defaults unchanged.
    Grav CDN plugin settings with the CDN Service Domain configured
  5. Click Save to apply the CDN plugin configuration.
  6. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Barsoom Grav homepage after 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

  _____    _    _     _____   
 / ____|| | || | ||  |__  //  
/ //---`' | || | ||    / //   
\ \\___   | \\_/ ||   / //__  
 \_____||  \____//   /_____|| 
  `----`    `---`    `-----`