Deploying This Static Website

How I deploy this static website generated by Hugo to an AWS S3 bucket and use CloudFront to serve it.

Preamble

If you read many tech blogs, you’ll probably have seen the CSS of my website before. It is the minimo theme for Hugo and it seems to be somewhat popular. I used to deploy this site to an EC2 instance and put Nginx infront of it, but I figured that it is probably a lot easier to manage a static website using a cloud provider’s CDN than to manage my own virtual machine. It means that I get to deploy my website with better performance, and I also don’t have to log into my instance and run yum update every time a scary looking CVE comes out. It’s also significantly cheaper to serve a website out of an S3 bucket.

Deployment instructions

The Cloudformation template that runs this site is (mostly) automated and you can find it on the repository for this website.

This is the process I got it down to so far:

  1. Run an AWS CLI Command to deploy the stack: aws cloudformation create-stack --stack-name thaniriS3wesbite --template-body file://template.yaml --region us-east-1 --parameters ParameterKey=DomainName,ParameterValue=thaniri.com ParameterKey=ValidationDomain,ParameterValue=thaniri.com
  2. Wait for the Cloudformation stack to get stuck on creating the Amazon Certificate Management resource. Cloudformation will provide a message to create a CNAME record in the domain that the website is going to be deployed to. Once the CNAME is made manually, the stack will proceed deploying. This can probably be automated by using the AWS CLI to parse this prompt and create the DNS record, but I only have one such website and I will not spend the time to do that.
  3. Manually modify the Cloudfront distribution origin domain name to be the S3 bucket website www.thaniri.com.s3-website-us-east-1.amazonaws.com. See TODO to know why this step is manually.
  4. Make a merge to my repository to get travis-ci to copy over the generated HTML files to the S3 bucket.

While the process has been simplified, the waiting for the CNAME record creation and as well as the Cloudfront resource creation does end up taking several minutes.

TODO:

I actually want to be able to read the contents of my S3 bucket as well as through CloudFront. However, the template doesn’t accept the s3 website URL of a bucket as a valid s3 bucket URL. So for now, I deploy the stack “broken” and then in the CloudFront web console I change the origin to www.thaniri.com.s3-website-us-east-1.amazonaws.com. Given that I am allowed to actually do that through the web console, it is probably a misbehaviour of CloudFormation to not allow me to do it. I will eventually need to find out how to work around this when I begin another web project.