Host a static website on Amazon S3

cloudairx

Abiodun Eniola

Posted on April 7, 2024

Host a static website on Amazon S3

Step 1

  • Login to the AWS Console
  • Navigate to the S3 and click Create bucket

Image description

Step 2

  • Give your bucket a unique name
  • Choose a region
  • Select the ACLs disabled (recommended)
  • Turn off block all public access (Note: this is not a good practice, but for this tutorial, we will turn it off
  • Disable bucket versioning ( we don't need it for now)
  • Enable the server-side encryption and choose the Amazon S3-managed keys (SSE-S3) encryption type
  • Leave everything as default and click Create Bucket.

Image description

Image description

Image description

Image description

Step 3

  • Now that our bucket has been created

Image description

  • Click on the bucket we just created.
  • Let's upload our website file to the bucket

Image description

Now that our website file has been uploaded successfully. Let's make a few setting

Step 4

  • Click on the properties tab and scroll down
  • At the Static website hosting option, click edit to change the settings

Image description

  • Enable the static website hosting
  • Select host a static website as the hosting type
  • Input "Index.html" to specify the home or default page of the website.
  • Input "error.html" if you have an error page or leave it (It's optional) and save changes.

Image description

Step 5

  • Click the permission tab, we need to change some settings to enable our website to be accessed publicly
  • Scroll to the bucket policy and click edit

Image description

Now let's copy the blow policy and paste it into our text box and replace the bucket name with our own

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::bucket-web-app00/*"
        }
    ]
}

Enter fullscreen mode Exit fullscreen mode

Image description

Click on save. Our bucket is now public and can be accessed by everyone

Step 6

  • Let's go back to the properties tab
  • Navigate to the static website hosting option
  • Copy the URL or click on the link to access our website

Image description

Viola! Our website is up and running

Image description

Congratulations! We have just successfully hosted our static website on AWS S3.

💖 💪 🙅 🚩
cloudairx
Abiodun Eniola

Posted on April 7, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024