Introduction

This blog is built with Jekyll, a static site generator written in Ruby. And for the longest time, Vercel (formerly Zeit) is my hosting option of choice. Vercel offers everything one might need for a static website: Github integration, framework support (for Jekyll and Hugo to name a few), and even domain management under one neat dashboard. But as I try and expand my knowledge with cloud technologies, it makes a lot of sense to move this small traffic personal blog onto my cloud provider of choice.

This article documents the process that I took in order to achieve that.

Background

Let’s start with an overview of my current setup. I have a static site that I build with Jekyll, which I host using Vercel. In the middle is a Github repo that is integrated with Vercel’s webhooks enabling push to deploy capabilites. To top it off, my domain name is registered under Namecheap in which I also manage through Vercel’s domain management system.

The End Goal

Ideally, I would like to replace the role of Vercel in my stack with AWS services. That means I have to find a way to replace the following features:

  • VCS Integration (push to deploy)
  • DNS Management
  • Static Content Hosting

Something Live on the Web

Let’s knock off something easy and something that we can quickly see. Using S3, I can get a 100% replica of my live blog by hosting the generated static site within a bucket configured for web hosting. To configure a bucket, I just followed the defaults within the S3 Bucket Creation wizard with the exception of the following:

  1. Under Properties -> Static website hosting, I checked “Use this bucket to host a website”
  2. Under Permissions -> Block Public Access, I unchecked “Block all public access”
  3. Under Permissions -> Bucket Policy, I added the following policy:

I now have an S3 Bucket that can be used to serve a static website. If I run bundle exec jekyll serve within my local project, I will be given a _site directory that contains the static assets needed to serve my blog. What left is to put the contents of this directory. That should be simple enough, right? Let’s just open the Bucket’s file dialog, CTRL+A the directory’s contents, and we’re pretty much done…

Nope! You apparently cannot upload directories using the S3 Bucket wizard. We are engineers, we shouldn’t be using the UI that much. Let’s use the command line instead!

The AWS CLI

If you’re going to do a decent amount of work with AWS services, you’ll be pretty inefficient (and probably error-prone) if you spend your time using the every changing web interface of the AWS Management Console. The AWS CLI provides unified access to all AWS has to offer. Let’s take advantage of it by sycning our S3 Bucket with the contents of the _site directory. After making sure that you have configured your account, we just need to enter the following command:

$ aws s3 sync _site s3://bucket-name

At this point, you can now access your S3 Static Website! You can find the URL under Properties -> Static website hosting. Here’s mine: http://alcher.dev.s3-website-us-east-1.amazonaws.com/

Conclusion

We didn’t have much parity with our Vercel setup, but we did accomplish a lot – particularly a static website with high availability using S3 Buckets. Here’s our setup so far:

Let’s see what we can further improve. I’ll see you on the next one!

Got any feedback or suggestions? Feel free to send me an email or a tweet.
Ciao!