How To: Connecting Google Domains to Amazon S3
Tags: Web Hosting, AWS, Google, Domain Names, Amazon S3

Just recently I was asked to help a friend create a static landing page. While I’ve built Rails apps (deployed on Heroku) and hobby landing pages, this was my first time taking a site from A to Z, from writing the files to hosting to connecting the domain. I was given the domain via Google Domains and opted to host the site on Amazon S3 because it seemed like a good set up to get familiar with.

Step 1: Purchase your Domain Name

I’ve used GoDaddy primarily in the past for my domain name needs, but since Google rolled out its own domain site, it was a no-brainer to make the switch. The site is user-friendly with tons of tutorials and an extensive FAQ resources section. My friend purchased his domain for $12 a year.

Step 2: Create an AWS account for access to S3

Amazon’s Simple Storage Service (S3) is overall a fantastic resource to consider when hosting your web applications. It offers tiered pricing related to usage and storage, so you only pay for what you use. I won’t go into much detail on the benefits of S3 since it’s covered well on their site, but will mention that S3 is also great for hosting static sites that don’t require a database.

Step 3: Upload your website files to S3

Assuming you’ve written all your HTML, CSS, and JS files, you will now need to upload those files to a S3 bucket, the new home for all your website files. Since this site only had a handful of files, I chose to upload using the AWS console.

Create a bucket if you haven’t done so (blue Create bucket button) and use your domain name (example.com) as the bucket name. Enable Static Website hosting: navigate to your newly created bucket and click on the “Properties” tab under the breadcrumbs. Click on the box “Static website hosting” and select “Use this bucket to host a website”. Set your index document (generally index.html). Upload all of your website files to the bucket. The console has an easy drag and drop function. Don’t drag the directory that contains all of your website files; instead, navigate into that directory and select all of the files within it. Set the Bucket policy: inside the bucket, find “Permissions” tab (next to “Properties”) and click on “Bucket Policy”. Copy and paste the following code into the editor, replacing “example.com” with your domain name.

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "PublicReadGetObject",

"Effect": "Allow",

"Principal": "*",

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::example.com/*"

}

]

}

At this point, you can paste your temporary Endpoint for the bucket into your browser and view your website! The Endpoint is located in the Static Website Hosting box (see Step 2).

Use this Bucket for Website Hosting

Something to consider when using the drag-drop method:

If you have a huge file directory, would recommend using an S3 Browser. It is a software that you download to the computer to communicate with your S3 bucket. It can manage the hassle of logging into the AWS console, deleting files, and uploading files (new or changed).

I had to upload several HTML files multiple times after making some changes locally. Not an issue for small sites, but it can get quite tedious for large applications.

Step 4: Head over to Route 53

Inside the AWS console, navigate to Route 53. From the Dashboard, click on the “Services” button in the upper left hand corner and select Route 53 from the dropdown box on the left hand side.

Once inside the Route 53 section, do the following:

Create a Hosted Zone. Click on the blue button “Create Hosted Zone”

2. Inside the box, enter in your domain name without the www (e.g. example.com).

Enter in your domain name (without www) and leave Type as Public Hosted Zone

3. Once you’ve created a Hosted Zone, you will be given default record sets (the cluster of 4 NS-type). You will need to create two additional custom record sets.

Click on “Create Record Set” to create Alias-type records

4. Clicking on “Create Record Set” will bring up a box on the right hand side. Inside the box, enter “www” in the Name field, select Yes for Alias, and set your Alias Target to point to your S3 bucket name (in the Endpoint url, the bucket name is the information after your domain name —something like s3.website.{{region}}.amazonaws.com).

5. Create another Record Set, but this time, leave the “Name” field empty so it will point to your naked domain example.com, not www.example.com.

Step 5: Tell Google Domain where to send all requests to your website

This is where all the magic happens!

Log into Google Domains and click on “My domains” on the left hand sidebar. Click on the DNS icon to the right of your domain name so the following page will appear:

Select “Use Custom Name Servers” instead of the default Google Domains.

A single text field will appear. Click on the “+” button 3 more times to get a total of 4 text fields. Copy and paste each Name Server (NS) from the Route 53-Record Sets panel. Google Domains will strip the ending period that is included in the Route 53 record.