Building this static website with Jekyll and a Pipeline to automatically deploy it to AWS S3 using Circle CI - Part 1
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.
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. *
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.
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
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!! Buckets created!
- 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 email@example.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.
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.