Did you know that you can navigate the posts by swiping left and right?

How to set up an amazing blog with jekyll, Amazon S3 and Travis-CI (Part 2)

24 Feb 2017 . category: Dev . Comments
#website #blog #tech

It feels like anyone who wants to be in the technology space needs a website/blog, and I could not be left out! I decided to venture into running my own website, and set out with the goal of making it fast and cheap. In theory my website will run for the rest of my life, hence working a bit extra upfront to develop a cheap solution will save me money in the long run. Plus I get to learn about a lot of interesting web technologies!

This is a three part series, each focusing on a different aspect of the process. Part 1 explains how to create the website, Part 2 details how to set up the “server” and Part 3 links the website to the server.

Note: I wrote this mainly for myself as a reference. It’s written to explain my thoughts and the steps I took. If anyone finds something confusing please let me know and I’ll try to help you out. It was a bit difficult to decide how in-depth to make the guide.

  • Part 1 - Link
  • Part 2 - Below
  • Part 3 - Link

Part 2 - Getting the website online

In Part 1 we finished building the website, and should should be able to view it locally. In this post, I will go through getting everything set up on the web from the domain name to hosting.

Domain Name

I have used a few different domain registrars, but have not found much difference between them. I aim for the cheapest, and I am currently using namesilo. They include whois protection with their prices which makes them the cheapest. My .me domain name currently costs me around $17 USD.

Hosting

A popular option for hosting a jekyll blog is to use github pages, as it is free and reliable. It is great because you do not need to do any compiling locally, as github automatically does it for you when you push a new git commit. However you are a bit restricted in the plugins you can use, and therefore the themes you can use.

I would recommend github if Amazon S3 web storage wasn’t such a strong offer. I am using S3 at the moment.

  • Reliable, they promise almost 100% uptime.
  • Its fast!
  • Its practically free (A few cents a month).
  • There is a great ruby gem that lets me very easily automate my build process.

Note of warning: There is no limit to how much your AWS bill can be. Be wise and set up automatic alerts when costs get too high. I have set mine to a dollar a month. You would get high costs if you are getting lots of traffic.

Using Amazon S3

Amazon S3 is meant for file storage, but it allows you to expose a folder or in S3 speak a bucket to the internet.

Buckets are logical units of storage, and each bucket can have one domain associated with it. We need two amazon s3 buckets, one for the “www.” domain and one for then “naked” domain. You have to choose if you want your website with or without the “www”. I prefer the naked domain, so I configured one bucket under “www.simonlee.me” which redirects to my naked bucket “simonlee.me”. This bucket contains all the contents of my website.

Be careful though, the bucket must be named exactly as your website for it to work!

Configuring the Redirect Bucket

Under Static Website Hosting for the “www.” bucket, enable Redirect all requests to another hostname and use your name domain. In this case www.simonlee.me redirects to simonlee.me

Configuring the Hosting bucket

Configure this bucket for hosting by enabling website hosting, and set an index and error document as listed below.


    Index Document: index.html
    Error Document: 404.html
  

Then change the permissions to allow public access to the bucket contents. Do this by add the code snippet below to the bucket policy:


    {
      "Version":"2012-10-17",
      "Statement":[{
      "Sid":"PublicReadGetObject",
            "Effect":"Allow",
        "Principal": "*",
          "Action":["s3:GetObject"],
          "Resource":["arn:aws:s3:::mistersimon.com/*"
          ]
        }
      ]
    }
  

DNS

As I am hosting on S3 and not a server, I do not have an IP address that I can point my domain name to. Instead I have a URL with I need to set an alias against the my URL. Also, as mentioned previously, I want my website URL “naked” without the www. in front.

Technically, the root url cannot be a CNAME/ALAIS record which would represent the S3 url. However Cloudflare has a workaround that allows this, something that was not possible on the DNS service bundled with my domain registrar.

I have been using the free cloudflare dns service, and it has been working great for me so far. It even let me set up a pseudo SSL connection as well, which I discuss later on.

Setup Cloudflare

Once you have registered for a cloudflare account, it’s a couple of steps to set it up at both cloudflare and at your domain registrar.

  1. Add a new site, wait for the scan to finish
  2. Confirm the current DNS records and choose the free plan.
  3. It should give you a few nameservers to point to, which will we will set at the domain registrar later.

DNS Records

Configure two DNS records to correspond to each AWS bucket.

Set up a cname for simonlee.me to the amazon bucket, in my case:


    simonlee.me.s3-website-eu-west-1.amazonaws.com
  

Set up another cname for www. to the naked amazon bucket, in my case:


    www.simonlee.me.s3-website-eu-west-1.amazonaws.com
  

Enabling SSL

Hopefully I do not have to explain the benefits of SSL these days, but with google prioritising SSL enabled websites, it makes sense to enable SSL through cloudflare (which is free at the time of writing).

This is not really full SSL encryption as it only encrypts between cloudflare server and the user. The connection between cloudflare and the amazon servers remains unencrypted. If someone knows a good way of achieving full encryption please let me know!

To set it up, ensure domain is accelerated by cloudflare such that the dns pages shows an orange cloud. Then set SSL communication to flexible and apply a page rule on the following site so always use https


    http://*simonlee.me/*
  
Configuring Jekyll for https

Do not forget to to change the url links in your jekyll config, to save a redirect from http to https.

Domain Registrar settings

At your domain registrar (namesilo in my case) change the nameservers to point to cloudflare. In my case it was:


    brit.ns.cloudflare.com
    woz.ns.cloudflare.com
  

Manual Deployment

You can now manually upload the output from jekyll onto the S3 bucket and the website will be live. In the next part I will show you how to achieve automatic deployment which makes things easier.

Part 2 Wrap-up

The website should be live at this point, awesome! We could stop here and manually upload each time we make a change to the HTML files, but part 3 shows us how to achieve an automatic deployment.


Me

Simon Lee is a nice person. He lives in Singapore, where he works on cryptocurrency trading tools. In his spare time, Simon likes to eat pizza.