Hosting a Jekyll Site in S3 Part 2

In Part 1 resources were created to host the Jekyll site in S3 using Terraform

Now let’s setup the git repo and gitlab server to automatically push changes to the site to S3.

Setup git repo

Steps to setup git repo to build and deploy new jekyll site contents during every new git push into gitlab.

Create a .gitlab-ci.yml file in the root of the repo.

This will:

1. Build the Jekyll site using the gitlab-runner and bundle it for deployment.
2. Use aws cli to deploy the Jekyll site contents to S3
3. Invalidate the cloudfront distribution to refresh all the contents

image: ruby:3.3

stages:
  - build
  - deploy

build:
  stage: build
  before_script:
    - bundle config set path 'vendor/cache'
    - bundle install
  script:
    - bundle exec jekyll build --future
  artifacts:
    paths:
      - _site
    expire_in: 4h
  when: always
  only:
    - master

deploy:
  stage: deploy
  image: python:latest
  script:
    - pip install awscli
    - aws s3 sync --delete _site/ s3://${S3_BUCKET}
    - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'
  artifacts:
    paths:
      - _site
  when: always
  only:
    - master

Setup Gitlab Server

1. Open the blog repo in gitlab. Go to Settings → CI/CD → Variables
2. Enter the required variables by the CI/CD pipeline to deploy the site to S3. Make sure to mask and protect the secrets.

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• CLOUDFRONT_DISTRIBUTION_ID
• S3_BUCKET

Push code to deploy site

Once the code is commited, pushed, and merged into the master/main branch, the gitlab ci jobs should start the deploy process to S3. Monitor the deployment under Build → Jobs