Setup(Host) a static website in AWS S3 with your custom sub-domain using Route53

We needed a simple contact us form for one of our subdomain, but making a simple static html page is easy but how do you host it quickly and efficiently.

Requirement was simple. But traditional approach would require us to spin up a vps which will be used to host the static website. Not to mention managing a vps comes with its own set of headache. Install this, install that, configure this, configure that.

Why not use aws s3 to host the website? It has lots benefits.
- No need to spin up any vps or rent any hosting space.
- Nothing to install.
- No worry about scaling issue.
- No limitation on space.
- No limitation on bandwidth.
- Serverless :)

So, let us look at how we can make our very own serverless static website.

Head over to:

https://console.aws.amazon.com/s3/home

Create a bucket. Bucket name is very important, you need to give the same name as your domain or subdomain.

Assuming you want to use subdomain.domain.com to host the static website:
For example if your subdomain is subdomain.domain.com, you will have to create a bucket with that same exact name. Btw for this to work you will have to own domain.com. Otherwise it will not work.

Change the region if you want. Select the region which is closer to your target audience for the website. Keep everything else default. Create the desired bucket.

Create Bucket with your desired bucket name

After creating the bucket go to ‘Properties’ and select ‘Static website hosting’.

Go to ‘Properties’ and select ‘Static website hosting’

Select ‘Use this bucket to host a website’ and give ‘Index document’ name for my case it was ‘index.html’ and save.

Select the option: “Use this bucket to host a website” and put “index.html” for “Index document”

Now go to “Permissions” tab and Edit the Block public access (bucket settings).

If Block all public access is not already unchecked, uncheck it and save.

Edit block public access and uncheck everything to turn it off.

And Save

Select Bucket policy in Permissions and put below bucket policy json in the editor and save. Don’t forget to replace subdomain.domain.com with your own domain/subdomain.

Edit the bucket policy as well.

Here is the bucket policy json for your convenience.

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

Upload your static files as well as necessary resources in the bucket. As you can see my index.html was using font-awesome, so i need to upload them as well.

Upload necessary resource and your static html files in your bucket

If you are correctly following thus far you should be able access your static html. How? Select the index.html and you should see the Object URL, click on it. Voila!

Find the Object URL of your static html page

If you do not have any domain/subdomain you can use this as your static website :) .

But of course we don’t want that. We want a nicely readable subdomain for this page.

For that, all we need to do, is to tell our domain registrar whenever a person hit subdomain.domain.com it should show the s3 hosted page.

We will use ‘A Record’ ‘Alias’ for this. Assuming you are using Route53, go to Route53 aws console select your desired domain name Hosted Zone.

‘Create Record Set’ and put the required fields as shown in the picture. If you have done everything stated above, you should be able to select the ‘S3 website endpoints’ after you’ve selected ‘Alias’ for ‘A — IPV4 address’. Save the record and you are good to go.

Now if you hit subdomain.domain.com in your browser you should be able to see your brand new statically hosted s3 website.

Don’t forget to share the knowledge. Happy Learning.

This will be multi-part series. Next i will try to make the subdomain https using cloud-front and amazon certificate manager.