Static Site Hosting with a CDN
What is a static site generator?
Static site generators eliminate the need for server side code, databases, and other resource intensive processes needed to generate a dynamic site. Rather, a static site generator takes the content, applies it to a layout or template and generates purely static HTML files. Static site hosting with a CDN helps to further improve the loading times of generated HTML files enabling visitors to access information even faster. Static site generators are becoming increasingly popular and although not applicable for all use-cases, they offer some enticing benefits.
The following is a graph illustrating the growth of static site generators over the past year.
Popular static site generators such as Jekyll, Hexo, and Hugo allow for much more efficient load times and scalability as they do not require the resource intensive processes that dynamic sites do. Static web hosting is also much simpler as there are no databases, packages, libraries, etc involved within the static site itself.
Static site hosting with a CDN for all static assets
Integrating static site hosting with a CDN for all static assets and HTML files can help even further increase the speed of the static site. Instead of the static files being delivered from one central origin server, with static site hosting via CDN, they are distributed to servers across the globe.
Once the static site has been generated by a static site generator, using a CDN for all static assets to supercharge the site is simple and can be done in just a few steps.
- Choose where you would like to host your generated static site files (e.g. Amazon S3, KeyCDN Push Zone, subdomain on existing origin server, etc.).
- Using Amazon S3 as an example, enable static website hosting in your S3 bucket and create a KeyCDN Pull Zone pointing to your origin URL (e.g.
https://yourwebsite.com). - Create a DNS record pointing the
www.yourwebsite.comsubdomain to your KeyCDN Zone URL (e.g.example-hexid.kxcdn.com). - In the KeyCDN dashboard, create a Zone Alias that reflects the
www.yourwebsite.comsubdomain and attribute it to the Zone in question.
In the above example, the www. subdomain was used. With this method users will access the static site via the www. subdomain which will be fully accelerated by the CDN. However, users also have the option to use the root (naked) domain as the Zone Alias which can be done by using either of the following options:
- Redirect your root domain to its
wwwversion with a URL or Forward record. Afterwards, create a CNAME record forwwwand point it to your Zone URL. - Certain DNS providers have solutions, such as Cloudflare's CNAME Flattening, which allows you to point the root domain to a Zone Alias. This method masquerades the CNAME record as an A record.
If using Let's Encrypt, you are currently only allowed to have one SSL certificate per Zone. Therefore, if you are using static CDN hosting with KeyCDN and want to perform a URL redirection, such as https://example.com to https://www.example.com, you must first create an additional Zone with Let's Encrypt enabled. Once that is complete, point your root domain to the CDN domain and place an index.html file within your Zone directory containing the following (replace example.com with your domain):
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=https://www.example.com">
<script type="text/javascript">
window.location.href = "https://www.example.com"
</script>
<title>Page Redirection</title>
</head>
<body>
If you are not redirected automatically, follow the <a href='https://www.example.com'>link to example</a>
</body>
</html>
There are various ways to enable static CDN hosting with KeyCDN, the above scenario is just one example with S3 as the origin. As mentioned, static site hosting with a CDN can also be implemented directly from a Push Zone or as a subdomain (e.g. docs.yourwebsite.com) on any origin server.