Hosting a Static Website Using Amazon S3

In today's world, most websites are static, which means they run no server-side code and only consist of HTML, CSS, and JavaScript. There is no server-side code to run, so there is no reason to host them on a traditional server.

Hosting static websites on an S3 bucket costs one to two dollars monthly and scales to millions of users.

Let's learn how to create a S3 Bucket and host the website.

Step 1: Create a Bucket

You can open S3 from the Amazon console by searching for S3 or clicking the link below. Console at https://console.aws.amazon.com/s3/

1. Click on Create Bucket

2. Enter your Bucket name and select AWS Region.

3. Uncheck block all public access

4. Keep the remaining settings as it is like bucket versioning etc.

5. Click on the Create Bucket button.

6. You will receive the below message.

Step 2: Upload files

1. Click your Bucket Name

2. Click on the upload button on the right.

3. Click on the add files button and upload your files. 

4. I am uploading index.html for now. You can upload your files (CSS/Images/Javascript and HTML)

Upload your file and then click on the Close Button.

Step 3: Allow Public Access

1. Go to permissions and Edit

2. Uncheck Block all public access and click Save changes.

Step 4: Enable Static website hosting

1. Click on your bucket go to Properties and scroll down.

2. Go to Static Website Hosting and Click Edit

3. Enable Static Website and Specify the index document. I am adding an index.html as a startup page.

4. Click Save Changes.

Step 5: Get URL

1. Click on your bucket Name and Go To Properties.

2. Under static website, you can get the static website URL.

3. If you run this URL you will get an error, access be denied, 403

Step 6: Set Bucket Policy

1. Clock on Bucket Name and Go to the Permissions Tab.

2. Go to Bucket Policy and Edit

3. Copy the below lines and Save. Note: You need to enter your Bucket ARN in Resource. You can find Bucket ARN in the Properties Tab.

{

    "Version": "2012-10-17",

    "Statement": [

        {

            "Sid": "PublicReadGetObject",

            "Effect": "Allow",

            "Principal": "*",

            "Action": "s3:GetObject",

            "Resource": "aarn:aws:s3:::tssbucket2024/*"

        }

    ]

}

4. Update ARN and press the Save Changes Button.

5. Open the link in the browser and you can see the Website is running.

http://tssbucket2024.s3-website.eu-north-1.amazonaws.com/

This is all about this article. I hope you like it.