Static Website hosting on AWS S3

Introduction

This is the blog for static website hosting in the AWS S3. I assume that you have a basic knowledge of the AWS-managed console and a basic understanding of the AWS.

Create a static project locally

Get the project for the GitHub link

You can clone the GitHub repository or download the project through GitHub to the GitHub link given below.

• Project Link

Manually Create your project

Create a basic HTML project locally using the basic HTML file. The main HTML file should be named index.html so that it will render the given project through the index.html. And you can add style.css and main.js depending on your need for the project. The files that you need are listed below.

• index.html
• styles.css
• scripts.css

Create S3 bucket

Log into the AWS-managed console

Enter the login username and password for logging into the AWS console with the credentials for the IAM user or the root password.

Choose the AWS region

You can choose the region for the AWS by selecting the top right corner drop-down of the AWS managed console.

Before you create any bucket you should choose the AWS region the default is US East (N.Virginia) but you can select the AWS region depending on the distance between the server and the desired location.

Create S3 bucket

Search the S3 in the AWS search and then click on it.

Create bucket

After going to the S3 bucket click on the Create bucket so that you create a bucket and fill in the additional details. The details are documented below:

• Create a bucket name

• Uncheck a (Block Public access setting)

Leave everything as the default and click the create bucket button to create a S3 bucket.

Change S3 bucket properties for the static website hosting

Go to the S3 bucket click the S3 bucket link that was created and search for the properties in the S3. Under the properties click the search for the static website hosting and click on the edit button so that you enable the static website hosting.

• Select the properties Tab

• Select The edit button of static website hosting

• Enable Static website Hosting

Upload File to S3

Upload the file that you have cloned from the previous project link or that you have manually created to S3
S3

Edit S3 Bucket Policy

Edit the bucket policy and paste the code below to give access to all s3 objects for static website hosting.

{
  "Id": "Policy1722232485407",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1722232483590",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::aws-blog-project",
      "Principal": "*"
    }
  ]
}

• Edit the bucket policy

• Paste the code above and save

After selecting the add enable checkbox then specify the default page for your static page.

As we have created a project using the index.html specify the index.html as a default webpage for the static website and save the changes.

After saving the changes you can see the auto-generated link below the static website hosting.

Click on the given link to visit your own S3 page.

Conclusion

You have successfully deployed your static website using AWS S3.