Support

Find answers, guides, and tutorials to supercharge your content delivery.

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:

  1. Create a Pull Zone or Push Zone.

  2. Get the CDN URL (created in step 1).

  3. Identify the resource in your HTML that you want to load from the CDN, such as your CSS, JavaScript, and images.

  4. 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>
    

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Get started
KeyCDN uses cookies to make its website easier to use. Learn more