Static website on CDN

Serving static HTML from a web server is fast, serving from CDN is even faster :) CDN stores content on multiple servers located all over the world allowing visitors to access your website from a server closer to them.

Create distribution

Prepare a S3 website and create a CDN distribution.

CDN is enabled, not too much of an effort.

Gotchas

Index

Deploying your website on CDN might your website. S3 use “Index document” while CDN use “Default Root Object”.

S3 Index document and CDN Default Root Object are set to index.html.

Files in bucket
/index.html
/about/index.html
Path S3 will match CDN will match
/ /index.html /index.html
/about/ /about/index.html  
/about/index.html /about/index.html /about/index.html

S3 match all 3 paths, CDN only match 2 out of 3 paths.

CDN only match paths against filenames; The exception is Default Root Object mapping / to /index.html.

Caching

Upload /about.html and the new page soon becomes visible on your website. Thus, upload a new copy of /about.html changes will only effect the S3 url, CDN url continues to serve a cached copy of the first file.

Invalidate the CDN url get a fresh copy of the file.

Automate

Uploading and invalidating CDN files manually is simply is not an option if you plan to maintain your website. You can automate your AWS console activities with s3cmd, run a single command to sync all files and invalidate old urls.

dan@binsy:~/Projects/jekyll-hello-world$ s3cmd sync _site/ s3://jekyll-web-site/ --delete-removed --cf-invalidate --cf-invalidate-default-index
WARNING: Module python-magic is not available. Guessing MIME types based on file extensions.
_site/about.html -> s3://jekyll-web-site/about.html  [1 of 2]
 5186 of 5186   100% in    0s    30.38 kB/s  done
_site/feed.xml -> s3://jekyll-web-site/feed.xml  [2 of 2]
 3442 of 3442   100% in    0s    32.90 kB/s  done
Done. Uploaded 8628 bytes in 1.0 seconds, 8.43 kB/s. Copied 0 files saving 0 bytes transfer.
Created invalidation request for 2 paths
Check progress with: s3cmd cfinvalinfo cf://E2418YH4DW6PVC/I2LU6LCXSAWE6L

Above command syncs local _site folder with S3’s jekyll-web-site container.