AWS DNS management for CDN website

Hosting a website, domain name is important. Compare jekyll-hello-world.eu with d1oawfu1kbgwq8.cloudfront.com, you definitely want the former domain name.

Domain name

Set CNAME for your CDN distribution.

AWS Route 53 is a DNS management service allowing CDN websites have their own domain name. The domain name doesn’t have to be registered through Amazon. Assume you already own jekyll-hello-world.eu through another registrar.

Replace that other registrar’s nameservers with the ones listed in the new Hosed Zone.

It takes upto 48 hours for nameservers to change and jekyll-hello-world.eu to direct to your website.

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.

  • _site folder is master copy
  • Sync don’t transfer/update identical files
  • New and changed files are uploaded to the container
  • Updated files are uploaded to the container and
  • Removed/Missing files are deleted from the container
  • Updated/Deleted files are invalidated on CDN

Static website on Amazon S3

Previous post Hello World with Jekyll describes how to get started with Jekyll. Next we will look at how to deploy a static website on Amazon S3. Storage services like S3 is easy, cheap and reliable service for serving a static website. This tutorial use S3, but there are other storage services providing the similar functionality.

Amazon AWS

Go to Amazon login, create an account if needed, and login to AWS console.

AWS login

Create S3 bucket

Name the bucket jekyll-web-site.

Configure bucket

Edit jekyll-web-site bucket’s policy to enable website hosting.

// Bucket policy
{ 
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"AddPerm",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::jekyll-web-site/*"
      ]
    }
  ]
}

Notice the bucket name jekyll-web-site in the bucket policy above.

Test bucket configuration (optional step)

Upload a simple index.html file to bucket root and visit bucket url. If Hello World, as shown below, then the bucket have been configured correctly.

<!-- index.html -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Deploy hello-world-jekyll

Now the bucket is ready to serve HTML content. Go to your Jekyll project and jekyll build to generate your site.

dan@binsy:~/Projects/hello-world-jekyll$ jekyll build
Configuration file: /Users/dan/Projects/hello-world-jekyll/_config.yml
            Source: /Users/dan/Projects/hello-world-jekyll
       Destination: /Users/dan/Projects/hello-world-jekyll/_site
      Generating... 
                    done.
 Auto-regeneration: disabled. Use --watch to enable.

Upload _site to bucket root.

Yay, hello-world-jekyll is now available on the Internet :)

Hello World with Jekyll

Ruby environment

Jekyll is a simple, blog-aware, static site generator powered by Ruby programming language. Open the console and run ruby -v and you should read a message of what Ruby version you have installed.

dan@binsy:~/Projects$ ruby -v
ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-darwin14]

If an error message printed, install Ruby and rerun ruby -v to verify Ruby is installed. Above you can see ruby 2.2.0p0 is installed.

Jekyll

dan@binsy:~/Projects$ gem install jekyll
Fetching: fast-stemmer-1.0.2.gem (100%)
Building native extensions.  This could take a while...
Successfully installed fast-stemmer-1.0.2
Fetching: classifier-reborn-2.0.3.gem (100%)
Successfully installed classifier-reborn-2.0.3
Fetching: ffi-1.9.6.gem (100%)
Building native extensions.  This could take a while...
Successfully installed ffi-1.9.6
...
dan@binsy:~/Projects$ jekyll -v
jekyll 2.5.3

Hello World

Create new Jekyll project.

dan@binsy:~/Projects$ jekyll new hello-world-jekyll
New jekyll site installed in /Users/dan/Projects/hello-world-jekyll.
dan@binsy:~/Projects$ cd hello-world-jekyll/
dan@binsy:~/Projects/hello-world-jekyll$ ls -1
_config.yml
_includes
_layouts
_posts
_sass
_site
about.md
css
feed.xml
index.html

Edit site information before generating hello-world-jekyll site

# ~/Projects/hello-world-jekyll/_config.yml
# Site settings
title: Hello World Jekyll
email: your-email@domain.com
description: Static web site generated by Jekyll
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
markdown: kramdown
dan@binsy:~/Projects/hello-world-jekyll$ jekyll serve
Configuration file: /Users/dan/Projects/hello-world-jekyll/_config.yml
            Source: /Users/dan/Projects/hello-world-jekyll
       Destination: /Users/dan/Projects/hello-world-jekyll/_site
      Generating... 
                    done.
 Auto-regeneration: enabled for '/Users/dan/Projects/hello-world-jekyll'
Configuration file: /Users/dan/Projects/hello-world-jekyll/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Visit localhost:4000, voiala!

Hello World Jekyll site in browser

Deploy

I know, the design is ugly as fuck. Don’t get discouraged, we’ll get to the styling/theming/designing soon. First, let’s focus on what makes static web sites powerful. Next tutorial will teach you how deploy Hello World on a S3 bucket.

The beauty of static HTML web sites

In the early days HTML was handcrafted with simple text editors like Notepad, later on we had Dreamweaver and today we have frameworks. Don’t be confused and think static HTML is old, ugly and inefficient. Static HTML can be a beauty; stylish, fast and reliable at a low cost. Enhanced web browsers, more powerful CSS and nifty JavaScripts allow HTML web sites to look fresh, stylish and offer basic functionality like simple contact forms.

Does gohugo.io, lanyon.getpoole.com, richgrundy.com look static HTML to you?

Deploying your first web site using a framework should not require programming skills, but later you might be interested in customizing your website and then programming skills will come in handy. Don’t let the developer part scare you, find a developer whom can help you customize a framework for your needs. Once the framework is tuned, updating and maintaining your web site should be dead simple.

To convince you static HTML has a competitive edge to dynamic HTML, a series of tutorials will soon be published. The goal is to give you hands on experience by help you create a Jekyll web site and deploy it onto Amazon’s CDN Cloudfront service.