Building this blog!

As mentioned previously, I wanted to write a post on how this blog has been built. This website does not contain any interactive content: everything is static and fast - extremely fast. This is to focus on content rather than getting distracted by fancy visual effects.

This blog is built from scratch using Jekyll. As described in their website:

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server.

Jekyll does not use any database or web-server: it can be served directly from Dropbox, Github or Amazon S3, so it can rely on the power and speed they offer. In fact, this website relies in many of Amazon Web Services: Amazon S3 (for storing the contents), Route 53 (as the DNS) and Amazon CloudFront (as the CDN).

On the html/css side, the blog uses Normalize and is responsive: you should have a good experience in all of your devices.

Objective

Create a static website that will be accessible both through the APEX domain (without the www - http://sebasr.com) and through the www domain (http://www.sebasr.com). This post will only focus on the hosting part and not the creation of the site on it-self (there will be another post dedicate to that).

Creating the S3 bucket

The first thing you need to do is create the S3 bucket that will contain the site’s files. I recommend you name your bucket according to your website name and domain (if you own the domain bob.com, you should name the bucket bob.com), although it’s not really required when using CloudFront since all requests will be directed to your CloudFront distribution.

You can now upload your static website (through the console or using other tools, such as s3_website)

Setting up the bucket policy

Additional steps are required to make the site you uploaded to S3 accessible.

1. Select your bucket
2. Click on “Permissions”, then “Add bucket policy”
3. Copy-past the following lines (remember to change the bucket name to your bucket namer in the Resource key):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "Allow Public Access to All Objects",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::sebasr.com/*"
        }
    ]
}

Set the bucket to accept a static website

1. Select your bucket
2. Click on “Static Website Hosting”, then “Enable website hosting”
3. Check that you corrently set-up the “Index Document” and “Error Document”
4. Note down the “Endpoint” for later - you could use that to access your website directly

Creating CloudFront distribution

From the previous steps, the site was only available in eu-west-1 (Dublin - Ireland). CloudFront will help us distribute that in the other regions. To do so, follow these steps:

1. Open the CloudFront tab and click on “Create Distribution”
2. Select “Web”
3. Fill-up the settings as follow: 3.1. “Origin Domain Name” -> provide the endpoint you note down previously 3.2. “Default Cache Behavior Settings” -> leave defaults 3.3. In “Distribution Settings” 3.3.1. Complete “Alternate Domain Names (CNAMEs)” (such as sebasr.com and www.sebasr.com) 3.3.2. “Default root object”, write “index.html”. This will indicate CloudFront which file it should retrieve when accessing your distribution directly
4. Click on “Create Distribuion!”

Setting up Route53

1. Open the Route53 tab and click on “Create Hosted Zone”
2. In “Domain Name”, input your naked domain (eg: sebasr.com). Click “Create”
3. Select your newly created naked domain and click on “Go to record sets”
4. Copy the NS entries that were automatically generated for you by Route53 and provide them to your domain provider

Optional (if you want your website to be accessible from bot www and the naked domain):

1. Click on “Create Record Set”.
2. In the “Name”, enters nothing, and make sure “Type” is to “A - IPv4 address”.
3. Click on “Yes” for Alias, and set the CloudFront distribution as “Alias target” (it should be automatically auto-completed for you).
4. Leave the Routing Policy to “Simple”, and validate the record set.
5. Go back to 1, but this name enters “www” for name.