This post was the first real post I made, and explained how I went about creating the site using Jekyll. However due to the complexity of getting a decent theme applied to it, I decided to use Hugo instead. So this post is purely for info purposes and is no longer strictly accurate, as the site you’re reading this on was actually compiled using Hugo.

So first-off, I’m not a developer. I know bits of coding, mainly Powershell, Python, Yaml, JSON. But I’m useless really when it comes to websites. I can reverse-engineer code relatively well, but I didn’t want to spend the time copying someone else’s site and making it my own, that’s a recipe for many hours of work, and I knew there must be applications out there for this kind of thing, and my only real requirements were:

I don’t want to have to design the site from scratch, and
I want it to be simple and hostable from an S3 bucket

So after a bit of searching, I stumbled across Jekyll, which seemed to do just what I was after.

Now I’m not going to go in depth about Jekyll and it’s inner-workings, there’s plenty of stuff out there written by people who know MUCH more about it than I do! This post instead aims to simply show what I did to get this site up and running, and in time I’ll update it to include the costs, as I’m hoping it’ll be very little!

The end result here aims to be:

Easily updatable site (Jekyll)
Website code maintained in a Git Repo (AWS CodeCommit)
Automatic deployment of updated site (AWS CodeBuild/CodeDeploy)
Cheap hosting (S3/Cloudfront)

And here’s what it looked lik after I applied the Plainwhite theme (which was the theme I liked the most that didn’t require a ton of additional work to get implemented):

So onto it.

Pre-requisites

This guide assumes you already have the following:

An AWS Account
Visual Studio Code

1. Setting up Jekyll

Jekyll have some good guides on the Jekyll site for getting Jekyll installed. I’m doing this on Windows, so just followed the Windows guide, easy enough, though it doesn’t actually tell you how to go about running it once it’s installed. For that, you’ll need follow step 3 from the Quickstart Guide

Mike Dane also has some great videos on Jekyll.

Once complete, you should have the default site running on http://localhost:4000 as follows:

2. Set User Permissions in AWS

With Jekyll up and running, it’s now time to setup AWS so we can store and serve our content.

Log in to AWS and select (or Create) your User. We’ll need to give this user access to AWS CodeCommit (which we’ll be using as our Repo where we’ll store our Site config) as well as access to S3 to create Buckets and manage objects within them. So head to the user permissions and attach the AWSCodeCommitFullAccess and AWSS3FullAccess Managed Policies.

IMPORTANT! - **You should always where possible restrict permissions down to only what is required, I’m using the FullAccess Policies in this guide for demonstration and simplicity purposes.

You’ll also need to generate some HTTPS Git Credentials so we can connect to our CodeCommit Repo later. To do this, head to the Security Credentials tab for your user, and under HTTPS Git Credentials for AWS CodeCommit, click Generate credentials and be sure to download them to a safe place.

3. Create your buckets

I created 3 buckets for this site (the names have been replaced with examples in the steps below)

Create 3 Buckets as follows:

site-bucket - This one is for the site itself (i.e. just the _site directory in my blog folder and it’s contents)
site-config-bucket - This one is for the site config (everything in my blog folder). *This one is optional, as your code will be stored safely in CodeCommit anyway)
site-media-assets - This one is for media assets such as images/video/audio

site-bucket and site-media-assets should both be Public. To do this, once the bucket has been created, select it and head to the Permissions tab, and ensure that all the “Block Public Access” options are unchecked as follows:

Then in the Bucket Policy just below, enter the following policy, ensuring you change the bucket_name to your actual bucket name:
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Public-Access",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket_name/*"
        }
    ]
}
```
Perform the above steps for both the site-bucket and site-media-assets buckets. The site-config-bucket should remain private and only accessible to you/your AWS account, so make sure you leave all the Block Public Access settings Checked for that one.
You’ll also need to set the “Static Hosting Website” config of your site-bucket. Simply select your site-bucket, select the Properties tab, then scroll all the way down to Static website hosting, and click Edit
Enable Static website hosting, selecting the Host a static website option, and set the index and error documents as follows, then click Save changes

4. Create and clone the AWS CodeCommit Repo

Now we have our user and our buckets, it’s time to create our Repo and get it updated with our Jekyll content.

Head over to the AWS CodeCommit Console, and Create a New Repository:
Once the new Repo is created, select it and click Clone URL > Clone HTTPS:

This will copy the git URL for you to use in Visual Studio Code.
Open VSCode, ensure you have the Explorer open, and select Clone Repository and paste your CodeCommit URL from the previous step:
When asked for Credentials, enter the creds you downloaded from Step 2, and select a suitable location on your Computer to save to.

And now we have our version controlled repository setup!

5. Create the AWS CodeBuild Project

Becuase we’ll be synchronising our entire blog code and config to CodeCommit, we need to strip out the important _site folder so only this folder is uploaded to our S3 Bucket which will be serving the site content. To do this, we’ll use CodeBuild to extract the _site folder and create an Artifact from it, which will be ingested by CodePipeline and pushed to our Public site-bucket S3 Bucket.

Select Build and Create build project
In the Project configuration, give it a suitable name, e.g. get-site-content
Under Source 1 - Primary, select AWS CodeCommit as the provider, the Repo you created in Step 4 as the Repository, Branch as the reference type, and master as the Branch.
Under Environment, use the config from the below, ensuring you use the latest version of the Standard Amazon Linux 2 runtime, New service role and provide a suitable role name.
Under Buildspec, select Insert build commands, and paste the following code:
```
version: 0.2

artifacts:
files:
    - '**/*'
base-directory: '_site'
```
This simply instructs CodeBuild to create an artifact using only the contents of the _site Directory of our blog folder.
Leave the rest of the options as default, then hit Create build Project

6. Create the AWS CodePipeline

In this section, we’ll be creating a Pipeline that will run every time the CodeCommit Repo is updated. It will push the contents of the repo to CodeBuild, which will extract the _site folder as above, then push that data into our site_bucket S3 Bucket. It will also push the full Blog folder into our site-config-bucket.

Select Piepline > Pipelines and Create new pipeline
Provide a suitable Pipeline name, and create a new service role. You can leave the default name if you wish. Then click Next
On the Source screen, select AWS CodeCommit, then select master branch of your Repo. Leave the other options as default and click Next
On the Build stage, select AWS CodeBuild, then select the Build Project we created in the previous section. Click Next
On the Deploy screen, Select Amazon S3 as the deploy provider, and your site_bucket as the Bucket. Make sure you tick Extract file before deploy, otherwise CodePipeline will upload the content as a zip file, which obviously won’t work as we require the contents to be displayed in the root of the bucket in order for them to be served as a static website.
Review your settings on the Review screen, then click Create pipeline

If you then select your pipeline, you should be presented with something that looks similar to the below (mine has already been run at this point, hence the green ticks)

7. Uploading you site

At this point, we’ve got our CodeCommit Repo created, though it’ll be emtpy at this point. We;ve got our CodePipeline created and ready to run, and we have our Buckets created ready to store our data. All that’s left to do is to upload our site!

Make the necessary changes to your site/blog posts within VSCode. Once done, ensure you save and commit all changes locally. NOTE - You’ll want to make sure you have Jekyll running so it builds your blog and creates/updates the all-importing _site directory based on your changes. It’s also a good opportunity for you to check the update live by heading to https://localhost:4000
Push your changes back up to the origin CodeCommit Repo
At this point, you should head to CodePipeline which should now start processing your CodeCommit changes and pushing the data to S3. You can see it in action similar to below:
Once complete, you should then be able to view your site by using the public S3 URL of your site-bucket Bucket.

Creating this Blog using Jekyll

(Outdated/Archived)

TOC