Chunk 1: Building the Front End
Chunk 1 of the AWS CRC has a few things to accomplish:
- Build a resume site using static HTML and CSS
- Host the static content on an s3 bucket
- Access the website using HTTPS, which requires CloudFront
- Use a custom domain name, which will require a certificate for https usage and DNS entries using Route53
Getting started
I am not a front-end web developer, and UI/UX design is not one of my skills. So, rather than fumble around trying to make my resume webpage look good, I decided to use a static website generator. I chose to use Hugo, since they have a lot of templates to choose from.
Hugo has a bit of a learning curve, but once I got through that, it was pretty straight forward to edit and generate my site.
The infrastructure
To make things easy, I went ahead and registered a new domain name with AWS, and it automatically created a Route53 hosted zone. So that part was done.
Rather than point and click in the AWS console, I decided to start with IaC using Terraform. I also decided to use GitHub actions(https://docs.github.com/en/actions) for CI/CD to get familiar with them. I had only used GitLab CI/CD and runners previously, which are very similar to GitHub Actions.
You can see what I wrote here. After scouring for examples, I wrote some scripts to create the s3 bucket, certificate, and CloudFront Distribution.
Everything was working great, except I didn't realize that the CloudFront default root document(index.html), only applies to the actual web root, not any subdirectories. Unfortunately, the Hugo site I generated, used subdirectories for my individual pages. I wrote a CloudFront function to rewire all requests for "/ or subdir/" to grab the index.html document in that folder.
So far, so good. It was time to move onto the backend of the challenge.
Top comments (0)