This guide will walk you through how to integrate your site by rewriting the HTML to serve static assets through the CDN.
This tutorial assumes you have already created a pull zone.
Background Information
Generally speaking, a CDN is a global network of servers used to increase a website's performance by decreasing server load at the host server and delivering content to end-users from closer proximity. There are two simple steps to complete before you can integrate your site with our CDN:
- Create a pull zone.
- Reference your static assets' URLs to the CDN URL obtained through Step 1.
Legend
| Origin URL | The Origin URL is basically the URL of your website or your domain. i.e: http://www.example.com
|
| CDN URL | The CDN URL refers to either the Temporary CDN URL which is automatically generated when you create a pull zone |
Adapt your source code to pull the Static Assets from CDN. The beauty of the way pull zones grab content is that to integrate your website, you simply need to replace your Origin URL with your CDN URL in the links of the static content you want to be served by the CDN (example 2). There are two main categories of integration methods for pull zones:
- Popular CMS: If your website is utilizing a known CMS like WordPress, Joomla, Drupal, etc., there are automated ways to integrate CDN functionality into the website. You can find the list of CMS's and the name of your CMS under if it's not there, then you need to utilize the Custom Integration mechanism.
- Custom Integration: If you are implementing this with a custom-built site, you will need to go into the source code and make the changes to point all of your static content to its corresponding CDN location. This is done by replacing your ORIGIN_URL with your ZONE_URL, see the examples below for a better idea of how these replacements should look.
Examples Location
Files on the CDN pull zones will mirror the static contents of your origin server onto our network. Meaning that if you have a file on your origin server located at Origin URL/images/logos/big.jpg, Its location on our CDN would be CDN URL/images/logos/big.jpg.
-
Replacing URLs in HTML
The HTML output of your website’s source code needs to be changed so the static elements will be served by the CDN instead of your origin server. Here's an example for an image file:
Replace
<img src="ORIGIN URL/images/logos/big.jpg" alt="" />Or
<img src="images/logos/big.jpg" alt="" />With
<img src="CDN URL/images/logos/big.jpg" alt="" /><img src="http://cdn.mydomain.com/images/logos/big.jpg" alt="" />This means your code will look like:
<img src="http://cdn.mydomain.com/images/logos/big.jpg" alt="" />Or
<img src="http://cdn.mycompany.netdna-cdn.com/images/logos/big.jpg" alt="" />The same example can be followed by other types of files like CSS, JS, SWF, etc...
- Search & Replace In some cases, you can use search & replace editor function and replace origin domain with your CDN temporary or custom domain, however, make sure to leave untouched all URLs pointing to pages and other dynamic content so CDN can serve only static files.
As always, If you have any questions or concerns about any of the topics mentioned in this article, please feel free to reach out to support - we are available 24/7 by chat or email.