Adding basic Continuous Deployment to your static site.

By Ben Schaufler

This tutorial will show you how to setup basic Continuous Deployment for a Hugo (static site generator) in AWS using s3, and cloudfront.

  1. Open Gitlab Project settings for the repository that contains your Hugo Site.

A test image

Add variables above with the corresponding values from your AWS environment.

  1. Add a .gitlab-ci.yml to the root directory of your repository and add the following:

  • The below is a basic Continuous Deployment pipeline intended to deploy your static site on a merge to master. It consist of two stages build and deploy.

  • We then add a variables block to refer to the variables we defined in the ci/cd settings of our repo project settings in the previous step. We add an additional variable that tells git to clone sub-modules for the themes for our Hugo static site.

  • In our build stage we define the image as the latest hugo image and associate it with our build stage defined above. The script block tells tells hugo to build the minified version of your site which is stored in the public folder. The artifacts block tells gitlab to make the public folder containing the built site an artifact to be referenced in our next stage.

  • In our deploy stage we define our image to be an aws cli image so we can issue AWS commands in our script block. Our script block uses the “sync” command over the “cp” cmd to copy new or modified files from our *./public” artifacts path from the previous stage to the destination. Differences between the two can be found here. We then add a command to invalidate our cloudfront distribution id corresponding to our site.

stages:
  - build
  - deploy

variables:
  AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
  AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
  AWS_REGION: $AWS_REGION
  S3_BUCKET_NAME: $S3_BUCKET_NAME
  CDN_DISTRIBUTION_ID: $CDN_DISTRIBUTION_ID
  GIT_SUBMODULE_STRATEGY: recursive

build:
  image: registry.gitlab.com/pages/hugo:latest
  stage: build
  script:
    - hugo --minify
  artifacts:
    paths:
      - public

deploy:
  stage: deploy
  image: garland/aws-cli-docker
  only:
    - master
  script:
    - aws s3 sync ./public s3://$S3_BUCKET_NAME --delete --only-show-errors
    - aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"
  dependencies:
    - build

Now you should see the pipeline run on a commit to master in gitlab:

A test image

Congratulations you have now successfully automated the deployment of your static site to AWS!