Content Delivery Networks

How to Host Your Web Files for Free on CDNs

Setting up a Free Public CDN for NumBox

You can very easily set up a free custom CDN (Content Delivery Network) that can host your web site's static files, such as images, CSS files and JavaScript files, including Numbox jQuery Plugin. The main advantage of doing this is that typically your site's visitors can download these static files much faster off of a CDN than off of your web servers. This means that your web site can load faster, with the added advantage of using less CPU/bandwidth for the files no longer on your own servers, and thus potentially saving you some money. Under the hood, a CDN is a network of servers, all with the same content, that is distributed geographically. Odds are, one is fairly close to where your visitor is browsing from, which makes for a faster transfer. Plus, if you're on a basic web site hosting plan, you're probably sharing your web server with a lot of other folks, and that can be a little slow in providing files compared to a CDN which is optimized for performance.

There are several free distributed file hosting services you can use for your custom CDN. The most popular is DropBox, which can easily be set up as follows:

  1. Sign up for a free DropBox account, if you don't already have one.
    No credit card required. All you need is a name, email address and password.
  2. When logged into the DropBox web site, navigate to your “public” DropBox folder and create another folder beneath this called “cdn”.
  3. Upload your static JavaScript, CSS and image files to your new CDN folder.
  4. Right click on one of the files you placed in your CDN folder, (not the folder itself,) and select “Copy public link”.
    You'll now see a public link that you can copy and use in your web site to point to your CDN file. It will look something like this:
    https://dl.dropboxusercontent.com/u/12345/cdn/jquery.numbox-1.1.0.min.js
  5. Use the public links to your CDN files in your web pages. For example, you can place this in your <head> section: 
            <link  href="https://dl.dropboxusercontent.com/u/12345/cdn/jquery.numbox-1.1.0.min.css" type="text/css" rel="stylesheet" />
            <script src="https://dl.dropboxusercontent.com/u/12345/cdn/jquery.numbox-1.1.0.min.js"  type="text/javascript"></script>

Using an Existing Free Public CDN for jQuery

For the main jQuery library, you are better off using one of the existing, popular, public CDNs, in particular the one provided by Google, which seems to give the best performance overall. This is highly recommended as the jQuery library is fairly large. Since a lot of web sites use Google’s CDN for jQuery, odds are that your visitors' web browsers have already cached a copy of the jQuery library. This means that they won't need to download it. You can’t get much faster than that! Adopting Google’s CDN is easy. You can adjust the version number, (1.11.0 in this example,) as desired: 

            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>