Over a million developers have joined DZone.

Hosting Static Website on Amazon S3

· Cloud Zone

Build fast, scale big with MongoDB Atlas, a hosted service for the leading NoSQL database on AWS. Try it now! Brought to you in partnership with MongoDB.

In this article we will host static website on Amazon S3, before hosting we will first understand what is Amazon S3.

Amazon Simple Storage Service is storage for the Internet. It is designed to make web-scale computing easier for developers. It has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web. It gives any developer access to the same highly scalable, reliable, fast, inexpensive data storage infrastructure that Amazon uses to run its own global network of web sites. The service aims to maximize benefits of scale and to pass those benefits on to developers.

To start with hosting our static application, we will login to Amazon, sign in to the console with our email and password, once inside we will see the AWS Management Console same as below:




Then clicking on S3 under Storage & Content Delivery will take us inside S3 and here we will create bucket to put our static files.




I already have one bucket created as you can see from image and now we will create another one name "arpitaggarwal.com". To start with click on Create Bucket button, it will pop up with a window where we will give a name to our bucket and region name and for now keep the region name as Oregon(default).



Once bucket is created, click on it and we will see the empty bucket screen as below:


Here we will upload all our static stuff to be published publicily. So to start with, we will create our first page index.html (for me, you can give any name) and upload it to our newly created bucket. So, we will create index.html file in our text editor as below:

<!DOCTYPE HTML>
<html>
<head>
<title>Arpit Aggarwal | Consultant at Xebia</title>
</head>
<body>
Hello Arpit Aggarwal!
</body>
</html>
Now we will upload index.html into our newly created bucket  "arpitaggarwal.com". Click on upload button, then click Add Files button and upload index.html file. Once uploaded right click the index.html and select Make Public as in below image:




Now we are done with file creation and exposing it publicly. 
Now we have to enable the permissions to make it available to public. Click on Properties tab, we will see the below screen, here we will be changing the bucket permissions so it can be accessible publicly.



Expand Permissions tab and click on Add bucket policy link. It will open Bucket Policy Editor, edit it and paste the below content:

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Allow Public Access to All Objects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::arpitaggarwal.com/*"
}
]
}

Then click on Static website hosting tab and select the Enable website hosting and in Index Document textbox enter index.html (you can replace it with the name of your file) and click on Save button as in below image:



That's all, we are done with hosting, now we will check if it is publicly available or not. Click on Properties tab then open Permissions tab and click on Endpoint as below:




For me it's arpitaggarwal.com.s3-website-us-west-2.amazonaws.com

Now it's easier than ever to get started with MongoDB, the database that allows startups and enterprises alike to rapidly build planet-scale apps. Introducing MongoDB Atlas, the official hosted service for the database on AWS. Try it now! Brought to you in partnership with MongoDB.

Topics:
cloud ,amazon aws ,amazon s3

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}