Part I: How to host a static website with Amazon AWS

Milla Stellan
7 min readJan 29, 2021

Hosting a static website on a custom domain with AWS

Photo by Christopher Gower on Unsplash

I had previously used GoDaddy as one of my website’s service provider. For my personal website, I wanted to experiment with AWS. Even though the process was pretty straightforward, it was possible to get lost in the vast list of documents that AWS has.

The main steps are:

  • Registering for a domain
  • Setting up S3 buckets
  • Creating hosting zones in Route 53
  • Testing the custom domain

Registering for a domain

Registering for a new domain is an easy and fast process.

  • Sign up for an AWS account and navigate to the Route 53 dashboard.
  • Click Registered domains on the left sidebar and then click Register Domain.
Domain name check
Domain name check
  • Check if the domain name that you need is available. If it is available, choose it and click Continue.
Domain registration contact details
Domain registration contact details
  • On the next screen, you will be asked to enter the contact information.
  • For Privacy Protection, choosing Enable hides your personal information when looking up Domain Registration Data.
  • Click Continue, review the information and click Complete Purchase. If the payment went through, you will receive an email within 10 minutes that the registration was successful

Setting up S3 buckets

A bucket is a container to store objects in AWS S3 (Simple Storage Service). This is where the HTML files for the static website will be stored.

Buckets have to be created for both the root domain website.com and subdomain www.website.com so that the same content loads for both the URLs.

S3 console
S3 console

Bucket for the root domain

  • Click Create bucket.
Bucket Creation
Bucket Creation
  • Bucket details

Bucket name: This name should be the same as the domain name. In my case, it is millastellan.com

Region: It is always suggested to choose a region close to you.

Click Create bucket.

‘Successfully created bucket “millastellan.com”’ message will show up.

Bucket for subdomain

  • Click Create bucket.
Bucket Creation
Bucket Creation
  • Bucket details

Bucket name: This name should be of the format www.website.com. In my case, it is millastellan.com

Region: It is always suggested to choose a region close to you.

Click Create bucket.

‘Successfully created bucket “www.millastellan.com”’ message will show up.

Bucket list
Bucket list

Setup static hosting for the root domain bucket (website.com)

  • Click the root domain bucket. (website.com)
Bucket — Properties tab
Bucket — Properties tab
  • Click on the Properties tab and scroll to the bottom
Static hosting
Static hosting
  • Static website hosting is disabled. Click the Edit button next to Static website hosting
Static Hosting properties
Static Hosting properties
  • Static website hosting settings

Static website hosting: Enable

Hosting type: Host a static website

Index document: index.html

Error document: error.html

Click Save changes

A success message will show up letting you know that static website hosting was enabled.

S3 Objects
S3 Objects
  • Scroll to the top and click on the Objects tab.
  • Click the Upload button.

An index.html document should be uploaded. This will be the home page of the static website.

A little sample HTML code:

<html xmlns=”http://www.w3.org/1999/xhtml" >
<head>
<title>My Website Home Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Now hosted on Amazon S3!</p>
</body>
</html>
S3 — Uploading objects
S3 — Uploading objects
  • Drag and drop the index.html file, scroll to the bottom and click Upload.
  • After the file has been uploaded, click the Permissions tab.
  • Scroll down to Block public access (bucket settings).
  • Click Edit
Public access settings
Public access settings
  • Uncheck Block all public access and click Save changes
Confirm public access settings
Confirm public access settings
  • Type confirm in the next modal and click Confirm to change the public access settings.
Bucket policy
Bucket policy
  • Scroll down a bit and click Edit under Bucket policy
{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: [
“s3:GetObject”
],
“Resource”: [
bucket ARN/*”
]
}
]
}

Setup static hosting for the subdomain bucket (www.website.com)

  • Click Buckets in the left sidebar.
  • Click www.website.com under the bucket names. In my case it is www.millastellan.com
  • Click on the Properties tab and scroll to the bottom. Click Edit next to Static website hosting.
Static Hosting properties
Static Hosting properties
  • Static website hosting settings:

Static website hosting: Enable

Hosting type: Redirect requests for an object

Host name: Type the root domain here (website.com)

Protocol: http

  • Click Save changes

Testing the S3 bucket endpoints

  • Click the root domain bucket in the list of bucket names.
  • Click on the Objects tab and scroll to the bottom.
Bucket endpoint
Bucket endpoint
  • There will be a Bucket website endpoint at the bottom. Click on it. The link will open in a new tab.
Testing custom domain
Testing custom domain
  • You should be able to see the contents of the index.html file.

Creating hosting zones in Route 53

The next step is to link the S3 buckets to the custom domains. This is done using the Route 53 service.

Route 53 dashboard
Route 53 dashboard
  • Click hosted zone
Hosted zone configuration
Hosted zone configuration
  • Hosted zone settings:

Domain name: website.com. In my case, it is millastellan.com

Type: Public hosted zone

  • Click hosted zone. “millastellan.com was successfully created” message will show up.

Record for root domain (website.com)

Root domain record
Root domain record
  • Click Create record
Create record
Create record
  • Choose Simple routing in the wizard and click Next
Configure record
Configure record
  • Click Define simple record
Simple record properties
Simple record properties
  • Simple record settings:

Record name: leave it blank so that it points to the root domain

Choose endpoint: Alias to S3 website endpoint

Choose region: Choose the same region that you initially chose

Choose S3 bucket: When you click on the text box, you will be an offered an option that resembles the name of your bucket. Choose it.

Record type: A-Routes traffic to an IPv4 address and some AWS resources

Evaluate target health: No

  • Click Define simple record
Simple record
Simple record
  • Click Create records. A record for website.com was successfully created.

Record for subdomain (www.website.com)

Record for subdomain
Record for subdomain
  • Click Create record
  • Click Simple routing and click Next. On the next screen, click Define simple record.
Record properties for subdomain
  • Record settings:

Record name: www

Choose endpoint: Alias to S3 website endpoint

Choose region: Choose the same region that you initially chose

Choose S3 bucket: When you click on the text box, you will be an offered an option that resembles the name of your bucket. Choose it.

Record type: A-Routes traffic to an IPv4 address and some AWS resources

Evaluate target health: No

  • Click Define simple record
Create record for subdomain
Create record for subdomain
  • Click Create records. A record for www.website.com was successfully created.
  • In the records list, records with Type ‘A’ are the ones that we created in the last few steps. Two other records will be created automatically.

Testing the custom domain

Open a new tab and test out the custom domains: website.com and www.website.com

For me, it is millastellan.com and www.millastellan.com

Testing custom domain

The content of the HTML file that was stored in the S3 bucket will load on the page.

If the article helped you, I would appreciate a cup of coffee.

Buy me a coffee link
https://www.buymeacoffee.com/millastellan

--

--