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
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>© 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
Step 7: Enable Static website hosting and specify Index document as index.html and save
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
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.
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
Top comments (0)