Host a Static Website in AWS S3

7 min readAug 17, 2022

Let’s host a simple static website in 5 minutes

Hey guys! Since I have started trying out some AWS stuff practically, I thought of writing about the things I’m doing. So, this is the 2nd article following that. Today I will use another AWS service — Simple Storage Service which is well known as AWS S3!

S3 is simply an object storage which supports various kind of files to store in it. After storing and giving the necessary access, we can view the files in s3 bucket just using a simple specific URL. It’s path will be something like this.

https://demo-bucket.s3.amazonaws.com/ec2.png

When we do hosting also we will get a URL like this but have some difference in the path. AWS adds a suffix with phrase — s3-website to distinguish it as a static website. Example will be:

http://demo-static-site.s3-website-us-east-1.amazonaws.com

So, our website also will have this when we create it.

Let’s start the work! Login to AWS console and go into S3 Service home page.

Create S3 Bucket

You will have a user interface like this on S3 home page. Click on “Create Bucket” and proceed as follows.

Provide a name for the bucket. Remember this must be something unique! After that select “ACLs disabled”. Keep the other settings as it is.

Under next section — Block Public Access settings for this bucket, you have to remove the tick of Block all public access. When you remove it, you will be prompted with a warning and there you have to put the tick.

Keep the other settings as default. Disable the encryption also.

Now, click on Create Bucket button and proceed

You have the bucket now. We are going to host a website right? So, we need to give the public access using policies to this bucket files. Otherwise AWS will complain — access is denied!

Click on newly created bucket and move onto its permissions tab.

Go down and you will see a permission section called Bucket policy. Click on “Edit” button to add our policy.

So, copy the below snippet and paste on policy statement. And save the changes you have done. Here, react-demo is bucket name. Put your bucket name here. Other values are same.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicReadAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::react-demo/*"
        }
    ]
}

After adding this rule, your bucket will have a RED badge also saying — Publicly accessible, like this.

Not access is granted. next step is the most important one! Since S3 bucket is a common storage point, until unless we specify the bucket to behave as a static website, it will not support our scenario.

To enable the bucket for static hosting, move onto Properties tab on selected bucket. As the last setting section there, you will see a section titled as — Static website hosting.

Go inside that and enable the feature as follows. We must give the index page here. I think you know what it is..It’s the main page that is served when our site is launched. Normally we name it as index.html as a practice. Then whatever the content on this file will be shown when we visit the website.

Now bucket is ready!!!

Host a Simple Static Website 💥

Since we are focusing on a simple static website written with HTML CSS, we have to prepare a simple HTML file with some content. And create an error page also. I will put very basic 2 files.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
</head>
<body>
    <h3>Hello Guys! I'm an AWS Static Website</h3>
</body>
</html>

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
</head>
<body>
    <h3>Error Loading Page!</h3>
</body>

Select the bucket and click on “Upload” button. Then add these as files. You will see the two files after upload is done.

Now, we have to find our website URL right? Then move to Properties tab again and scroll down to Static website hosting section. You will see it like this.

Copy the URL shown for you and open it on the browser. In my case, it is showing the content I have put in the index.html.

Check you one also..It should be working now guys!!! All good right? That’s all..We have hosted a simple website on AWS 😍

Host a React Application 💥

You know how to host a simple HTML site using S3 now. Let’s say we have a application written with React. How we can utilize S3 service to host this? can you imagine?

Usually to deploy React/Angular applications, we have to build it using build commands.

Create a new React App. Just the dummy app is also enough to test this.

Then I ran the below famous command since it’s a React app. Remember this app is not containing any back-end/API related stuff. It is purely a front-end app.

npm run build

Now I have the bundled build files as the outcome. There I have an index.html file.

Now we have a HTML file to serve!

Create another bucket following all the steps as previous. Enable it as a bucket which supports static website hosting. Now let’s try to upload all the files in our react application /dist folder, into s3 bucket! First upload /static as a folder. Then add the remaining files.

Finally bucket will be having this file structure.

Now again to Properties tab and get the URL for this React application. And enter it on your browser.

That’s all guys! Now we have hosted a simple React application also. 😍 🙉

Host an Angular Application 💥

Since now we have a little knowledge how to deploy a react application, we can apply the same knowledge here. Angular applications also can be built for deployment. But this time command is different. Just create a new Angular project and use the below build command.

ng build

This will generate bundled files inside a folder called /dist in your project. Create another S3 bucket and configure it as same as previous. Then upload all the files in /dist folder into the new bucket.

Finally bucket will be having this file structure.

Now again to Properties tab and get the URL for this Angular application. And enter it on your browser. In my case view is like this…

That’s all guys! Now we have hosted a simple Angular application also. 😍 🙉

I think this is an awesome service. Isn’t it? Rather than just using as a storage like our google drive, we can use S3 to static hosting also. This is not a hard setup. The most important thing is to provide the necessary access and provide base files. AWS will take take of hosting part.

Enough for today then! I will more when I learn about AWS services.

Bye bye!

Host a Static Website in AWS S3

Create S3 Bucket

Host a Simple Static Website 💥

Host a React Application 💥

Host an Angular Application 💥

Written by Salitha Chathuranga