Quick Start

Setting up CDN for your website is easy for developers... and a lot easier for WordPress users.

Setting up CDN with a Website

You need to activate your account and select a paid plan before using Private CDN for your websites. Using Public CDN is still free.

Using PageCDN with your website requires that you:

  • activate your account. Private CDN features require paid subscription;

  • create one or more repos to pull content from your website;

  • modify your website code to use the CDN.

Its easy to create and configure these repos manually. And, if you have a WordPress website, things are much easier as our plugin can automate most of the tasks.

Creating Repos

To create a repo, please go to the Dashboard and follow these steps:

  1. Click the 'Create New' button on top bar.

  2. A popup will open where you have to choose between private and shared repos. For most uses, you will need to create a private repo.

  3. Choose whether you want to pull contents from website, github or you want to manually upload files to the repo.

  4. In case the origin is a github repo or a website, provide 'Origin URL' that may be the URL of your github repo or your website. You can provide the website base as origin like https://example.com or can also refer to a directory like https://example.com/path/to/static/files/. This helps you shorten the path if you want to fetch files from a single directory that is very deep in hirerarchy. For github repos, you have to provide the repo path that may look like: https://github.com/jquery/jquery. PageCDN can work with both public and private github repositories.

  5. Provide an easy memorable name for repo in 'Repo Name' field.

  6. Choose a URL friendly repo slug for use in 'Repo Path'.

  7. In case of shared repo, you may also need to choose a 'Namespace' and optionally provide 'keywords'.

  8. Click 'Create Repo' button to finish the setup.

  9. Once the repo is created, you are taken to 'My CDN' page where you can see list of recently created repos. In the 'CDN URL' column, you can see a copy button to the left side of a box that displays a URL. This URL represents your CDN repo. All you have to do is to copy this CDN URL and use use it in place of the origin URL you provided during the setup.

  10. If you choose 'Github' origin, please skip to the 'Setting up a GIthub repo' section below.

  11. If you choose 'Manual Uploads' origin, please click on 'View Files' button next to the repo you created and click on 'Upload Files' on next page to upload files. Once the file uploads are complete, you may need to refresh the page to see the files you uploaded. Clicking on each file will give you the URL that you can use on your website.

Wordpress Integration

WordPress Plugin: PageCDN – Better CDN Plugin

Using our WordPress plugin, setting up CDN for your WordPress website is very simple and mostly effortless. You do not even need to configure anything on PageCDN to connect to your website. The plugin does everything for you.

To use WordPress plugin, please create and activate your account. PageCDN WordPress plugin requires API access to create repo, to create most optimal content delivery strategy and to purge CDN cache. PageCDN WordPress plugin helps with automatic Public CDN integration too.

Our Public CDN is free of cost, but Public CDN API is only available with paid plans.

To integrate PageCDN with your WordPress website, please follow these simple steps:

  1. On PageCDN, go to Settings → User Profile and copy the API key.

  2. On your website, install PageCDN WordPress Plugin.

  3. Activate the plugin.

  4. In WordPress admin panel, goto the Settings -> PageCDN page.

  5. On settings page, paste the API key in the relevant field.

  6. Save changes.

  7. Go to your public website and test the changes.

If at some point you may need to flush the CDN cache. For this, there is a purge button avilable on the admin bar. Clicking that button will flush the cache and will force PageCDN to fetch fresh files from your website.

After this, your WordPress CDN setup is complete and in most cases you may not need to change the configuration any further. The default settings provide the configuration that usually work with any any website. But if you want to understand or optimize things further, you may need to continue reading how things work behind the scenes.

Manually Creating Repos for WordPress websites

For a simple setup, you do not need to create a repo at PageCDN before integrating with your WordPress website. However, if you already have a repo created and optimized your way, you may use its URL on the PageCDN settings page in your WordPress Admin area. Manually creating a repo for WordPress website usually offers no extra benefit than just choosing a memorable name for use in CDN URL, because with the default automated WordPress setup, a random hashed repo URL like the following one is created: https://pagecdn.io/repo/c6c0c20c4e6371a8fe47. You may also choose to make it a shared repo, and choose different namespace than the word repo in URL.

Optimizing caching and performance

The default settings are usually good for most setup, but you may need to optimize HTTP Caching, Edge Caching, Compression, Server Push and other settings for your website.

  1. Please login to PageCDN.

  2. Goto Dashboard.

  3. Click 'My CDN' page on the top bar.

  4. On 'My CDN' page, you will see a list of repos that you created in the past. If there are multiple repos, you may need to look at the Origin column to understand which repo is relevant to the setup you are currently working with. After identifying the repo, Click 'View Files'.

  5. On next page, click 'Settings'.

  6. A popup will open. Click on 'Configure' to open the configuration form that helps you customize the setup.

More information on how to optimally configure a repo is available in Configuration Guide.

Working with Easy Fonts

Google Fonts is an excellent fonts collection that is available for free for any website. These fonts and CSS files are served through a CDN for super fast delivery. However, there are some limitations that we try to cover through Easy Fonts library. If you want to try Easy Fonts, you will need to enable 'Use better cacheable fonts from PageCDN' option on plugin settings page.

Enabling the option will try to replace all references to Google Fonts CSS with PageCDN hosted Easy Fonts.

Minimizing DNS lookups

Many plugins use Public CDN hosted javascript and CSS resources. When you install these plugins, using 3rd party Public CDN hosted resources will require extra DNS, TCP, SSL and HTTP/2 overhead. This overhead can be avoided if all the public resources so included are served through one host only that you already use. Since you are already using PageCDN for content delivery, serving such Public resources through PageCDN's Public CDN will speed things up without adding to your bandwidth costs as the Public CDN is totally free. You can enable this optimization by enabling 'Minimize DNS lookups and better utilize HTTP/2' option on plugin settings page.

Using Public CDN for cache re-use

A WordPress website consists of the WordPress core, some plugins and a theme. All of these usually contain opensource resources like jQuery, Bootstrap, Angular, Font Awesome, etc. Serving these resources, along with other website files, over a CDN can make your website to load quicker. However, its better and more optimal to use Public CDN for such opensource resources for the two reasons:

  1. Public CDN is free. You can save some bandwidth costs by serving these resources from Public CDN.

  2. Resources over Public CDN are more likely to be in browser cache for even first time visitors because visitors' browser may already have received and cached such public files while visiting some other website. This can significantly speedup page load time.

PageCDN WordPress plugin full supports working with opensource resources and if you enable 'Optimize Opensource content' option in plugin settings, it will try hard to offload as many resources to Public CDN as possible.

Using Public CDN may slow down the first page load after this option is selected or after a Purge request. This is due to several API calls being carried out in the backend for generating local cache of URLs of public files.

Using minified public files when available

Our Public CDN hosts developement and production (minified) versions of files of many opensource libraries, themes, etc. If a plugin or theme that you use uses an un-minified version of an opensource library, PageCDN plugin may be able to find a matching minified file for you if you enable the option 'Use minified public files where possible'.

Please note that if SRI is being used for an opensource JS or CSS file, using minified version will cause the integrity breach and browser will fail to load the file. In such a case, you will need to disable this option.

Setting up CDN with a Github repo

You can setup a repo to connect to a github repo. By default, PageCDN works with releases and fetches files from github for:

  1. Only fresh releases if you properly setup a github hook.

  2. Old releases if you sync old files. However, in this case, it syncs just production releases and skips all releases that have rc, beta, alpha or similar keywords that indicate a non-production release.

However, you can create a repo with 'Website' Origin and use https://raw.githubusercontent.com/ as origin URL to get access to every commit or branch of your repos that you want to use, and then configure your repo on PageCDN to apply your own caching and compression configuration.

Setting up CDN with Public Github Repos

The initial repo setup process for Public Github Repos is the same as described in 'Creating Repos' section above. Once created, you can open it by clicking 'View Files' button. After that, you will see a 'Sync Files' button clicking which syncs all production releases available on that github repo till date.

However, you may want to automatically pull new releases as they are created on github. This requires some additional steps:

  1. On 'My CDN' page, click on 'View Files' link next to the repo you are working on.

  2. Click 'Settings'.

  3. This will open a popup box. Next copy the 'Webhook URL' available in the popup box.

  4. Go to your Github repo.

  5. Click 'Settings'.

  6. In the navigation on left side, click 'Webhooks'.

  7. On next page, click 'Add Webhook'.

  8. Paste the Webhook URL in 'Payload URL' field.

  9. Choose application/json 'Content Type'.

  10. Click on 'Let me select individual events' option.

  11. It will open a list of events that Github can send through API. Here you have to uncheck all the events and check only 'Releases' event.

  12. Click on 'Add Webhook' to complete the setup.

Once done, Github will notify PageCDN of all the releases created on this Github repo and PageCDN will be able to fetch files as and when they are available.

Setting up CDN with Private Github Repos

The process of setting up PageCDN repo with Private Github Repos is the same as for the Public Github Repos above, with the following extra steps:

  1. Open your Github Developer Settings, and go to 'Personal Access Tokens' page.

  2. Click on 'Generate New Token'.

  3. In the 'Note' field, type some text like 'PageCDN Access Token' for your reference in the future.

  4. In the 'Select Scope' area, Check 'Repos' and its child options.

  5. Click 'Generate Token'.

  6. It will generate a token on the next page and display it only once. Please copy that token.

  7. Goto Profile Settings on PageCDN.

  8. In the Github Personal Access Token section, paste the token and save.

Test the setup by creating a test release on Github. PageCDN will have access to all the Github repos that you have access and any releases created on Github will be available on PageCDN within seconds.