Transferring a Jekyll Blog from Vercel to AWS
Published: 2020-10-25 23:36:33

---
layout: post
published: true
title: "Transferring a Jekyll Blog from Vercel to AWS"
comments: false
slug: jekyll-blog-vercel-to-aws 
description: "For when the time comes that you want to go all in with AWS."
categories: [aws, vercel, jekyll, devops]
keywords: "aws, vercel, jekyll, devops"
author: John Alcher
cover_image: "https://images.unsplash.com/photo-1480843669328-3f7e37d196ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
canonical_url: "https://alcher.dev/2020/jekyll-blog-vercel-to-aws/"
---

## Introduction

This blog is built with [Jekyll](https://jekyllrb.com/), a static site generator written in Ruby. And for the longest time, [Vercel](https://vercel.com/) (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.

![](https://alcher.dev/assets/images/jekyll-blog-vercel-to-aws/alcher.dev.old-setup.png)


## 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

![](https://alcher.dev/assets/images/jekyll-blog-vercel-to-aws/alcher.dev.target-setup.png)
## Something Live on the Web

Let's knock off something easy and something that we can quickly see. Using [S3](https://aws.amazon.com/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:

<script src="https://gist.github.com/alchermd/28e19577d446d310a0b95544f499c4d0.js"></script>

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...

![](https://alcher.dev/assets/images/jekyll-blog-vercel-to-aws/s3-bucket-upload.png)

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](https://aws.amazon.com/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](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html), we just need to enter the following command:

```bash
$ 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/](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:

![](https://alcher.dev/assets/images/jekyll-blog-vercel-to-aws/alcher.dev.target-setup-with-s3.png)

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