Project Title:-
Hosting a Static Website on AWS S3

Project Title:- Hosting a Static Website on AWS S3

ยท

4 min read

Table of contents

๐ŸŒŸ Introduction

It is a trustworthy and scalable platform to host your static website is essential in today's digital environment. Enter Amazon Simple Storage Service (S3), a cloud storage option that offers seamless static website hosting capabilities in addition to file storage.

In this blog post, we go into the world of hosting static webpages with S3 on AWS. We walk you through every step of setting up and configuring S3 to act as the hosting environment for your website.

๐ŸŒŸ Steps

  • Log in to your AWS account (preferably using an IAM user, which is a best practice) for every learner/professional.

  • Navigate to services, search for S3 (simple storage service) and click on S3, create a bucket to create a bucket, fill up the needed information in the general configuration, such as bucket name, AWS, region, encryption key type by default S3 provide encryption etc.

  • Refer to this blog link if you want to know how to create

    S3_BUCKET

  • After the bucket has been created, the user is alerted via the confirmation message highlighted in green, a created bucket shows: the bucket name (which is always unique, AWS region, access level, and creation date).

  • To host a static website, a bucket has to be created to store our source code and other static files by uploading these files to the recently created bucket, this is done by clicking on the newly created bucket and clicking on the upload button, files can be uploaded via drag and drop method or manually adding files or folders ( as the case may be).

  • Now go to the properties section on your s3 bucket, at the bottom of the page go to the edit static website hosting option.

  • Enable the static website hosting option, put the name of your index file name and at the end click on save changes.

  • You get the URL of the bucket website endpoint, copy the url on your web browser.

  • Now getting 403 forbidden error, not accessing my index file. Its time to troubleshoot the error.

  • For our static site to be visible, static website hosting has to be enabled, go to permissions section edit bucket public access (bucket setting) untick the block public access, then save changes.

  • Again test the bucket endpoint URL, it's failed to get output.

  • Edit Bucket policy: bucket policy provides access to objects stored in the bucket, this is usually written in JSON; for this project, it is essential to explicitly allow and ensure the resource is having the name of the particular bucket the static files are stored in (this can be copied from the top, the bucket ARN.)

  • Bucket policy has been successfully edited, and blocking all public access has been turned off.

Note that the bucket policy resource has the name of the bucket I am currently working with.

  • Copy the URL and paste it into the browser, and the static site (well-configured and made publicly accessible) will be visible on the browser.

๐ŸŒŸ Recommendations.

  • It is recommended to do this project on an IAM user's account (by default, an IAM user has no permission, it is advisable to give the IAM user permission to perform this action).

  • Bucket names are unique, that is, one bucket name cannot be used more than once, Always give your buckets realistic names.

  • Always enable static hosting and uncheck the block public access settings for the bucket housing static files to make these files publicly accessible.

Ensure that the bucket policy has the name of the bucket housing the static files, and also ensure that each opening bracket or curly brace has a corresponding closing braces / curly bracket.

๐ŸŒŸ Conclusion

In this blog we learn important concepts, how to host static web site/pages, how to give permissions, troubleshoot some errors, solve the error and finally get the output.

\...................................................................................................................................................

The above information is up to my understanding. Suggestions are always welcome. Thanks for reading this article.

#aws #S3 #awscloud #DevOps #TrainWithShubham

#90daysofdevopsc #happylearning

Shubham Londhe Sir

Follow for many such contents:

LinkedIn: linkedin.com/in/dushyant-kumar-dk

Blog: dushyantkumark.hashnode.dev

ย