I thought I would share how I built this site. It’s nothing crazy or complicated. But maybe it will help someone, and maybe help me out too if I document what I did.

I’m a big fan of automation, and I like using code to define and manage my infrastructure. I’ve grown to really like AWS Cloud Developmet Kit (CDK). At my current employer, I was one of the first adopters and helped to drive it’s adoption throughout the company.

I am not a web developer by any means, although I have dabbled with it in the past. So I wanted something that would be easy for me to write pages, add various content…etc. So for this first version of jerrington.com, I chose Jekyll as the main framework.

It seemed easy enough at first, although I was intimidated by using Ruby. It ended up not being that bad.

Building the first version

Get started with Jekyll.

On your local machine (Or anywhere you are doing your development) you need to install Ruby. Since I run Ubuntu 22.04 as my home computer, I used the Ruby packages provided by Ubuntu.

sudo apt-get install ruby-full build-essential zlib1g-dev

Once Ruby is installed, you need to modify your path so you can easily access gems locally.

I use zsh as my shell, so you might need to modify this if using a different setup

# I added the following lines to my .zshrc file
export GEM_HOME="$HOME/gems"
export PATH="$HOME/gems/bin:$PATH"

Then we need to install both jekyll and bundler

gem install jekyll bundler

Now we have the basic framework to build our site locally.

Jekyll provides a built in webserver to test out changes locally. I reccomend checking out the documentation for more info. This isn’t meant to be a tutorial on Jekyll or any specific process, just a general Overview of my steps.

We need a template!!

I used the following template for this site. YaT Theme

I used this as a starting point. It provided me with a lot of examples for making posts, and a great way to use this as an initial framework.

I didn’t want to spend a lot of time on this part, so I was able to get this going rather quickly.

Let’s put it all together!

After fiddling around with Jekyll and the YaT theme for a bit on my local computer, I made enough changes and my first post, and felt like I could publish this to the world. Expect this site to change a lot in the next few months, as I dive more deeply into Jekyll and creating more content.

To get this running in production, there are lots of Cloud providers and sites that can host your pages for you. They all have pros and cons, and everyone’s going to have opinions on everything. I’m overly familiar with AWS and already had an account with them, so figured I would just go with what I know for this part. Let’s not step out of the comfort zone too much just yet!

I kept this deployment as simple as possible (cause I want to keep it as cheap as possible!)

Infra Stack

I’m using an S3 bucket to store my site. Since Jekyll generates static web files, S3 made a lot of sense. I already do a lot of IT during the day (It’s my job I guess….) so the last thing I want to do is to spend a lot of my free time managing this infra. All the static files are hosted in the S3 bucket.

To serve the content, and to put an SSL on my site (for obvious reasons), I am also utilizing Cloudfront. This is a CDN from AWS that allows my site to be cached in lots of locations around the world. I’m hoping I’ll stay within the free-tier of this service since my site is super small.

I’m also utilizing other support services in AWS, like ACM for certificate management, Route53 for DNS, Cloudwatch for logging….etc.

Deployment Pipeline

I am also utilizing AWS Codepipeline and CodeBuild to build my site and push the changes automatically whenever I publish.

Below is my buildspec for this specific site.

I have also added steps to perform a cache invalidation on the CDN to help ensure changes are seen immediately.

{
"version": "0.2",
  "phases": {
    "install": {
      "runtime-versions": {
        "ruby": "latest"
      },
      "commands": [
        "gem install jekyll bundler",
        "bundle install",
      ]
    },
    "build": {
      "commands": [
        "JEKYLL_ENV=production bundle exec jekyll build"
      ]
    },
    "post_build": {
      "commands": [
        "aws s3 sync _site/ s3://$S3_BUCKET --delete",
        "aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths '/*'"
      ]
    }
  }
}

Automate it?

I was able to use CDK to define all my AWS Infra as code. I’m not comfortable publishing this code yet, but will probably make it public in the future.

All of the items above are defined into two seperate stacks. One for hosting infra (S3, Cloudfront, ACM, Route53). And another stack for the deployment pipeline.

Since I really enjoy using CDK, I will probably write some content about CDK, and some tutorials for different topics.