How to Create a static website using Amazon S3
Introduction
What is a Static Website?
These are the most basic types of websites and are the easiest to create.
A static web page is a web page that is delivered to the user's web browser exactly as stored.
It holds fixed content, where each page is coded in HTML and displays the same information to
every visitor.
No web programming or database design is required when working with them.
They are a safe bet when it comes to security, since we do not have any interaction with databases
or plugins.
They are reliable, i.e., if any attack happens on the server, a redirection to the nearest safest node
happens.
Static websites are very fast, because there is no true backend to fetch information from.
Hosting the website is cheap due to the non-existence of any other components.
Scaling of the website is easy, and can be done by just increasing the bandwidth.
Task Details
1. Log into the AWS Management Console.
2. Create an S3 bucket and upload a sample HTML page to the bucket.
3. Enable static website settings in the S3 bucket.
4. Make the bucket public.
5. Test the website URL.
Architecture Diagram
Creating a Bucket
Keep everything default and click on
Enable Static Website Hosting
1. Click your S3 bucket name and navigate to the Properties tab at the top of the screen.
2. Scroll down to the Static website hosting and click Edit.
3. In the Static website hosting dialog box
Static website hosting : Select Enable
Hosting type : choose Host a static website
Index document : Type index.html
Error document : Type error.html
Click on Save changes..
Copy the Endpoint to your clipboard and save it somewhere for later use.
http://staticwebsitedemo1.s3-website.ap-south-1.amazonaws.com
Next, download the two example HTML files below and upload them to your s3 bucket.
Download index.html
Download error.html
Click the Permissions tab to configure your bucket.
In the Permissions tab, Edit the Bucket Policy.
You will be able to see a Blank policy editor.
Before creating the policy, you will need to copy the ARN (Amazon Resource Name) of your
bucket.
Copy the ARN of your bucket to the clipboard. It is displayed at the top of the policy editor. it
looks like ARN:“arn:aws:s3:::your-bucket-name".
In the policy below, update the bucket ARN on the Resource key value and copy the policy code.
{
"Id":"Policy1",
"Version":"2012-10-17",
"Statement":[
{
"Sid":"Stmt1",
"Action":[
"s3:GetObject"
],
"Effect":"Allow",
"Resource":"replace-this-string-with-your-
bucket-arn/*",
"Principal":"*"
}
]
}
Click on Save changes.
Task 4: Test the website
Now copy the static website URL (that we saved earlier) and run it in your browser. You
will be able to see the index.html file's text. A sample screenshot is attached below:
Test the website's error page
Copy the static website URL (which we saved earlier) , but this time, add some random
characters to the end of the url to break it. When satisfied, hit enter. You will be redirected to the
error.html page automatically.
