Skip the drama...Go to TL;DR section

Two Buckets

As mentioned in my previous blog, I have moved my web hosting over to Amazon AWS S3. After scouring the internet for 'How to start hosting my website on S3', I have found out that AWS S3 actually has a feature to use the bucket directly to host static websites. I lied, I didn't really scour the internet I actually just scanned through the search results. I have gotten so excited about discovering the simple joy of having my website hosted somewhere in the Cloud and making it accessible to all people who have access to the interweb. Wow! Did I just say interweb?

Long story short, I ended up copying the source code of this website to both of my S3 buckets:

• jamgutz.com (root)
• www.jamgutz.com (subdomain)

One Is Better Than Two

I don't have a code deployment process for this website for now but nothing beats the good 'ol copy-paste. Just drag-and-drop into the S3 bucket and it works like a charm. My source code is version-controlled using git and is remotely hosted on GitLab.

My problem is, everytime I update my code, I have to repeat this copy-paste process twice. The magic of the drag-and-drop can only go so far. It's more like a Wingardium Leviosa charm than an Expecto Patronum. There must be a better way. I tried following these instructions from AWS to redirect requests from my root to my subdomain but the problem is my domain is registered with GoDaddy. I also discovered that I actually just needed a single bucket with my current setup. I told you I lied about scouring the internet. The solution can be found in the next section.

TL;DR

1. Log-in to GoDaddy and go to the DNS Management Page.


2. Forward your root domain (e.g. jamgutz.com) to your subdomain (e.g. www.jamgutz.com). Here is a screenshot of my Forwarding settings:

   
   




3. Add a new CNAME record with the following values:

   Host	www
   Points to	<Your S3 bucket endpoint suffix> (e.g. s3-website-ap-southeast-2.amazonaws.com)

   Here is a screenshot of my GoDaddy DNS Records:

   
   




4. Enable static website hosting on the subdomain S3 bucket. Go to the subdomain S3 bucket (e.g www.jamgutz.com). Click on the Properties tab. Click on Static website hosting. Select 'Use this bucket to host a website' and type 'index.html' or whatever you want as the default HTML file in the Index document input field.

   NOTE: For some reason, when I directly forward my domain to my full AWS S3 bucket endpoint, it doesn't get displayed quite right in mobile view. It seems to be rendered in some HTML wrapper. With my current DNS setup, I may only use my subdomain bucket as I am forwarding my domain (jamgutz.com) to my subdomain (www.jamgutz.com). Requests to my subdomain is forwarded to my subdomain S3 bucket (www.jamgutz.com.s3-website-ap-southeast-2) via my DNS CNAME record.

   I hope I am making some sense. Please contact me if you have some questions.



5. Finally, make sure the S3 bucket is accessible to the public. Go to the subdomain S3 bucket. Click on the Permissions tab. Click on 'Bucket policy' and paste the following:

   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Sid": "AddPerm",
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::jamgutz.com/*"
       }
     ]
   }
                   

   Make sure to change "Resource" to your own actual subdomain.

Before you go

Here are some helpful links that may help you understand how all these work further:

• Manually Forward or Mark Your Domain or Subdomain
• Add a CNAME Record
• Granting Read-Only Permission to an Anonymous User
• Setting up a Static Website Using a Custom Domain