Moving to the Cloud with Amazon S3 Hosting

Part 2 of the AWS Cloud Resume Challenge

In my last post, we hung out and talked about setting up your workspace—getting VS Code ready and brushing up on those HTML and CSS skills. It's fun building a resume that actually looks like you, right? But let's be real: a website stuck on your laptop isn't going to get you hired.

To make this thing official, you've got to get those files off your computer and into the cloud. For Phase 2 of the Cloud Resume Challenge, we're moving everything over to Amazon S3.

Wait, what's an S3?

If you're new to the AWS world, just think of Amazon S3 (Simple Storage Service) as a super-reliable hard drive in the sky. Sure, people use it to store photos or backups, but it has a cool trick called "Static Website Hosting."

Basically, S3 can serve your HTML and CSS directly to a browser without you needing to run a fancy web server 24/7. It's cheap, it's fast, and it's the perfect way to kick off a serverless project!

Step-by-Step: Getting Your Site Live

Look, I know we're going to automate all of this with Terraform later, but trust me—do it manually in the AWS Console first. It's way better to see exactly which "knobs" you're turning before you let code do the heavy lifting for you.

1. Making Your Primary Bucket

First up, you need a "container" for your files.
  • Bucket Name: Name this exactly what you want your domain to be (like jonathanlayman.com).
  • Region: Pick somewhere close to home. I went with us-east-1 (N. Virginia) to keep things snappy.
  • Public Access: Heads up! By default, AWS blocks all public access. Since this is a public website, you've got to uncheck that box. AWS will give you a little warning, but don't worry, it's supposed to be open to the world!

2. Flipping the "Website" Switch

Just tossing files into a bucket doesn't magically make it a website. Head over to the Properties tab:

  • Scroll all the way down to Static website hosting.
  • Hit Edit and then Enable.
  • Set your Index document to index.html. This tells S3, "Hey, when someone visits, show them this file first!"

3. Tossing in Your Files

Now for the easy part! Just drag and drop your index.html and style.css files straight into the S3 console. No need to mess with the command line (CLI) just yet. We just want to see your hard work live in a browser.

4. The Permission Puzzle (The "Bucket Policy")

Here's the catch: even with public access "unblocked," S3 is still a bit shy. It won't show your files until you give it a specific "okay." Go to the Permissions tab and paste in this JSON policy.

It basically tells AWS: "It's cool, let anyone on the internet look at the files in this specific bucket." 

{
"Version": "2012-10-17",
"Statement": [
   {
   "Sid": "PublicReadGetObject",
   "Effect": "Allow", 
   "Action": "s3:GetObject",
   "Resource": "arn:aws:s3:::jonathanlayman.com/*"
    }
  ]						
}
Quick tip: Don't forget to swap out jonathanlayman.com with your actual bucket name!

Handling the "www" Redirect

Ever notice how some people type www and some don't? To make sure everyone finds you, you actually need a second bucket.
  • Make Bucket #2: Name it www.jonathanlayman.com.
  • Set up the Redirect: In the Properties tab for this new bucket, go back to Static website hosting.
  • The Trick: Instead of "Host a static website," pick Redirect requests for an object.
  • The Goal: Tell it to send everyone to your main domain (jonathanlayman.com) using https.
Boom! Now no matter how they type your address, they'll end up in the right spot.

Watch Out for the "Access Denied" Wall

Don't panic if you see a "403 Forbidden" error. It happens to the best of us! It's usually just a tiny typo in your bucket policy. If you hit that wall, just double-check your code. Once you nail it, seeing your resume pop up at that long AWS URL feels like a total win.

Lessons Learned

  • Permissions Rule Everything: In the cloud, "Access Denied" just means the security is doing its job. Learning how these policies work is a huge part of the journey.
  • We're Just Getting Started: Right now, the site is "out there," but it's not super secure (it's HTTP, not HTTPS) and the URL is kind of a mess.
In the next post, we're diving into Route 53 and CloudFront to get that professional domain and the security your resume deserves. See you there!
Next Up: Route 53: Claiming My Corner of the Internet