DEV Community

Cover image for Cloud Resume Challenge - Chunk 1 - Building the Front-End
Trinity Klein
Trinity Klein

Posted on • Edited on

Cloud Resume Challenge - Chunk 1 - Building the Front-End

#aws #career #tutorial #frontend

Cloud Resume Challenge – Chunk 1: Building and Hosting the Front-End

The second step of the Cloud Resume Challenge is all about creating and hosting the front-end of your resume website. While this section may feel simple compared to the upcoming back-end work, it’s critical because it sets the stage for later integration. You’ll build a static site, host it securely on AWS S3, and distribute it globally with CloudFront.

This guide explains exactly how I approached Chunk 1, the decisions I made, and the AWS best practices I followed.

Step 1: Why the Front-End Matters

It’s tempting to think of HTML and CSS as the easy part of the challenge. In reality, this stage is more about completeness and professionalism than design. A static website:

  • Demonstrates end-to-end deployment skills.
  • Gives you something tangible to showcase in an interview.
  • Prepares you for the bigger challenge of front-end + back-end integration, which is where cloud engineering skills really shine.

The purpose is not to become a front-end expert, but to build a solid, secure platform that can connect with AWS services like DynamoDB, Lambda, and API Gateway later.

Step 2: Choosing a Framework

Instead of writing a single massive HTML file, I used the Hugo Console theme. Hugo is a static site generator, which makes your website more maintainable and scalable over time. Benefits of Hugo:

  • Extremely fast build times (~55ms load time on my site).
  • Modular templates for pages like Resume, Projects, Blog, and Contact.
  • Easy customization of text, images, and layouts.

If you prefer JavaScript frameworks, you could use Next.js, React, Vue, or Svelte, but for the purposes of this challenge, Hugo (or Eleventy) is more than enough.

Step 3: Hosting the Static Site on AWS S3

Once the site files were generated, I hosted them on an Amazon S3 bucket. The naive approach is to make the bucket public for static hosting—but that’s insecure. Instead, I followed the professional setup:

  1. Create an S3 bucket with the same name as your domain (e.g., mydomain.com).
  2. Block all public access. This prevents anyone from directly reaching your bucket objects.
  3. Upload the Hugo-generated files to the S3 bucket.
  4. Enable static website hosting to get an endpoint, though it won’t be public yet.

Step 4: Securing with CloudFront and OAC

To deliver the site securely and globally, I set up CloudFront. This provides caching, speed, and access control:

  1. Create a CloudFront distribution pointing to the S3 bucket.
  2. Enable Origin Access Control (OAC) so only CloudFront can fetch objects from the bucket.
  3. Update the S3 bucket policy to grant CloudFront permission.
  4. Configure cache behaviors to improve performance while still allowing invalidation when updates are deployed.

With this, visitors only interact with CloudFront, not the S3 bucket, which keeps the environment secure and professional.

Step 5: Testing the Setup

After configuration, I validated the site:

  • Verified global accessibility by testing load times from multiple locations.
  • Confirmed cache invalidation worked properly when I updated site content.
  • Checked that no direct public access to the S3 bucket was possible.

The result was a lightweight, professional-grade static site ready to integrate with AWS back-end services in future chunks.

Key Takeaways

  • Static sites are the foundation: This step isn’t about flashy design; it’s about creating a maintainable, secure project you can build on.
  • Use frameworks like Hugo: They save time and give you clean, fast-loading templates.
  • Follow AWS security best practices: Block public access to S3, use OAC, and route all traffic through CloudFront.
  • Think ahead: This site will soon interact with APIs, databases, and automation. Setting it up securely now pays dividends later.

Helpful Resources

Here are some resources that helped me through Chunk 1:

Let’s Connect

If you’re following this challenge, or just passing by, I’d love to connect! I’m always happy to help if you need guidance, want to swap ideas, or just chat about tech.

I’m also open to new opportunities, so if you have any inquiries or collaborations in mind, let me know!

Top comments (0)