AWS Jekyll Site with CodeDeploy
After a series of failures hosting my blogs that ran on my ’experimental’ servers that were always a playground for new and oft-breaking changes, I decided I needed to do something a little bit differnet. After being inspired by the static sites of some people at work, I decided I wanted to give Jekyll a go and see what I thought. Having recently had a great interest in learning about AWS, I decided to use exclusively AWS services for the automatic build and deploy of the site as well as the hosting. The only part of the pipeline I decided I did not wish to run on AWS was the git hosting itself, to keep the project in the same place as the rest of my code I am keeping it on github.
With a plan in place, the first step is getting a simple site running on AWS without auto-deploys. As is standard practice at this point, I decided to use S3 for the hosting and put a CloudFront distributon in front of it. I’m not going to go too deep into this setup as there are plenty of tutorials out there (Just google “Jekyll on S3”), and instead I’m going to focus on the lesser-documented part of building and deploying the site using AWS CodeDeploy.
You can create the pipeline as normal, selecting and setting up a source as normal. At the build stage, add an AWS CodeBuild provider and create a new project. We’ll be using the official Jekyll docker image and so will need to select “Custom Image” and set it to “jekyll/jekyll:latest” (or, if you want a more stable build, lock it to the latest version when you set it up). We will need to setup the build script configuration but we will come back to that once we’ve got everything in the AWS console setup. You can leave everything else in the popup at the default value and save it.
The final thing to do in the AWS console is setup where the build is going to deploy to. This will be the S3 bucket, so at the Deploy Stage section select “Amazon S3” as the provider. Find the bucket you setup earlier in the list and leave the object key blank and Tick the “Extract the file before deploy” checkbox. Once you get to the deploy stage Create the Pipeline and you will be finished in the AWS console.
The final step is to setup the buildspec and make a small tweak to the jekyll configuration. The build configuration is very simple because we already have Jekyll installed. All we need to do is run a build, set everything in the _site
folder as an artifact, and cache the vendor directory to increase build speed. Commit this file to your repository as buildspec.yml
and when pushed the pipeline should now run and deploy your code.
version: 0.2
phases:
build:
commands:
- mkdir _site
- jekyll build
artifacts:
files:
- "**/*"
base-directory: _site
name: site
cache:
paths:
- vendor
You will notice, however, that if you try to click on one of the blog posts to look at it on it’s own, you will get a 404. This is because S3 doesn’t treat index.html files as most servers do, and so when you just navigate to the folder but S3 doesn’t realise it should be displaying the index.html file. The easiest way around this is to tell Jekyll to link directly to .html files. This can be done by changing the _config.yml file and adding (or modifying the existing line):
permalink: /:year/:month/:day/:title:output_ext