Accessing AWS S3 Static website using bucket policy
Tags: s3, aws, html, css
Published: 2024-01-30 10:52:19

In this article we are going to discuss how to access AWS S3 static website when public access is disabled and please follow the step by step approach to implement it.

Step 1 : Login to AWS Console
Step 2 : Create an S3 bucket by navigating through S3 from AWS Console or cli command using cloud shell

```
aws s3 mb s3://my-static-website-30012024-abcdef
```
Step 3: Disable the public access by unselecting checkboxes and save 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag7a0871auj9wb6lc9mr.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t84qhtxsz0abny5q3tzl.png)

Step 4 : Create an index.html file with the below mentioned and uploaded to S3 bucket

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome to my S3 and CloudFront Static Website</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <header>
      <h1>Congratulations, you enabled secure access to this site!</h1>
    </header>
    <main>
      <img src="./images/cloud.png" alt="cloud" width="300" height="300">
      <p>Thanks for visiting my mock website. I hope you enjoy your stay.</p>
    </main>
    <footer>
      <p>&copy; 2024 Cloud Teachable Website</p>
    </footer>
  </body>
</html>

```
Step 5: Create style.css file and update with below mentioned code

```
body {
  background-color: #232f3e;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #F2F2F2;
  margin: 0;
}

header {
  background-color: #FF9900;
  padding: 20px;
}

img {
  border-radius: 50%;
}

h1 {
  font-size: 36px;
  color: #232f3e;
  margin: 0;
}

main {
  padding: 20px;
}

p {
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: justify;
}

p:last-child {
  margin-bottom: 0;
}

button {
  background-color: #FF9900;
  border: 1px solid #FF9900;
  color: #232f3e;
  font-size: 18px;
  padding: 12px 24px;
  margin: 10px 0;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

button:hover {
  background-color: #232f3e;
  color: #F2F2F2;
  border: 1px solid #FF9900;
}


footer {
  background-color: #232f3e;
  padding: 20px;
  text-align: center;
  font-size: 14px;
}

footer p {
  margin: 0;
  color: #F2F2F2;
}

```

Step 6 : Save the image given below as cloud.png and then a create a folder images in S3  and upload in it

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8bseccvi59zh778rprd.png)

Step 7: Enable Static website hosting and specify Index document as index.html and save

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vssz3gmavwa1myodwpzl.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo5vtj3pmqifd761fqc8.png)

Step 8 : Click on Bucket website endpoint

`http://my-static-website-30012024-abcdef.s3-website-eu-west-1.amazonaws.com`

And it will thrown an error with 403 Forbidden
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xyn2t0lfjs81x3t9w11.png)

Step 9: To Enable public access to the bucket using S3 bucket policy

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-static-website-30012024-abcdef/*"
        }
    ]
}
```

> In the resource section "arn:aws:s3:::my-static-website-30012024-abcdef" S3 static website arn to be replaced with your desired s3 bucket arn.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8qv4bwzg1u6kiyi74xt.png)


Conclusion: Access the S3 static website by disabling public access form step 3 and enabling access through S3 bucket policy  

💬 If you enjoyed reading this blog post and found it informative, please take a moment to share your thoughts by leaving a review and liking it 😀 and follow me in [linkedin](https://www.linkedin.com/in/srinivasuluparanduru/)