CDNOverview: a CDN comparison site made with Hugo

CDNoverview.com made with Hugo

Warpcache is always working toward more transparency in the CDN market. We found no complete CDN overview website, so we made one: CDNOverview.com

CDNOverview is an informative website that lists information about specific CDNs and can compare features to other CDNs.

Technically there’s something special about CDNOverview: It’s completely based on Hugo, a static site generator. For a number of reasons we wanted to create a static only website, but to sum it up: Static file hosting doesn’t come with hosting hassle and there’s a strong synergy between the product we’re offering and static sites. There’s been a big increase in interest in static site generators as can be seen by the following Google Trends graph.

static_site_gen_trend

While there are many static file generators out there, our attention was quickly drawn to Hugo because of it’s simplicity to get up and running.

Technically, it’s not straightforward to create a feature comparison website with a static site generator, any sane programmer would use a database and some logic to dynamically generate comparison pages when they are requested by a visitor. We decided to use Hugo’s Datafiles to generate the pages from these files. Also, this makes editing, adding and modifying content simple for everyone in the team.

Our setup allows for each CDN to have a separate pricing and feature overview file, this is because we added in pricing later than feature overview, and because pricing deserves it’s own categorisation. CDN pricing models can’t be compared easily and often need text to explain their pricing schemes or extra cost structures.

Content in the data files is simple and straightforward: A “key” which is the same in every file, for example “name”, and then a “value”, for example: “Akamai”.

Here’s a preview of a datafile(called akamai.yml):

name: "Akamai"
pops: "~2200"
purge: "yes"
purgeall: "yes"
instant: "No"
controlpanel: "yes"
originpush: "yes"
originpull: "yes"
originshield: "yes"
gzip: "yes"
customrules: "yes"
http2: "yes"
spdy: "no"
rawaccesslogs: "yes"
etc...

With all this information we tell Hugo to generate pages for each cdn in our data folder.

Creating the comparisons

Once we had some datafiles for CDNs it was time to generate comparison pages. We used a little bit of Bash to create these pages because we couldn’t find an easy way to do it with Hugo/Go code. Our compare generate script does roughly the following:

  • Take the list of CDNs, name this list cdn
  • Take the list of CDNs, name this list compare
  • Loop through the list of cdn
  • If the cdn‘s name is equal to compare continue to the next compare item
    • This prevents duplicate pages from being created, you don’t want akamai vs akamai
  • See if there is a cdn vs compare page
    • If it’s not there, create it
    • If it’s there, leave it

So, what if you change a data file?

All templates use the previously mentioned data files. Each time we generate the website again all html files will be using the latest data from the data folder. Updating is just as simple as editing a *.yml file.

You’ll notice that when you have a lot of CDNs the number of pages increases quite quickly, this is a graph showing the number of pages created per added CDN:

Pages per CDN

Amount of pages created per added CDN

Currently we’re at 1200+ pages with 35 published CDNs. There are 53 CDNs known to us at the time of writing, leading to over 2800 pages to be generated.

We found out that by increasing the complexity in the site’s template and adding more CDNs, the time it takes to create an update increases quite fast.

If you run

hugo

on a Macbook Air 1.8GHz i5 processor, it takes about a minute to completely generate the site (we’re open to any suggestions that would improve rendering speed). Once all pages are generated, we deploy the site to a Google Storage bucket at Google.

We hope you enjoy browsing and comparing CDNs as well as find the results insightful.