Hosting a Static Website in AWS S3 Bucket

Static websites have fixed content with no backend processing. They can contain HTML pages, images, style sheets, and all of the files required to render the website, but there is no server-side scripting or database. If desired, the web pages can provide interactivity and run programming logic by using JavaScript, which runs within the user’s web browser.

You can easily host a static website on Amazon Simple Storage Service (Amazon S3) by uploading the desired content and making it publicly accessible. No servers are required, and you can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere on the web.

  • Create a bucket in Amazon S3
  • Upload content to an S3 bucket
  • Enable public access to S3 bucket objects
  • Update a static website hosted in Amazon S3

Creating a bucket in Amazon S3

 

In the AWS Management Console, on the Services menu, click S3

  • Click Create bucket

An Amazon S3 bucket name is globally unique, and the namespace is shared by all AWS accounts. This means that after a bucket is created, the name of that bucket cannot be used by another AWS account in any AWS Region until the bucket is deleted.

Therefore, for this lab, i will use a bucket name with a random number, such as: nkcode-website

Deselect (turn off) Block all public access.

  • Select I acknowledge that…
  • Click Create bucket
  • Click the name of your new bucket.

You will now configure the bucket for Static Website Hosting.

  • Click the Properties
  • Click Static website hosting.
  • Click the Endpoint

You will receive a 404 Not Found error because the website has not been configured yet. Keep this tab open in your web browser so that you can return to it later.

  • Return to the web browser tab with the Amazon S3 management console (but do not close the website tab).
  • Click Use this bucket to host a website.
  • For Index document, enter: (You will need to enter this even though it is already displayed)
  • Click Save

Uploading content to your bucket

Upload the static website files to your bucket.

  • Click Upload
  • Click Add files
  • Navigate to and select the files that you in your computer.
  • Click Upload

Enabling access to the objects

There are several ways to make Amazon S3 objects public:

  • You can use a bucket policy to make an entire bucket or just a directory within a bucket public.
  • You can use an access control list (ACL) to make individual bucket objects public.

It is normally safer to make individual objects public because this avoids other objects being accidentally made public. However, if you know that the entire bucket contains no sensitive information, you can use a bucket policy.

You will now configure the individual objects in the bucket to be publicly accessible.

  • Return to the web browser tab with the Amazon S3 console (but do not close the website tab).
  • Select all 2 objects.
  • From the Actions menu, click Make public.

A list of the 2objects displays.

  • Click Make public

 

Your static website is now publicly accessible.