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 steps to create an S3 bucket, configure its settings, and host a static website.

Step 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.

  

Step 2: Configure Bucket Settings

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.

  

Bucket Versioning

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

  

Tags (Optional)

• Add tags to help identify your bucket. For example:

  • Key: Name

  • Value: Zerotohero

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.

  

Advanced Settings

• Object Lock: This feature prevents objects from being deleted or overwritten for a fixed amount of time. We'll leave this disabled for now.

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

  

Step 3: Upload Files to Your Bucket

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.

   

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

   

   

Step 4: Delete the Bucket (Optional)

• To delete a bucket, ensure it is empty.

• Select the bucket, click on "Delete", enter the bucket name, and confirm the deletion.

  

  

  

  

Step 5: Host a Static Website

1. Create a new bucket for your website, e.g., AWS_Static_Website.

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.

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.

   

Step 6: Set Bucket Policy for Public Access

1. Navigate to the Permissions tab of your bucket.

2. Click on Bucket Policy and then Edit.

3. Enter the following bucket policy to allow public read access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::AWS_Static_Website/*"
    }
  ]
}

4. Save the changes.

Alternatively, 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:::AWS_Static_Website.

• Click on Add Statement and then Generate Policy.

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

  

  

  

  

Save the changes.

Step 7: Upload Website Files

1. Go back to the Overview tab.

2. 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.

  

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!