Building this static website with Jekyll and a Pipeline to automatically deploy it to AWS S3 using Circle CI - Part 1

Building the Website - Part 1

Building this static website with Jekyll and a Pipeline to automatically deploy it to AWS S3 using Circle CI - Part 1

Mar 7, 2019

  • Jekyll
  • AWS
  • S3
  • CI/CD
  • Circle CI

  • Introduction

    In this post, I will explain the high-level architecture used to built this website using Jekyll and deploy it automatically using Circle CI to AWS S3. Aside from storing images or files, S3 can also host static websites that are made up of HTML, CSS, and Javascript. Amazon gives you a 5Gb free tier storage in S3 meaning there is no cost to host this solution. You will only pay for the Route 53 domain if you want your site to use a specific URL.

    Jekyll

    Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organisation sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.

    Circle CI

    CircleCI’s continuous integration and delivery platform helps software teams rapidly release code with confidence by automating the build, test, and deploy process. CircleCI offers a platform that lets teams ramp quickly, scale easily, and build confidently every day. *

    *from https://circleci.com/about/

    High-Level View

    Jekyll is used to build the website and generate static content. Git is used to committing the code into GitHub (if you don’t know the difference between Git and GitHub, check out a future post on this). GitHub sends a request (webhook) to Circle CI that will extract the code, build, run tests and deploy to AWS S3 Staging environment. Once the code has been tested and verified, manual approval is done on CircleCI that will start the build process and deploy it to the Production environment.

    Getting Started

    Let’s get started. First Install Jekyll, you’ll need Ruby to install the gem.

    $ gem install bundler jekyll

    Create a new website

    $ jekyll new my-awesome-site
    $ cd my-awesome-site

    Jekyll will create a basic website structure

    Build the site and make it available on a local server

    $ bundle exec jekyll serve

    Local URL: localhost:4000

    First part done!! Jekyll running!


    Staging and Production Buckets

    Now, we will setup S3 folders with web hosting for Staging and Production buckets.

    • Sign in to your AWS account or create a new one if you don’t have one. You won’t be charged if you stay within free tier services. Find more about Free Tier here.
    • Click on S3 -> Create Bucket
    • Give a unique name to your bucket and add -staging at the end: [unique-name]-staging
    • Select your closest Region and click Create
    • Click on your newly created folder -> select Properties and Enable Static website hosting

    • Select Permissions, Public access settings, Edit, untick all boxes and Save

    • Select Bucket Policy and include the policy below to allow GetObject
    • Repeat the process above and create a new Bucket adding -production at the end: [unique-name]-production

    • Let’s now test the buckets:

    • Create a simple index.html and upload to both S3 buckets

    <p>Hello World</p>

    Now, we will create the CloudFront distributions. Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.

    • From the AWS Dashboard, select CloudFront
    • Click on Create Distribution and Get Started under Web option

    • On Origin Domain Name option select your S3 staging bucket previously created and click Create Distribution
    • From CloudFront Distributions list, click on your newly created Distribution. Copy the Domain Name XXXXX.cloudfront.net and paste it into a new browser Tab. You should see your html page.
    • Repeat the process and create your production distribution

    Congratulations!! :smiley: Buckets created!


    Repository

    The source code will be stored on GitHub. In order to commit code to GiHub we will use Git

    • Download and install Git

    Login to your GitHub account or create a new one if you don’t have one. GitHub won’t charge you if your repository is public. Create a new repository with an awesome name!

    Copy the address of your newly created GitHub repository

    Initialize your Jekyll folder

    • Go to your website folder
    $ cd my-awesome-site
    • Run the following commands to initialise the Git folder
    $ git init
    $ git remote add origin git@github.com:your github repository

    Create a new file called .gitignore in the root of your website directory. This file will instruct Git to ignore certain files that will not be pushed to the repository.

    • Add, Commit and push your code to the repository
    $ git add .
    $ git commit -m "description"
    $ git push -u origin master

    You may need to enter your password at this stage.

    Go to your GitHub repository, and you should see the list of files. Now, we are ready to create our continuous deployment process.


    Deployment

    The deployment process is run through CircleCI.

    When the develop branch is merged with master, it automatically prompts a workflow in CircleCI that builds the website and deploys it to the [staging URL]. Once you have tested the changes (on both mobile and desktop, and on all browsers, including IE11), click the confirm_deploy button in the workflow, and the deployment will start.

    This will be covered in Part 2 of this post.

    :trophy: