Installing Jekyll on AWS Cloud9 with CodeCommit

Hosting a website like this one on serverless AWS is easy, fast, and dirt cheap. Combine that with a static website generator like Jekyll and you have the best of both worlds: a static website that is easy to contribute to, easy to theme, and which loads fast no matter where in the world your users are.

But there’s no doubt that getting everything set up to get everything automated can be a bit of a headache. So we offer this, the first in a series that shows how we at Kickbox Frownyface build our corporate website on AWS, starting with the Cloud9 development environment for editing, and CodeCommit for source code control.

It should only take you ten or fifteen minutes to follow these steps.

We hope you find it useful.

Cloud9 as Jekyll IDEPermalink

It’s shouldn’t surprise anyone that we have a pretty small development team at Kickbox Frownyface, and we can’t spend a lot on hardware. Cloud9 is a perfect fit for us when it comes to editing the website: there’s no hardware to install or machines to configure, and we only pay for the IDE by the minute, for the time we spend editing the website. We don’t need to install a virtual machine or have a Linux box of our own, or any of that nonsene. And we don’t have to worry about dirtying up our own game dev machines by installing other software, which is a huge win for us.

Create the Cloud9 EnvironmentPermalink

Your first step is to create a new Cloud9 environment. This will be the Linux box that we’ll install Jekyll to.

Sign in to your AWS console and then navigate to the Cloud9 service. Click the Create Environnment button, and fill out the form. Here are our settings:

We choose the cheapest instance type, t2.micro, because Jekyll doesn’t need much horsepower. We name ours kickbox-web because of our internal standards.

Install Ruby and JekyllPermalink

Open the Cloud9 IDE. You’ll see a terminal window in the lower part of your screen. This is a Linux prompt that we can use to install all the tools we’ll need onto the EC2 instance that is backing our Cloud9.

Here are the steps we took to do this. First we installed Ruby, which Jekyll needs:

$ sudo amazon-linux-extras install ruby2.6
$ sudo yum install ruby-devel -y

If that worked Ruby will tell you its version, something like this:

$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

Next up is Jekyll:

$ gem update --system
$ gem install jekyll bundler
$ bundle config path ~/.gem

If that worked Jekyll will report its version too:

$ jekyll -v
jekyll 4.2.0

If you run into trouble, things may have changed since we wrote this post. Check out the Jekyll installation instructions, which will have up to date instructions.

Code CommitPermalink

Next up, we’ll create a git repository which will store our website source – that is, the Jekyll website files that Jekyll will build into HTML files for our website.

First, you need to make sure that the user you are running Cloud9 as has git privs to code commit so you can just git push to the repo from the IDE. So make sure that your IAM user, and the other editors’ users, belong to a group that includes the correct policies. To do this:

1. Navigate to the IAM service
2. Choose Groups
3. Select an existing group, or click on Create New Group and type in website-editors
4. Check the box next to AWSCodeCommitFullAccess
5. Complete the wizard and create the group
6. Click into the group and click on Add Users to Group
7. Add yourself and any other IAM users to the group

Next, head back over to your AWS console and navigate to CodeCommit. You will create a new Git repository, which will hold the source code and content for the Jekyll website. We call ours kickbox-web.

Now we just go back into Cloud9 and git clone it into the ~/environment directory that you have on that Linux box. Copy the HTTPS path and then issue:

$ git clone https://git-codecommit.[YOUR REGION].amazonaws.com/v1/repos/[YOUR REPO NAME]
Cloning into '[YOUR REPO NAME]'...
warning: You appear to have cloned an empty repository.

The warning doesn’t bother us, because it is expected to be empty. Let’s finish configuring your git settings and push up a README.md file:

$ cd [YOUR REPO NAME]
$ git config --global user.name "[YOUR NAME]"
$ git config --global user.email [YOUR EMAIL]
$ cat >README.md
A website.
[CTRL-D]
$ git add README.md 
$ git commit -m "Initial commit"
$ git push

Now that our tools are all set up, let’s just create a new empty Jekyll website and verify that everything is ready.

Create the New WebsitePermalink

We will ask Jekyll to build its new site in a directory named website, rather than the root. The reason for this will become clear in future steps – we also want an infrastructure directory, into which we can put our CloudFormation scripts.

$ jekyll new website
...
New jekyll site installed in /home/ec2-user/environment/[YOUR REPO NAME]/website. 

If that worked, you’ll see that your file tree in Cloud9 is now full of the files that are part of a standard Jekyll website.

Let’s cd into that directory and ask Jekyll to host it during our development:

$ cd website
$ jekyll serve -H $IP -P $PORT --baseurl ""

Keep your eyes open – Cloud9 will show you a little window with a hyperlink on it to your website running in dev. If you click on it you should see your new Jekyll website:

Commit to GitPermalink

Don’t forget to commit the starter website to CodeCommit.

$ git add .
$ git commit -m "Initial empty Jekyll site"
$ git push

ConclusionPermalink

So what have we accomplished? Well, we have a new cloud-based IDE all set up for us to build out our Jekyll website, and we have a git repository in which to store it.

Next step: hosting it on S3 and Cloudfront.