Host a Static Website on AWS S3

In this article, we’ll discuss configuring an S3 bucket so that you can host a static website on AWS S3.

Amazon S3 bucket is one of the best tools to host a static website. S3 is highly scalable, secure, and has low latency. Also when it comes to data, there is almost no chance of losing data as your data is replicated across multiple data centers, and talking about the cost it is the cheapest one.

Prerequisites

• AWS credentials with S3 privileges
• Static website contents(files)
• Basics of AWS permissions and policies

Steps to Host a Static Website on AWS S3

Step-1: Create an S3 Bucket

First, log in using your AWS account.

• Go to the AWS Console page tab, then in the Services search field, type: S3
• Click S3 in the search results.

• Click Create bucket.

• Type a unique name for your bucket.
• Under AWS Region, choose the region, where you want to host your website.

Note: Please ensure that your correct region is selected under AWS Region.

• In the Object Ownership section, choose ACLs enabled.

Note: Bucket ACL defines which AWS accounts or groups are granted access and also the type of access these users have, such as read or write access.

• Under Object Ownership, choose Object writer.

• Click to deselect Block all public access.
• Click the acknowledgment at the bottom of the page.

• Scroll down to the Default encryption section.
• Under Server-side encryption, choose Enable.
• Accept default for Encryption key type.
• Click Create bucket.

Step-2: Upload Static Website files

After the bucket is ready, add your content to the bucket. For this follow the following steps:

• Click on the bucket you just created and click on Upload.

• Click defining bucket policies.
• Choose the files of your website. In my case, I have the following files:
  • index.html
  • main.js
  • style.css

• Now, Click on Upload.

• Review to verify that all files have been uploaded.
• Click Close.

Step-3: Enable Static Website Hosting in S3

• Click Properties.
• Scroll down to Static website hosting.
• Click Edit.

• Under Static website hosting, choose Enable.
• Under Hosting type, choose Host a static website.
• Under Index document, type: index.html (If you’ve other than index.html use that)

• Scroll to the bottom of the page.
• Click Save changes.

Step-4: Grant Permission with Bucket Policy Configuration

• Click the Permissions tab.
• Review the Block public access (bucket settings) to verify that Block all public access is Off.
• In the Bucket policy section, click Edit.

• Before proceeding next step, copy your bucket’s ARN.
• Delete the content in the Policy editor section.

Note: You may see an error under the Edit statement panel. Please ignore.

Copy and paste the following policy:

{
  "Id": "mywebsitebucketpolicyId",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "S3GetObjectAllow",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::cloudyfox-bucket/*", # --> Replace it with your bucket arn
      "Principal": "*"
    }
  ]
}

Here, the policy grants the s3:GetObject permission to any public anonymous users.

Replace the Resource value with the Bucket ARN you copied earlier. Review to ensure that the ARN ends with /*

• Click Save changes. Ignore the error alert.

Step-5: Run Your Website and Verify

• Click Properties and Scroll to Static website hosting.
• Review the settings to verify that Bucket hosting is listed under Hosting type.
• Click the icon to copy your Bucket website endpoint.

Finally, Click on the URL you’ll be redirected to a new browser tab with your live website. OR, Open a new window or browser tab, then paste your Amazon S3 bucket website endpoint you copied into the address bar. Press enter.

Your website should be live by now.

That’s it!!

Conclusion

In this, you’ve successfully learned to configure AWS S3 bucket and its policies to host a static website on your own.

Thank you!