How to host a static website using AWS S3?

Published in

DevopSquare

5 min readAug 10, 2021

What is AWS?

AWS (Amazon Web Services) is the cloud computing platform provided by Amazon that includes a mixture of Infrastructure as a service (IaaS), Platform as a service (PaaS), and packaged Software as a service (SaaS) offerings. AWS offers various kinds of services like compute services, storage services, database services, etc.

What is AWS S3?

Amazon Simple Storage Service (Amazon S3) is an object-based storage service. You can store any amount of data of any size in S3. You can also access the data over the internet. It gives any developer access to the same highly scalable, reliable, fast, and inexpensive data storage solution.

Read more about AWS and its various services here.

Static Website Hosting

AWS S3 provides the service through which you can host your static website without having to worry about availability and server maintenance. You just need to focus on developing the code rest of the things will be managed by AWS.

You can find my portfolio website by clicking on the below link.

dhsoni.info

Prerequisites:-

AWS Account
Basic understanding of DNS, Domain, IP Address & AWS S3

If you don’t have the Domain name or you don’t want to spend any money on domain purchases then you can find free domains here. 😄

Now let’s start with the process

Step 1:- Login to your AWS Account

Step 2:- Create a Bucket

Create an S3 bucket and give the name as per your domain name only. Don’t give any other name otherwise, it won’t work

Step 3:- Upload all the content

Upload all the content of your website into the newly created bucket

Step 4:- Configure the bucket

Now in order to create the website, we need to modify our newly created bucket so that it can work properly.

Follow the below steps:-

Click on your bucket.
Click on the “Properties”
Select the “Static website hosting” option.
Select “Use this bucket to host a website”.
Enter “index.html” as the index document.
You can leave it blank in the Error document part or if you have some file for error then you can also give a name there.
Click on “Save”

You can also use below AWS CLI command in order to do all the work from CLI

aws s3 website s3:<Your-bucket-name> --index-document index.html --error-document error.html

After configuring the bucket you will have a URL like this:-

http://<bucket-name>.s3-website.<region-of-bucket>.amazonaws.com

Step 5:- Modify the Access

In AWS S3 by default, all the buckets are private so, it won’t allow access over the internet so, in order to access our website we need to make the bucket public

Follow the below steps:-Click into your bucket.

Select the “Permissions” tab at the top
Under “Public Access Settings” click on “Edit”
Change the Block all public access and set it to False

You must complete this step before adding the bucket policy to your static website bucket.

Doing the above settings is not enough to access the website over the internet. You must need to add the bucket policy also.

Select the “Permissions” tab at the top
Under the bucket, policy add the below content

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your-bucket-name>/*"
        }
    ]
}

The policy opens up your bucket to anyone in the world. Any object in this bucket is available to the public via the S3 website URL.

Step 6:- Create a hosted zone

Follow the below steps to create e hosted zone

Navigate to Route S3 service
Under the DNS management, click on “Create hosted zone”
Enter your domain name
Click on “Public hosted zone”
Click on save

Step 7:- Change the name servers

Navigate the website from where you manage your domain
Modify the name servers of your domain
Add the name servers which are provided by the AWS

Step 8:- Create an Alias

Navigate to Route 53 service
Click on Create Record
Click on Alias
Select your bucket name
Click on Create

Step 9:- Check the website

In order to check your newly created website, you need to wait for 5 mins so that AWS can configure all the things for you

Navigate to your domain and check your newly created website

So, that’s it now you have learned how to create a static website using AWS S3. You can now modify the content of the website and play with it.

Benefits of using AWS S3 for static website hosting

High Availability:- S3 is AWS's high availability and durable service. If the load on your website goes increases then you do not need to worry about that AWS will manage it for you
No Server maintenance:- For hosting the website you don’t need to manage the server and its maintenance all the things will be managed by AWS so that, you can focus on building the code.

If you found this guide helpful then do click on 👏 the button and also feel free to drop a comment.

Follow for more stories like this 😊