Custom CDN Integration

Updated on February 8, 2022

This article focuses on how to integrate your website with KeyCDN and provide you with a better understanding of how to make use of the CDN.

How to integrate your website with a CDN

It is most common to have HTML pages delivered by the origin server and offload all static resources, such as CSS, JavaScript, images, and videos, to the CDN. In most cases, the static content accounts for 80% or more of a website. Follow the steps below to integrate your website with a CDN:

Create a Pull Zone or Push Zone.
Get the CDN URL (created in step 1).
Identify the resource in your HTML that you want to load from the CDN, such as your CSS, JavaScript, and images.

Replace the Origin URL with your CDN URL (Zone URL or Zone Alias for KeyCDN).

Note: Make sure all pages and other dynamic content are delivered by the origin server. In most cases the CDN should only deliver static content.

Example:

Origin URL: https://www.example.com
CDN URL: https://example-hexid.kxcdn.com

Before integrating website with CDN:

<html>
    <head>
        <link href="https://www.example.com/css/example.css" rel="stylesheet">
    </head>
    <body>
        <h1>Website Heading</h1>
        <a href="https://www.example.com/news.html">Link</a>
        <p>Paragraph.</p>
        <img src="https://www.example.com/img/example.jpg" alt="example">
    </body>
</html>

After integrating website with CDN:

<html>
    <head>
        <link href="https://example-hexid.kxcdn.com/css/example.css" rel="stylesheet">
    </head>
    <body>
        <h1>Website Heading</h1>
        <a href="https://www.example.com/news.html">Link</a>
        <p>Paragraph.</p>
        <img src="https://example-hexid.kxcdn.com/img/example.jpg" alt="example">
    </body>
</html>

Support

Custom CDN Integration

How to integrate your website with a CDN

Supercharge your content delivery 🚀