Automating Building and Deploying My Website

Intro

I started building my page with Hugo, the static site generator. It is super easy to get up and running with Hugo. Because the point of this site is for me to have complete control over every aspect of its design, I really enjoy the freedom Hugo gives. It's basically a system that keeps track of the links between pages and allows me to reuse components that I've built

This is going to be a project page, my first to try it out. The difference between project pages and blog posts is going to be section header. Project pages will have them, and blog posts will be more of a twitter like interface.

Problem

When using Hugo to build my site, I have to run the Hugo static site generator and then upload it to my AWS S3 bucket. While this is only a couple of commands in the command line, I don't want to have to repeat myself if I don't have to. This sounded like a perfect use for a BASH script. Below is the code to my upload.sh script. It accomplishes the following functions:

  • Jump into my main site directory (which is test for now)
  • Remove the /public folder so there isn't any leftover files from development
  • Use hugo to build the site
  • cd into the new /public directory
  • Use the aws command line interface to sync the folder contents with my s3 bucket
  • cd back to the main directory so I end the script where I started.
#! /bin/bash
echo -e "\033[1;32mMoving to hugo test folder:\033[0m"
cd /Users/youngac/Documents/hugo/test
echo -e "\033[1;32mDone. \n\033[0m"

echo -e "\033[1;32mDeleting public folder:\033[0m"
rm -r ./public/
echo -e "\033[1;32mDone.\n \033[0m"

echo -e "\033[1;32mBuilding site:\033[0m"
hugo
echo -e "\033[1;32mDone.\n\033[0m"

echo -e "\033[1;32mMoving to /Public:\033[0m"
cd ./public
echo -e "\033[1;32mDone.\n\033[0m"

echo -e "\033[1;32mUploading to S3:\033[0m"
aws s3 sync . s3://breezymint.com --delete
echo -e "\033[1;32mDone./n\033[0m"

echo -e "\033[1;32mMoving to /Test:\033[0m"
cd ..
echo -e "\033[1;32mDone.\n\033[0m"

AWS command line interface

This thing is awesome for static sites. It takes an input and an output, compares the two, and then uploads if they are different. The magic happens with the –delete tag. If the destination has files that the source does not, then it removes them. This allows me to have static content in my /static directory and not have to constantly re-upload if I make a change elsewhere in my site.