Hosting A Static Site On Amazon S3

Photo: Unsplash

Setting Up A Static Site On AWS.

Or how I rapidly rolled this blog out.

So as per my opening post on this blog, 2017 is a year I wanted to get back to blogging. When I thought about how to host the blog I wanted to meet two criteria:

• I wanted a really simple way to publish my thoughts and ramblings. I didn’t want a Content Management System or any complicated software stack.
• As this is a way for me to just share thoughts and things I learn as I go I needed the solution to be cheap or zero cost.

A quick Google listed a large number of static site generators based on a wide range of languages. What is a static site generator? A static site generator is a program that merges HTML files with content written in a text format to create a static website. That is a website that provides content only and no complicated functionality.

Due to some familiarity, I opted to go with Jekyll. Jekyll is developed in the Ruby programming language. It is a mature static site generator and is most well known as the source of most Github project pages.

Installing Jekyll

To install Jekyll you will need the Ruby programming language installed. On Arch it is a simple:

$ pacman -S ruby

For all other operating systems, you should consult the Ruby documentation.

Jekyll is installed via the Ruby package manager as a Gem which is Ruby’s package manager. The Installation Guide covers the required steps.

Creating your first Jekyll static site

As an example of ow easy it is to work with Jekyll open a terminal and enter:

$ gem install jekyll bundler
$ jekyll new my-awesome-site
$ cd my-awesome-site
$ bundle exec jekyll serve

If you open a browser and enter http://localhost:4000 in the location bar you should see:

That is all you need to create your site.

Designing Your Blog

At this point you have two options:

• Spend time designing your killer static site/blog. Apply your creative licence and update the CSS files generated by Jekyll and add you own images.
• Appreciate your lack of creative ability and Google for Jekyll themes.

I opted to go for the second choice. There are many sites that offer free Jekyll themes including:

• jekyllthemes.org
• themes.jekyllrc.org
• jekyllthemes.io

Once you have downloaded the theme you want to use you can unzip them into the directory used to host your site.

This post is more about how to host a static site on S3. So I will end my flash overview of Jekyll here and leave you with the documentation.

Setting up your hosting on AWS

First, you will need to head to Amazon and sign up for an AWS account. As of authoring this post, I am leveraging the benefits of the free tier.

You will also need to download the AWS Command line tool to work with their infrastructure. The tool is Python based and you should have a V2.7 Python environment set up. On Arch I found this out the hard way as I installed via pip when I needed to use pip2. Anyway you can install the command line tool using:

$ pip install awscli

Next, we should create an Amazon user account which Amazon call IAM. This is the account you use within AWS to setup your environment. Go to here and click Create New User. On the displayed page you should enter your username and leave the default options selected. Clicking the Create button will complete the setup process. You should save the API keys generated in this step as you will need them later.

Return to here and select your user and navigate to the Permission tab. You need to select Permission tab and click the Attach Policy button. This should display a list of policies and the first of which should be Administrator/Access. This is what we want and you should select it and click the Attach Policy button.

At this point, we can configure our local CLI environment. We can configure the access keys for the user we have set up so future commands do not need them passed. Type

$ aws configure

Complete the credential details requested and leave the region and format defaults as displayed.

S3 is Amazon’s cloud storage service. It can be used for storing all kind of files but we are going to use it for storing our static website. S3 works by defining Buckets which are essentially directories. To set up a Bucket for our site from the AWS CLI enter:

$ aws s3 mb s3://www.mywebsite.com

$ aws s3 website s3://www.mywebsite.com --index-document index.html --error-document error.html

Obviously, substitute mywebsite.com with your domain

This will create the Bucket and configure it to serve a static site and also sets the default document and error page.

So as a reward for sticking with me through the setup and configuration we can now deploy our static site. The first step is switch to the directory containing your site source and run

$ jekyll build

This will ensure your latest changes are compiled to the _site directory. Now we want to push the contents of the _site directory to S3 which we can do as follows:

$ aws s3 sync --acl public-read --sse --delete /path/to/static/site/ s3://www.mywebsite.com

This command will sync all the files in the _site directory to your S3 Bucket, The flags passed do the following:

• –acl Sets the files as publicly readble.
• –sse Sets encryption on the files.
• –delete Force S3 to delete any files that are not in your _site directory.

At this point, you will be able to verify that your site is available to view by visiting http://www.mywebsite.com.s3-website-us-east-1.amazonaws.com

Conclusion

If you are only using S3 to host a development release or a site that you do not plan to make public this is where we finish.

If you are deploying a site that will be open to the public then I urge you to investigate the Amazon CloudFront service. This is a CDN service that not only caches copies of your site for faster access but also offers the ability to generate SSL certificates for your site to improve security for your users.