Setting up Static Website on AWS S3

Hello Geeks,

You gotta an overview of article by the title. It's 2022 and world is using CMS System for their websites or custom developed dynamic websites but still there are lot of geeks who have static websites and i am one of them. Back in 2018 i develeoped a javascript enabled web based MQTT Client for MQTT Broker testing and debugging. For the hosting of http://mqtt.run i used lot of different web hosting services but after becoming AWS Community Builder i started reviewing the services related to cloud storage, Already i am using AWS Lightsail and CloudFront for my E-Commerce & Tutorial website https://phpdocs.com but this time when i studied about S3 i made a plan to host one of my static website on S3 to get the taste of cloud for static website.

So if we generally talk about AWS S3 it's a storage services to host docs, images, videos or what ever you want to host on it. S3 is a reasonable and good solution in terms of Space, Bandwidth and region availability, so they are also providing option to host static website. Right now i am going to explore how to host static website on S3 but in future articles i will share how to host video content on S3 for educational website.
**

Firstly login into your AWS Console https://aws.amazon.com/
Step#1

After login type S3 in the search and click on S3 Service.

Step#2
Click on Create Bucket Button.

Step#3

After clicking on Bucket you will see a very long tail form but you don't need to worry as all are simple options.

1-Firstly enter the full domain name under bucket name in my scenario i have www.mqtt.run domain name.

2-Select the region which is nearest to you, it will give awesome browsing experience to your users. i am choosing Singapore as it's near to my region.

3-if you want to Copy settings from existing bucket then choose the bucket else don't touch it.

4-Choose ACL Disabled Under "Object Ownership".

5- Uncheck the "Block all public access" Under "Block Public Access settings for this bucket" and click on checkbox "I acknowledge that the current settings might result in this bucket and the objects within becoming public."

6-Leave the other configurations as it is and click on "Create Bucket" Button

7-after that you will see your buckets like that. now click on bucket for further configuration.

8-Under Objects tabs click on Upload and upload your files and folders. don't upload zip file as there is no option to extract the zip files. you need to upload files and folder manually. the good thing is that just select the folder and it will take care of all files and folder inside the selected folder.

9-After that click on Properties tab and scroll down the page to bottom and find the section "Static website hosting" and click on Edit as we need to enable website feature on our S3 Bucket.

10-Select Enable under Static website hosting and Select "Host a static website" under Hosting type. provide Index document which is usually "index.html" or "default.html" but in my case it's "index.html".

11- After selecting all these options just save the changes.

12- After Changes you will see the URL of your static website.

But when you click on that url you will get the file permission error as because we didn't set any permission policy on our bucket.

13- Click on "Permission" Tab, Scroll the page and find "Bucket policy" and click on "Edit"

14-Copy the below Policy just write your bucket name instead of www.example.com and click on save changes.

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.example.com/*"
}
]
}

Again open the URL and it will work fine Hurry Congrats. Next you need to point Your domain to S3 Bucket URL. Either you can point your domain cname records to S3 Static website URL or you can use AWS Route 53 to setup nameservers for your domain.

Well i am asuming that you don't have access to create cname records in your domain panel.

Step#4

1- Click on Top search bar and type Route 53 and click on Route 53 below from the suggestions.

2- Click on Hosted Zone.

3- Click on "Create Hosted Zone".

4-Enter Domain name and leave the other settings.

5- Click on "Create Hosted Zone"

After that you will get your zone listed.
6- Click on your Domain.

7- Copy Nameservers and set to domain in domain panel.

8- After setting your domain Nameservers click on "Create Record"
Here select CNAME under Record Type and Enter S3 Website URL under Value textarea and click on "Create Record" Button.

It will take some time to propagate the DNS Settings, later you can browse your website by directly type URL instead of long S3 URL.