Host a static website in S3

Hello Everyone

Welcome to CloudAffaire and this is Debjeet

In the last blog post, we have discussed Server Access Logging in S3. We have also enabled Server Access Logging for an S3 bucket.

https://cloudaffaire.com/server-access-logging-in-s3/

In this blog post, we are going to discuss how to host a static website in S3 bucket.

Host a static website in S3:

You can host a static website in your AWS S3 bucket. A static website does not support server-side scripts such as PHP, ASP.net etc. AWS S3 provides region-specific website endpoints for a static website which can be used to access the static website. You can also use your own domain name instead of region-specific website endpoints.

S3 static website hosting supports both internal and external webpage redirection and advanced conditional redirection with redirection rules. You can also enable website traffic logging for your S3 static website.

Prerequisite for this demo:

• An S3 bucket.
• A sample website index page in HTML.

Step 1: Login to AWS console and click ‘S3’ located under Storage.

Step 2: Click ‘Create bucket’ and create a bucket with a name that resembles your website name. Once the bucket is created click on the bucket name.

Step 3: Click ‘Create folder’ and provide a name to the folder and click ‘Save’.

Note: In Amazon S3, a bucket is a flat container of objects; it does not provide any hierarchical organization as the file system on your computer does. You can create a logical hierarchy by using object key names that imply a folder structure. Our website has a background image that is stored in the image folder. Hence we are creating a folder named image inside our bucket where we will upload the photo.jpg file.

Step 4: Click ‘Static website hosting’ located under ‘Properties’.

Step 5: Select ‘Use this bucket to host a website’, provide your index page name and click ‘Save’.

Static website hosting enabled successfully.

Next, we are going to provide access trough bucket policy to make the website publically accessible.

Step 6: Navigate to ‘Bucket Policy’ located under ‘Permissions’ and provide public read access and click ‘Save’.

Next, we are going to upload the static website files.

Step 7: Navigate to ‘Overview’ and click ‘Upload’. Upload your index.html file in the bucket root.

Warning: Uploading files to your S3 bucket attract charges depending upon the file size and bucket region.

Step 8: Click ‘image’ folder and upload photo.jpg inside it.

Step 9: Open your browser and navigate to your website endpoint.

Note: AWS provides two formats for your static website endpoints depending upon the region they are hosted.

<bucket-name>.s3-website-<region>.amazonaws.com

<bucket-name>.s3-website.<region>.amazonaws.com

Our website is hosted in the Asia Pacific (Mumbai) or ap-south-1 region and is accessible with ‘dot’ instead of ‘hyphen’.

https://cloudaffaire.com.s3-website.ap-south-1.amazonaws.com

To stop acquiring any cost, disable static website hosting and delete the bucket once the demo is completed.

Hope you have enjoyed this article, in the next blog post, we are going to discuss encryption in S3.