Home How I Built This Website
Post
Cancel

How I Built This Website

In my first post I briefly touched on the ease at which databases (i.e. any cloud-based computing resources) can now be spun up, literally with the click of a button and little to no cost. The base ‘architecture’ that is being used to host this site is a great example.

Background

Shortly after building my tetris clone in my earlier dev days, I quickly realized I needed a place to host it and just as importantly, I needed to have control over those hosting resources. So I went and bought the benwegher.com domain through google domains and after researching my options at the time (circa 2014) I ended up choosing a DigitalOcean ‘Droplet’ - aka an affordable hosted linux VM. This allowed forced me to familiarize myself with basic $ bash and all the nuances of a unix/linux OS. For reasons I deemed important at the time, I opted for a CentOS flavored droplet and went on to configure an nginx web server to host the initial version of my personal site. As a learning experience this was invaluable, but in gaining complete control, I was adding unnecessary complexity by managing the web server myself. Fast forward ‘a few’ years and my droplet had all but dried up. The days of needing a linux sandbox were behind me and it was time to reassess my options.

Enter AWS CloudFormation

If CloudFormation is new to you, you can think of CloudFormation as Amazon’s infrastructure as code (IAC) template library. Infrastructure as code services allow anyone to easily regenerate the same resources through a defined set of rules (i.e. code). In the case of spinning up the necessary resources to host a secure website in the cloud, AWS currently offers a convenient one-click solution in the form of the amazon-cloudfront-secure-static-site CloudFormation stack.

Prerequisites

  1. An AWS account and / or appropriate AWS Identity and Access Management (IAM) permissions to launch CloudFormation templates.
  2. A registered domain name, such as example.com or yourname.com, that’s pointed to an Amazon Route 53 hosted zone. The hosted zone must be in the same AWS account where you deploy this solution.

One more click and you’re live

Once the above prerequisites have been completed the majority of the heavy lifting is automatically handled by the CloudFormation template with the click of a button. Give it some time (~10 minutes) to provision all the necessary resources. Assuming none of the CloudFormation steps fail, congratulations, that was pretty easy huh?! If a step does fail, like mine did on the first go around, don’t panic! There are rollback steps built into the template in case something goes wrong - just wait for the rollback process to complete, address any obvious errors if there are any and then re-run the template. After my second attempt my default static site was up and running and relying on the following primary resources:

  • S3 Bucket - containing the files that make up the site
  • CloudFront - handles the process of delivering the S3 bucket contents to the end user (and where you can make any edge modifications if necessary)
  • Route 53 - for managing the domain / DNS records
  • Certificate Manager - handles the certificate(s) for the CloudFront distribution (HTTPS)

Next

This was a pretty good start from a getting-started perspective but we still have some quality of life improvements to make. Next up I’ll share how I set up CI/CD with GitHub actions so we can automatically update our website whenever we make changes.

This post is licensed under CC BY 4.0 by the author.