DEV Community

Cover image for Building and Hosting My HTML/CSS Resume with AWS Services, Terraform, Utilising the Well-Architected Framework
Daniel Walker
Daniel Walker

Posted on

Building and Hosting My HTML/CSS Resume with AWS Services, Terraform, Utilising the Well-Architected Framework

This blog is Part 2 of my journey through the Cloud Resume Challenge by Forrest Brazeal. You can read Part 1 here: My Cloud Resume Challenge – AWS.

This blog moves into the practical implementation of the challenge by completing Steps 2–6. This documents my progress through the next core stages of the challenge, focusing on the resume itself, AWS services, and Terraform. All whilst applying best practices from the AWS Well-Architected Framework. I have also added link to useful resources that helped me throughout.

FYI - I used lucidchart to diagram the current topology and I will evolve this as the challenge progresses.

This blog post documents my experience completing steps 2–6 (step 1 is to gain AWS CCP certification but I already had this) of the Cloud Resume Challenge:

Step 2: Created and styled a resume using HTML and CSS.

Step 3: Hosted the resume on an Amazon S3 bucket configured for static website hosting.

Step 4: Configured HTTPS for the site using AWS CloudFront and Amazon Certificate Manager.

Step 5: Registered a domain and configured DNS with Route 53.

Step 6: Connected everything with DNS and HTTPS.

I also took on the extra challanges, which were to:

  • Use Terraform to define all infrastructure as code.
  • Enable DNSSEC for the Route 53 hosted zone for extra DNS integrity.

The following sections explain how I tackled each of these milestones.

HTML/CSS Resume

I began with a simple goal as outlined in the challenge: build a professional-looking HTML/CSS resume. This turned out to be more challenging than expected.

I initially struggled with making it look polished and professional. To help, I referred to online examples to understand the structure and styling conventions. I considered separating the HTML and CSS into separate files for clarity, but kept it combined for simplicity during early iterations. Once I had experimented enough, the syntax and structure started to make sense to an extent.

With some help from GitHub Copilot, I also added Bootstrap to streamline styling, which worked worked really well!

I used Visual Studio Code as my code editor and integrated it with GitHub to maintain version control and other useful extensions (e.g. Terraform). Since the challenge also requires you to automate deployment via CI/CD later down the line, this setup helped ensure a better workflow from the start.

Useful Resources:
W3School
Bootstrap Documentation
Github Co-Pilot
FreeCodeCamp - Responsive Web Design Course
VS Code Docs

IAM: Secure by Default

Applying the Security pillar of the AWS Well-Architected Framework, I placed a strong emphasis on building secure IAM structures.

Instead of working from the AWS root account, I created a dedicated IAM user with administrative access. Then I took it further:

  • Initially removed the root account access keys as these were never going to be used.
  • Created an AWS Organisation with both test and prod OUs
  • Used AWS IAM Identity Center to manage access across accounts
  • Avoided storing long-term credentials by using SSO profiles

To simplify switching between accounts, I then used a third-party CLI tool, aws-sso-util, which made working with multiple environments a lot more cleaner.

Useful Resources:
AWS IAM Best Practices
AWS Organizations Documentation
AWS IAM Identity Center (SSO)
aws-sso-util GitHub

CDN: Deploying via CloudFront

Initially, my CloudFront distribution wouldn't deliver content as expected.

I discovered that using the S3 bucket endpoint was incorrect—I had to use the S3 website endpoint instead. That fixed the routing issue, but it was only serving over HTTP.

To enable HTTPS, I had to:

  • Remove public access from the S3 bucket
  • Add a policy to allow CloudFront access to the S3 origin
  • Update the CloudFront origin and behaviour settings:
    • Point to the correct index.html file
    • Set viewer protocol policy to HTTPS only

This aligned with the Reliability and Performance Efficiency pillars of the Well-Architected Framework.

Useful Resources:
Amazon CloudFront Developer Guide
Static Website Hosting with CloudFront & S3 – AWS Blog
YouTube: CloudFront + S3 Website Tutorial

DNS: Domain Setup

I initially bought my domain via GoDaddy (djwcloud.co.uk), not realising Route 53 supports domain purchases. As a result, I had to transfer the domain manually. To do this I therefore:

  • Unlocked the domain in GoDaddy
  • Retrieved the Authorisation Code
  • Initiated a domain transfer via Route 53
  • Updated name servers to match AWS configuration

It took some time to propagate ans had to refresh my cache, but eventually my domain was fully managed under AWS.

Useful Resources:
Transferring a Domain to Route 53
GoDaddy Domain Transfer Guide
AWS Route 53 DNSSEC Setup

Terraform: IaC Modification

I then retrospectiverly used Terraform to build all the infrastructure.

Initially, I couldn’t figure out why terraform plan was failing. I was determined not to fall back on using static credentials (access key + secret key). Instead, I configured Terraform to use my AWS SSO profile I had created earlier by referencing the profile in the provider block.

provider "aws" {
  profile = "my-profile"
  region  = "eu-west-2"
}
Enter fullscreen mode Exit fullscreen mode

This ensured my credentials weren’t exposed if I pushed code to GitHub. Again, GitHub Copilot proved helpful when I got stuck. There is probably a better way to do this but for the sake of time I made it as secure but as simple as needed.

Resources:
Terraform AWS Provider Docs - (Super helpful!)
Official Terraform Labs
YouTube: Terraform Projects for Beginners

Lessons Learned

  • Understand your tools: SSO, IAM, and Terraform work well—once configured correctly. I admittedly had to ChatGPT, Co-Pilot, YouTube, vendor doc how things worked etc.
  • Don’t underestimate DNS or SSL setup; there's more nuance than it appears, but it does help in gaining a better appreciation for how things fit together.
  • Automating with GitHub and VSCode definitly improves workflow and helped enforce good practice.
  • The AWS Well-Architected Framework helped me make better decisions, particularly around IAM.

This section started in my head as a simple resume and ended up teaching me a whole deployment model. It was frustrating at times, but it's now live, secure, and managed through code.

Looking Ahead: Part 3 – CI/CD and Lambda Visitor Counter

In the next part of the challenge, I’ll focus on automating the deployment of my resume using CI/CD pipelines through GitHub Actions. I’ll also integrate a serverless backend using AWS Lambda, API Gateway, and DynamoDB to implement a visitor counter. This part will most likely be more challenging that the previous!

Top comments (0)