This page looks best with JavaScript enabled

Build & Deploy Site to S3

 ·  ☕ 3 min read  ·  ✍️ John Minnihan

This site, jbminn.com, is implemented as a Hugo static site. Each post originates as a markdown file with front matter, i.e. post metadata, and content.

It’s served as an S3 website behind a cloudfront distribution and using this script, those 2300 objects are built + deployed in approximately 29 seconds.

To build and deploy the site, there are three main steps:

  • Build the hugo site
  • Copy the generated file hierarchy to the S3 bucket
  • Invalidate the cloudfront distro so the new content is pulled in to refresh the edge caches

This bash script automates all that. Don’t underestimate the value of a tight bash script. It’s easily my most used tool.

For those unfamiliar with Hugo - when a site is generated, content is placed in a folder named public in the root of the project. This script is run from the root and so first removes the previous build’s public folder prior to rebuilding. This honors the principle of clean builds.

Be sure to update this with your profile name, bucket name and cloudfront distribution ID.

build+deploy.sh

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/bin/bash

 # build
 echo ''
 echo 'Now building the site with the most recent edits...'
 echo ''
 rm -rf public; hugo --buildDrafts
 sleep 2

 # copy
 echo ''
 echo ''
 echo 'Now copying built site to S3...'
 sleep 2
 aws --profile my-profile-name s3 cp public s3://my-bucket-name/ --recursive --acl public-read

 # invalidate cloudfront
 echo ''
 echo ''
 echo 'Now invalidating the existing cloudfront distro to allow the new site to rollout...'
 aws --profile my-profile-name cloudfront create-invalidation --distribution-id ABCDEF12345XYZ --paths "/*"

 echo ''
 echo 'The build and deployment of the site is complete.'

Share on