Host Your Static Website on Amazon S3: A Hands-on Lab

Amazon S3 Static Website

Amazon S3, a cloud storage service offered by Amazon Web Services (AWS),presents an innovative and cost-effective solution for building static websites that not only load quickly but also provide a good user experience.

Amazon S3, originally designed for storing and retrieving data, but it can be used for hosting static websites. Unlike traditional dynamic websites, static websites consist of fixed HTML, CSS, and JavaScript files that remain constant for each visitor.

Configuration Steps to Create Amazon S3 Static Website

Step1 :- Login to AWS Managemnet Console .

Step 2 :- Go to Services and Select S3 Service>Storage > S3

Step 3:- Goto S3 Bucket and and create one for hosting Website S3>Buckets>Create Bucket
bucket name should be unique

Step 4:– Make Public this folder >>uncheck Block all public access and proceed for bucket creation.

Bucket is ready now

Step 5:- Now to start Website creation go bucket properties and enable Static Website hosting


Step 6:-Enable Website hosting.

Step 7 :-Enable Static Website Hosting and Hosting Type [Host a static website]

Amazon S3 Static Website


Step 8:- Index Document should be index.html,Now we have enabled Static website and index file mentioned here.


Step 8:-Upload index file into S3 Bucket.


file uploaed

Step 9:Now copy URL of website and open it .

Ohhh! this is Access denied.

Visit Official Documentation from AWS

Lets resolve it

Method 1:To Access website content from internet ,Make Website Public using ACL.

Step-1 Goto Bucket permision tab and select object Ownership [Edit]

Step-2 Select ACLs enabled radio button

Step-3 Next step to click on Access Control list(ACL) [Edit]

Step-4 Check List and Read for everyone (Public access)

Step 5 Now goto bucket Object index.html >> Action and select Make Public Using ACL.

Step-6 Make Public the object

Step-7 Now access website on web browser , Wow it is working now

S3 Website

Method 2:To Access website content from internet ,Using Bucket Policy.

Note: In this case ACL is disabled

We access Website and it shows error.

Step-1 Goto Permission and [Edit] bucket Policy.

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “AllowPublicAccesstoObjects”,
“Effect”: “Allow”,
“Principal”: ““,
“Action”: “s3:GetObject”,
“Resource”: “Bucket ARN/
}
]
}

Now Access Website and Wow it is working

One of the most appealing aspects of using Amazon S3 for hosting your static website is its cost-effectiveness. You pay only for the storage and bandwidth you use, making it an ideal choice for startups, personal blogs, and small businesses looking to establish an online presence without breaking the bank.

Static websites hosted on Amazon S3 benefit from Amazon’s Content Delivery Network (CDN), ensuring that your web content is distributed across multiple edge locations worldwide.

Leave a Reply

Your email address will not be published. Required fields are marked *