Craft CDN integration

Introduction

Craft is a small CMS designed by Pixel&Tonic and is aimed to ease the life of web developers and content managers. It’s really flexible in managing all types of content. All in all, using this CMS is quite beneficial because it:

  • Features a simple panel that makes it easy to edit and manage your content.
  • Handles previewing better than other CMS.
  • Has a powerful core.
  • Is easy to update.

If you want to speed up Craft, use CDN. Below, you’ll find the detailed instructions on how to integrate CDN with Craft CMS.

Before you start

  • Before you take any steps please back up your files and database.
  • In the following, we will integrate a CDN service using the CDN domain 12345.r.cdnsun.net Please visit the Services/How-To section to obtain your CDN domain.
  • 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 domain is ready-to-use here.

Create CDN Static service

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

Enable CDN in Craft

  1. Log in to your Craft backend.
  2. Go to Settings.
    Craft Settings
  3. Go to Assets.
    Craft Settings Assets
  4. Click on New asset source.
    Craft New Asset
  5. Choose a folder for your assets (e.g. assets/) and fill in your CDN domain as in the picture below.
    Craft Asset Settings
  6. Click Save.
  7. Create the assets folder (i.e. assets/) in your web server document root.
  8. Upload images to the just created assets source and integrate them into your website.
  9. That's all.

Notes

  • 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 domain.
  • Don't see your CDN 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.
  • Can you improve this guide or write a new one for software we haven't covered? Help us expand our CDN integrations section and earn $50 in CDN credit! Contact us to contribute.

Contact Us

  ______     ___      _  __  
 /_   _//   / _ \\   | |/ // 
   | ||    / //\ \\  | ' //  
  _| ||   |  ___  || | . \\  
 /__//    |_||  |_|| |_|\_\\ 
 `--`     `-`   `-`  `-` --`