AWS Technology

Host a Static Website on s3

1:27 AM
twwip_adm

With Amazon s3, you could host a static website containing HTML,basic CSS or static content webpages that does not get served from a web framework. Its does not interact with other web servers to dynamically change the web content in the browser.

The basic of Static Website is that it comes with a fixed no of pages or contents with a specific layout and when an user runs the pages in the browser, the content remain static and doesn’t change based on user action.

To host a static website, you need to first configure your s3 bucket. So that it could be accessible to the end user. We are going to discuss on below points to cover this article

  • Bucket Configuration
  • Bucket Policy Configuration
  • Upload an Index document
  • Verify your Website

Before you start configuring your Bucket, you must have a Bucket created which you would use for web hosting. If you don’t have yet, refer (link) to create a bucket in s3.

Bucket Configuration

1. Sign into AWS Console (link) and open s3 service

2. Select your Bucket and go to Properties and then click on Static Website Hosting

By default, this is disabled by AWS. You need to enable it to create your website endpoint.

3. Click on Use this bucket to host a website

Provide your index document name index.html and as that of error document as error.html and then click on Save

4. Now your Bucket hosting service is enabled in the Bucket

5. Modify your default Public Access Settings

Go to Permissions of your Bucket and click on Edit Policy

By default, all public access are blocked by Amazon. So we need to allow this by deselecting the Block all public access. Click on Save to proceed.

It would ask for confirmation to save your change. Type confirm and proceed

The final change would show the Block all public access has been turned off

Bucket Policy Configuration

Now you need to add a bucket policy to your Bucket. So that the objects inside bucket could be accessible by others.

1. Go to Permissions of your Bucket and click on Bucket Policy

2. Add below policy to give Public Read Access to your website & Save it

{
   "Version": "2012-10-17",
   "Statement": [
     {
       "Sid": "PulicReadObject",
       "Action": [
         "s3:GetObject"
       ],
       "Effect": "Allow",
       "Resource": "arn:aws:s3:::<Bucket-Name>/*",       "Principal": ""
     }
   ]
 }

Upload an Index Document

1. Create an index.html file and upload it to your s3 bucket

<!DOCTYPE html> 
<html> 
<body> 
<h1>Welcome! To Your First Apache Home Page 
</body> 
</html>

Verify your Website

You are all set with your static website hosting configuration in s3.

The two general forms of s3 website endpoint are as follows

 http://your-bucket.s3-website-region.amazonaws.com
 http://your-bucket.s3-website.region.amazonaws.com

The direct HTTPS access to the website is not supported. But you could take help of CloudFront, Amazon Certificate Management (ACM) to configure it. You could also setup a static website using your custom domain.

Now test your connection from browser & verify if its working fine

Copy the s3 Endpoint of your bucket and enter in the browser. It would display the static index.html content for your successful website hosting.

I hope this blog helps to host a static website in s3.

Please comment below if you have any questions/concerns related to this blog.

Leave a Reply