How to Host a Static Website Using Amazon S3

Amazon S3 (Simple Storage Service) is a scalable storage service offered by AWS (Amazon Web Services). In this tutorial, we'll walk through the task to create an S3 bucket, configure its settings, and host a static website.

Task 1:Create a New S3 Bucket

Task 2: Upload Files to Your Bucket and access the file through URL

Task 3:Host a Static Website

Task 1: Create a New S3 Bucket

1. Log in to AWS Management Console and navigate to the S3 service.

2. Click on "Create bucket" to start the process.

General Configuration

• Bucket Name: Enter a unique name.

• Region: Select the desired region for your bucket.

Object Ownership

• ACL (Access Control List): For this tutorial, we will disable this option.

Block Public Access Settings

• To make the bucket publicly accessible, do not select any options under "Block all public access". Acknowledge the current settings to proceed.

• 

  This feature helps maintain multiple versions of an object. For now, we'll disable bucket versioning.

Default Encryption

• Server-Side Encryption with Amazon S3 Managed Keys (SSE-S3): This option is selected by default. It ensures that the objects stored in the bucket are encrypted.

• 

  Click on "Create bucket" to create your bucket. You will see your bucket listed among your existing buckets.

• 

Task 2: Upload Files to Your Bucket and access the file through URL

1. Click on the bucket name to open it.

2. Click on "Upload", then select the file you want to upload and click on "Upload" again.

   

   Once uploaded, you can click on the file name to open it. You can share the URL to allow others to access the file.

   

   Now, you can see your file is successfully accessible

   

   Task 3: Host a Static Website

   1. Create a new bucket for your website, e.g., ukg-aws-static-bucket.

   2. Region: Select the desired region.

   3. Block Public Access: Unselect all options and acknowledge.

   4. Click on "Create bucket".

      

      Enable Static Website Hosting

      1. Click on your new bucket that you created above(ukg-aws-static-bucket).

      2. Navigate to the Properties tab.

      3. Scroll down to Static website hosting and click on Edit.

      4. Enable static website hosting.

      5. Hosting Type: Select "Host a static website".

      6. Index Document: Enter index.html.

      7. Error Document: Enter error.html.

      8. Click on Save changes.

         

         Set Bucket Policy for Public Access

      9. Navigate to the Permissions tab of your bucket.

      10. Click on Bucket Policy and then Edit.

      11. you can use the AWS Policy Generator to create this policy:

          

          • Click on Policy Generator.

          • Step 1: Select "S3 Bucket Policy".

          • Step 2: In "Effect", select "Allow".

          • Principal: Enter *.

          • Action: Select GetObject.

          • Amazon Resource Name (ARN): Enter arn:aws:s3:::ukg-aws-static-bucket.

          • Click on Add Statement and then Generate Policy.

Copy the generated policy and paste it into the bucket policy editor.

After clicking Save Changes we get some error:

• Get some error because there is a problem in the resource name

  it should be "Resource": "arn:aws:s3:::ukg-aws-static-bucket/*". you are missing the /* which means any object inside the bucket.

  

  Upload Website Files:

• Go back to the Overview tab.

• Uploadindex.html and error.html to your bucket.

  

  Accessing Your Static Website

  • Navigate to the Properties tab, scroll down to Static website hosting, and you'll see the URL for your website.

  • 

  • Visit the URL to see your website. If everything is set up correctly, your index.html page will be displayed.

    

  • Error Handling: If you enter a wrong URL or navigate to a non-existent page, the error.html page will be shown, indicating that the page was not found.

    Type a wrong URL:https://ukg-aws-static-bucket.s3-website.us-east-2.amazonaws.com/profile

    

    Conclusion

    By following these steps, you can create an S3 bucket, configure its settings, and host a static website. Amazon S3 provides a cost-effective way to host static content and can scale to meet your needs.

  • **Happy hosting!**😊