How to Host a Static Website on AWS S3 in 5 Minutes

How to Host a Static Website on AWS S3 in 5 Minutes Featured
Sharing is Caring:

How to Host a Static Website on AWS S3 in 5 Minutes

Amazon S3 or Simple Storage Service is an easy to use, infinitely scalable and cost effective object storage offered by Amazon Web Services.

  • You can store any type and amount of data from anywhere in the world in S3
  • It helps you implement use-cases such as data lakes, backup and archive, application storage or even static website hosting

Today, we are looking at the use-case ‘Static Website Hosting‘ using S3. By the end of this tutorial, you should be able to host a static website in AWS S3.

Prerequisite:

Cost

Total cost of hosting your static website on AWS is dependent on your usage

  • Outside of AWS Free Tier Limits: typically $1-3/month
  • Within AWS Free Tier Limits: typically $0.50/month

How Can You Host a Static Website on AWS S3?

When it comes to deploying a static website in AWS, S3 is the simplest, best and cheapest option. However, please note that, if you have a dynamic website such as a PHP application, S3 will not work and you need to use other solutions such as Amazon EC2 or Elastic Compute Cloud.

Back to the question, how can you deploy a static website in S3?

Well, S3 has has a feature called “Static Website Hosting“. All you need to do is, simply upload your website content into an s3 bucket, enable website hosting and give everyone permission to access your website(in case you want to make your website public).

Don’t worry, if you don’t get something now. We are gonna dive deeper in upcoming sections.

Okay?

One more thing, when you configure your bucket as static website, your website is available over endpoints depending on the region which looks like –

s3-website dash (-) Region ‐ http://bucket-name.s3-website-Region.amazonaws.com
s3-website dot (.) Region ‐ http://bucket-name.s3-website.Region.amazonaws.com
Copied from AWS Documentation

When you hit the endpoint, it returns the default index document you set during configuration. Any other object such as beach.jpeg which is stored in the root of your bucket can be accessed as –

http://bucket-name.s3-website.Region.amazonaws.com/beach.jpeg

It follows the syntax like-

http://bucket-name.s3-website.Region.amazonaws.com/object-name

just change the object name, and voila you can access it 🙂

Steps to Host a Static Website on AWS S3

  1. Create a Static Website
  2. Create a S3 Bucket
  3. Upload Your Website To S3
  4. Enable S3 Website Hosting
  5. Make Your Bucket Public
  6. Access Your Website

Step 1: Create a Static Website

Obviously, we are not going to create a fully fledged website. All we need to do is, to create these two simple html files-

  • index.html: It’s a pretty simple html file that has the content of our website
  • error.html: It’s a custom error page which will be displayed in case of any error

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello & Welcome to CloudKatha</title>
    <head>
    <body>
        <header>
            <h1>Hello & Welcome to CloudKatha !!!</h1>
        </header>
        <main>
            Have a great day !!
        </main>
        <footer>
            <p>&copy; Preeti</p>
        </footer>
    </body>
</html>

error.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Error Page</title>
    <head>
    <body>
        <header>
            <h1> Something Went Wrong !!!</h1>
        </header>
        <main>
            Please try after some time!!
        </main>
        <footer>
            <p>&copy; Preeti</p>
        </footer>
    </body>
</html>

Step 2: Create an S3 Bucket

Login to AWS Management Console, type s3 in search bar and click on it to open S3 console.

How to Host a Static Website on AWS S3 in 5 Minutes 1

Once you see dashboard, click Create Bucket

Provide a unique name for your bucket, as names in S3 are unique globally. That means, once you name your bucket “ABC“, no body else, even in other account can use the same name. More on that Here: This is Why S3 Bucket Names are Unique Globally

Next, choose a region where you want your s3 bucket to reside. As a rule of thumb, It’s good idea to choose a region near by your users. However, this is not the only criteria and you might consider checking out : 4 Factors to Consider While Choosing Region for Your Workload on AWS

How to Host a Static Website on AWS S3 in 5 Minutes 2

Leave everything default, scroll down and click Create bucket to finish creating a bucket.

In case, you are a beginner, feel free to check my previous tutorial on creating s3 bucket: How to Create an S3 Bucket in AWS Step by Step

Step 3: Upload Your Website to S3

At this point, we have our website created and we also have an S3 bucket created.

Let’s go ahead and upload the website content to the bucket.

Click on your bucket name to navigate inside your bucket.

Click Upload as shown in below screenshot.

How to Host a Static Website on AWS S3 in 5 Minutes 3

You can click on any of the Upload button shown in above screenshot.

Once you click on it, you will be in upload screen.

Click on Add files

Navigate to the location in your system, where you have index.html and error.html that we created in Step 1.

Select both the files and click open as shown in below screenshot.

How to Host a Static Website on AWS S3 in 5 Minutes 4

Scroll down and Click Upload

On successful upload , you will get message like –

Step 4: Enable S3 Website Hosting

It’s time to enable website hosting feature in S3.

Click on Properties tab and scroll down to static website hosting section

How to Host a Static Website on AWS S3 in 5 Minutes 5

As you can see, it is Disabled by default on a newly created bucket.

Click on Edit button from right corner as shown in the above screenshot.

As you click Edit, you are taken to Edit static website hosting screen

Click Enable

On clicking Enable, you are asked to select few options:

  • Choose hosting type as “Host a static website
  • Provide index.html in Index document and error.html in Error document field.

How to Host a Static Website on AWS S3 in 5 Minutes 6

Leave Reditrection rules empty, Scroll down and Click Save changes

You get a message like –

Scroll down to Static Website Hosting section again.

This time, you will see that your website is deployed and is available on website endpoint as shown below-

How to Host a Static Website on AWS S3 in 5 Minutes 7

But, You can’t Access it Now- Why?

Well, lets give it a try

Click on the website endpoint and you are greeted with a pretty message – 403 Forbidden

How to Host a Static Website on AWS S3 in 5 Minutes 8

Why?

The reason is obvious.

When you create an S3 bucket, by default they are private. That means, no body else can access contents in your bucket. This is great from security reasons. This makes it easy for you to decide what and how much content you want to share with other.

Since in this case, we are deploying a website, so it makes sense to set this bucket to public access but only read access. You don’t want your users to add changes/edit your website . Do you?

I am sure you don’t !!

So, lets go ahead with next step to make this bucket as public.

Step 5 : Make Your Bucket Public

As we already saw, by default a newly created bucket is private. We need to change the bucket configuration to make it publicly available.

There are two steps to make a bucket public.

  1. Disable Block public access (bucket settings)
  2. Add a Bucket Policy to Make the Bucket Public

Click on Permission tab, and you will see in the permission overview that bucket and objects are not public. You will also notice that public access is blocked on the bucket by all means.

1. Disable Block Public Access

Click on the Edit button as shown in the above screenshot, uncheck Block public access setting as shown below and click Save changes.

Type confirm in the dialog box and click confirm.

Once saved, we can now make our public by various means.

If you see the above screenshot, there are quite a few ways to grant public access to a bucket like using ACL or bucket polices. We will be using a bucket policy to provide public read access.

2. Add a Bucket Policy to Make the Bucket Public

In the Permission tab only, scroll down to Bucket policy section and click Edit.

Paste the below bucket policy into the box and make sure to change the Resource Arn as per your bucket name.

{
    "Version": "2012-10-17",
    "Id": "Policy1640958696038",
    "Statement": [
        {
            "Sid": "Stmt1640958688822",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::demo-s3-website-cloudkatha/*"
        }
    ]
}

Format of bucket ARN is-

arn:aws:s3:::bucket-name

However, please notice that in the Resource we have used /* at the end of ARN. It means we want to give s3:GetObject for all objects in the bucket.

Tip: /* means all object inside the bucket

Make sure that the bucket Arn and resource that you provide match as highlighted in below screenshot

Scroll down and click Save changes.

And as expected, here you go

Your bucket is marked Publicly accessible.

Step 6: Access Your Website

As you can see bucket is publicly accessible. So, we should be able to access it now.

Let’s give it a try.

Click on Bucket website endpoint as shown below-

How to Host a Static Website on AWS S3 in 5 Minutes 7

And, Voila !!!

How to Host a Static Website on AWS S3 in 5 Minutes again

Congratulations !!!

You have successfully deployed/hosted your Static Website in S3.

Shall we test an error scenario as well?

Okay, let’s do it..

I just added something random in website path and hit enter and as you would expect, the error page is displayed. Because there is no object with name test in the bucket.

How to Host a Static Website on AWS S3 in 5 Minutes 10

What’s Next?

Now that, you have your website hosted in S3. There are quite a few things that you can do.

You can configure it to access it on your custom domain

Or if you think your website is growing and has user base from all around the world, you can go ahead and integrate CloudFront with your S3 bucket.

As a result, you will have a high performing, secured and global website in minutes.

That’s the power of cloud computing my friend 🙂

Important Note: Please keep in mind that, S3 website endpoints do not support HTTPS at the moment. In case you need to use HTTPS(recommended from security perspective), please use CloudFront to serve your static website from S3.

Checkout this: How to Configure HTTPS s3 Website using CloudFront

Conclusion

In this tutorial, we learnt to host a static website on Amazon S3.

  • We created a simple static website
  • Created an S3 bucket and uploaded the website to S3
  • Then we enabled Static Website Hosting
  • Made our bucket Public
  • Accessed our website on s3 website endpoint

Enjoyed the content?

Subscribe to our newsletter below to get awesome AWS learning materials delivered straight to your inbox.

I hope you enjoyed this tutorial. If you have a question, feel free to drop in comment. I will be more then happy to answer your query.

Meanwhile you can also –

Suggested Read:

Sharing is Caring:

Leave a Reply

Your email address will not be published.