Static Website Hosting is a feature of the product which lets you define an HTTP endpoint, set index, and error documents, and use S3 like a website.
In order to create a Static website with S3 we need to create an S3 bucket. To create an S3 bucket go through my previous blog.
In this blog, I am going to connect the s3 bucket with the Domain name. So that we can access the s3 bucket using the domain name.
If you don’t have a domain name don’t worry you can still do this😉.
So let’s start
If you have a domain name and you want to access the s3 bucket using the domain name then the bucket name should match your domain name.
For example; if your domain name is “learnaws.net” then create a bucket called “mynewbucket.learnaws.net “
Hope you have created a bucket 🆒
Step-1
—Download this file
Extract the file and upload the folders and files into your s3 bucket.
Upload the index file and the images to the bucket
Step-2
Click on Properties and scroll all the way down to the bottom.
Click on the Edit button
⏺ Enable static website hosting. ⏺Select Host type as Host a static website Under Index document enter index.html and under Error document enter error.html like you see in the below image. And then click on save changes
Step-3
Go to permissions and click on Edit
— ❌Uncheck Block all public access and click on save changes
You will see this pop-up enter confirm and click on confirm button
You can make your bucket public while creating the bucket itself but I forgot to do that, so you do😅 just kidding.
Go to Properties again, scroll down to the bottom, copy the URL, and paste it into a new browser.
Oops, our website is still not accessible! Why?🤔🤔
Don’t worry, I’ve figured it out! We have made our Bucket accessible to the public but objects inside the Bucket are not public yet, and for that, we need to create the bucket policies.
Step-4
Let’s create a bucket policy.
Copy the below JSON document
{
"Version":"2012-10-17",
"Statement":[
{
"Sid":"PublicRead",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::examplebucket/*"]
}
]
}Go to Permission again and under bucket policy click on the Edit button
Paste the JSON document under the policy. Make sure to replace “your-bucket-name” with your S3 Bucket Name. You can find the Bucket ARN above the editor. Save when it’s done.
Ensures not to remove /* after the bucket name in JSON policy
Step-5
Access the website through the URL.
Copy the URL again and paste it into a new browser
Wow 💪 we made it. Now our website is ready to be accessed by anyone from anywhere.
Step-6
Access the website through the Domain name (don’t have a domain then skip this step)
Open Route53
Go to Hosted Zone click on your domain name and then click on Create record button.
Remember if you want to access the s3 bucket using the domain name then the bucket name should match your domain name.
- Record name = Enter your bucket name excludes your domain name. Refer to the image below
- Enable Alias
- Under Route traffic to; dropdown and select Alias to S3 website endpoint
- Dropdown and select the region where your s3 bucket is created.
- Dropdown and select the bucket you created for this project.
- Keep Routing policy as Simple routing
- Then click on create records
Copy the record name we created and paste it into the new browser.
You may need to wait for some moment(I have waited almost 5 min😇). Now you can see I opened the website using the domain name.
Step-7
Clean-up
- Select the record name we created and click on Delete record
Go back to the S3 console select the bucket we created and click on the Empty button
Type or copy-paste permanently delete and click on Empty
Go back to your bucket again and this time click on Delete
Enter your bucket name and click on Delete bucket
CONGRATULATIONS👏
