Cloud Resume Challenge: The Frontend

Building a secure, highly-available static website in AWS with CI/CD workflow

In this post, I will be giving a general overview of the architecture referenced above and how I built it. I will also cover some of the resources I used to design a functioning web app, and some helpful hints from my experience (no spoilers!). I created this web app as part of the Cloud Resume Challenge by Forrest Brazeal. I will be covering steps 1–6 of the challenge, with the front-end CI/CD (step 15) tagged on as well. This project will provide hands-on experience building a full-stack web application using any of the major cloud providers and is an excellent exercise for experienced IT professionals and newcomers alike.

Prerequisites:

• An AWS account
• An IDE — Visual Studio Code is a great option
• A GitHub account

Objectives:

• AWS Certification
• Create a resume using HTML
• Style the resume with CSS
• Use an S3 bucket to host the website
• For security, the website should use HTTPS (AWS CloudFront)
• DNS — Provide a custom domain name (AWS Route 53)
• CI/CD — Automate uploads to S3 bucket and invalidate cache (GitHub Actions)

Step 1: Certification
You can choose any of the major cloud providers for this project (AWS, GCP, Azure). I went with AWS as it has the largest market share among the cloud providers, although that could change in upcoming years. Many organizations are implementing multi-cloud solutions, so you can’t go wrong either way. Just pick one and get good at it. I’m not going to go into detail regarding certification, as I already have a separate post on my AWS certification journey, “Stepping into the Cloud ☁”️. It’s best to study for skills, not just the certification. Avoid cramming and exam dumps. Courses and exam fees aren’t cheap — you are investing in yourself so get your money’s worth! If you’re someone like me who chose to start with the foundational CCP certification, you can get this done within 3–4 weeks while progressing through the project.

Step 2–3: HTML & CSS
Oddly enough, I actually had some experience with HTML prior to starting the challenge. When I was around 10 years old (back in the late 1990s), I was obsessed with Pokémon cards. I had a binder full of Pokémon cards that I would bring to school to trade during recess. One day after lunch, I went back to my cubby to find that my binder was missing! Someone stole them. Needless to say, my days of card collecting ended abruptly in 5th grade, and my attention shifted to the Pokémon game on Game Boy. I went on to design a website that provided walkthroughs on how to beat the games, tips, and cheats. Ironically, one of my proudest moments was adding a visit counter to the webpage and checking the hits when I got home from school — something that will be done in the second part of this project. Years later, I finally got closure while in line for lunch in 8th grade. The Pokémon Plunderer confessed to the atrocity she had committed 3 years prior. Perhaps thanks to her misdeed, I became familiar with the syntax and structure of HTML. Nevertheless, a lot has changed with the web since Y2K.

Some resources I would suggest:

• Bro Code on YouTube — Thorough, easy-to-follow beginner courses on HTML, CSS, Python, JavaScript, and more.
• Coding With Drew — Complete front-end course on Markdown, HTML5, CSS3, Bash, JavaScript, Git, and more.
• Scrimba — HTML & CSS crash course.

Step 4: Static S3 Website
This section is fairly straight-forward. Serving up static web content from an S3 bucket is covered in the associate-level certifications. You can find a 5-minute tutorial here. Aside from video tutorials, getting good at reading docs will help now and in the later portions of the project: S3 permissions for static website hosting (AWS).

Step 5–6: HTTPS & DNS
Prior to these steps, accessing files in the bucket will be done via an HTTP connection, which is unsecure. Although in this application no sensitive data is being transmitted, it is best practice to use HTTPS/TLS. In fact, Google prioritizes HTTPS-enabled websites in their searches. The AWS DNS service is Route 53. To utilize HTTPS, you’ll need to create a record for Route 53 to route to the CloudFront distribution. CloudFront is a low-latency content delivery network (CDN) that caches data at edge locations around the world, giving end users high-speed access to web content. CloudFront will attempt to deliver the content from the cache first, and if it can’t be retrieved or if the cache has reached its TTL, it will then deliver the content to the user by accessing the bucket and refresh the cache.

Step 15: Front-end CI/CD
The reason I did this step out of order was to save time. It allows you to make near real-time changes to the website without having to utilize the AWS console. You can find more information on my post, “CI/CD Workflow: GitHub Actions for AWS S3”.

That wraps up the front-end portion of the application. In my next post, I will be taking a look at the back-end infrastructure: API Gateway, Lambda function(s), and DynamoDB provisioned with Terraform (IaC). Utilizing these serverless offerings will display a visitor count on the webpage. Feel free to connect with me on LinkedIn, and check out my GitHub for the front-end code.