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

Building the Website - Part 2

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

Mar 10, 2019

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

  • Introduction

    This is the second part of the post explaining how I built the website with Jekyll and a pipeline to automatically deploy it to AWS S3 using Circle CI. Please read Part 1 before proceeding. Part 1 covers how to install Jekyll, creating the Staging and Production buckets in S3, configuring the CloudFront distributions, your GitHub repository and committing your code to the repository.

    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 them, 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.

    Circle CI Local Configuration

    CircleCI configuration is stored in a single YAML file located at ~/.circleci/config.yml, where ~ is the root of your project’s directory. Since most of your work with CircleCI occurs in this file, it is important to understand the basics of YAML formatting. YAML is a human-friendly data serialization standard for all programming languages. It is a strict superset of JSON, another data serialization language. This means it can do everything JSON can… and more.

    We will configure 4 jobs in config.yml:

    • build
      • 1) Checkout the code
      • 2) install Jekyll
      • 3) build the website
      • 4) persist to _site folder
    • deploy_staging
      • 1) Install AWS CLI
      • 2) Add AWS Credentials
      • 3) Deploy to S3 staging
      • 4) Clear CloudFront staging cache
    • confirm_deploy
      • 1) Manual approval after testing in staging environment
    • deploy_production
      • 1) Install AWS CLI
      • 2) Add AWS Credentials
      • 3) Deploy to S3 production
      • 4) Clear CloudFront production cache

    Create file config.yml, copy the content below and save it on ~/.circleci/ folder:

    Replace YOUR BUCKET and YOUR CLOUDFRONT ID with the buckets and cloudfront ids created in Post 1.

    You can find extensive documentation on Circle CI website:


    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.

    Sign in to CircleCI dashboard or create a new account with your GitHub account. This will integrate Circle CI and GitHub.

    Click on Add Project then Follow Project

    Leave the OS as Linux, Select Ruby as the Language and click Start Building.

    This will start the building process, but it will fail as we haven’t included our AWS variables.

    Login to your AWS Console and go to IAM (Identity and Access Management). AWS Identity and Access Management (IAM) enables you to manage access to AWS services and resources securely. Using IAM, you can create and manage AWS users and groups, and use permissions to allow and deny their access to AWS resources.

    Let’s create a new user with the strict policy to upload content to S3 and clear CloudFront cache:

    • Select Add User and give it Programmatic access

    Click Next then select Attach existing policies direclty and select the option CloudFrontFullAccess.

    Click Next, insert any tags you would like and Next again. Review your items and click Create user Very important now: Download your csv credentials or write it down somewhere safe your Access key ID and Secret access key.

    Now select your user and click Add inline policy. Select the JSON tab copy the content below in your policy. Replace the name of the buckets with the buckets created on Part 1:

    This will allow this user to only add objects to specific buckets listed in the policy. Provide a name for the policy and click Create Policy

    Congratulations! You have created your IAM user .

    Now, let’s go back to Circle CI and add the AWS keys. Login to CircleCI dashboard, Click on Workflow then the gear highlited below:

    Select Environment variables option and add two variables: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY with the values from the user credentials.

    Now, we will commit some changes in website and this will trigger automatically the CircleCI build and deploy it to staging in AWS. Make any change in your code and commit using the following commands:

    $ git add .
    $ git commit -m "description"
    $ git push

    You may need to enter your password at this stage.

    Login back to CircleCI, click workflows and you should see your task running:

    Click on the task and it will expand to your workflow items:

    Click on the job and it will details the steps. The workflow will stop at confirm_deploy

    Now, go to your CloudFront staging URL and you will see your deployed website. If everything looks good, approve the deployment clicking on confirm_deploy

    This will continue the process and deploy it to the production environment

    You can now repeat this process and every commit will trigger the build and deploy to the staging environment.