Benjamin Dwumah

Benjamin Dwumah

Software Engineer - Big Data, AI & Cloud

Hosting a static website on S3

Posted on July 22, 2022

In this blog we are going to learn more about Amazon Web Services (AWS) via a practical example, and that is hosting a static website on Amazon Simple Storage Service (S3). This is one of the projects that I picked up in AWS academy summer training and I am happy to share it with you all. Amazon S3 is a scalable, high-speed, web-based cloud storage service. The service is designed for online backup and archiving of data and applications on AWS. Amazon S3 was designed with a minimal feature set and created to make web-scale computing easier for developers. It provides 99.999999999% durability for objects stored in the service and supports multiple security and compliance certifications. An administrator can also link Amazon S3 to other AWS security and monitoring services, including CloudTrail, CloudWatch and Macie.

There’s also an extensive partner network of vendors that link their services directly to Amazon S3. Data can be transferred to S3 over the public internet via access to S3 application programming interfaces (APIs). There’s also Amazon S3 Transfer Acceleration for faster movement over long distances, as well as AWS Direct Connect for a private, consistent connection between S3 and an enterprise’s own data center. An administrator can also use AWS Snowball, a physical transfer device, to ship large amounts of data from an enterprise data center directly to AWS, which will then upload it to S3. In addition, users can integrate other AWS services with S3. For example, an analyst can query data directly on S3 either with Amazon Athena for ad hoc queries or with Amazon Redshift Spectrum for more complex analyses. Amazon S3 can be used by organizations ranging in size from small businesses to large enterprises. S3’s scalability, availability, security and performance capabilities make it suitable for a variety of data storage use cases. Common use cases for S3 include data storage, data archiving, software delivery, website hosting, etc.

Static websites have fixed content with no backend processing. They can contain HTML pages, images, style sheets, and all files that are needed to render a website. However, static websites do not use server-side scripting or a database. If you want your static webpages to provide interactivity and run programming logic, you can use JavaScript that runs in the user’s web browser. You can easily host a static website on S3 by uploading the content and making it publicly accessible. No servers are needed, and you can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere on the web. After reading the blog and completing the project with me, you will be able to:

  • Create a bucket in Amazon S3
  • Upload content to your bucket
  • Enable access to the bucket objects
  • Update the website

Let’s get to work!!

Creating a bucket in Amazon S3

  1. In the AWS Management Console, on the Services menu, search for S3 and choose it. image

  2. Choose Create bucket. image

  3. Enter a bucket name. An S3 bucket name is globally unique, and the namespace is shared by all AWS accounts. After you create a bucket, the name of that bucket cannot be used by another AWS account in any AWS Region unless you delete the bucket.

  4. Select the AWS region in which the S3 bucket will be created. Try to select a region near the public that will access the website.

  5. In the Object Ownership section, select ACLs disabled, then verify Bucket owner enforced is selected. image

  6. Clear Block all public access, then select the box that states I acknowledge that the current settings may result in this bucket and the objects within becoming public. image

  7. Choose Create bucket. image

  8. Choose the name of your new bucket. image

  9. Choose the Properties tab.

  10. Scroll to the Static website hosting panel.

  11. Choose Edit. image

  12. Configure the following settings:
    Static web hosting: Enable
    Hosting type: Host a static website
    Index document: index.html.
    Note that you must enter this value, even though it is already displayed.
    Error document: error.html

  13. Choose Save Changes image

  14. In the Static website hosting panel, choose the link under Bucket website endpoint. You will receive a 403 Forbidden message because the bucket permissions have not been configured yet. Keep this tab open in your web browser so that you can return to it later. image

Your bucket has now been configured to host a static website.

Upload website content to the bucket

We will upload the files that will serve as your static website to the bucket. The files can be found in this github repo. Download the files and follow the steps below to serve it to the bucket.

  1. Return to the Amazon S3 console and in the website bucket you created earlier, choose the Objects tab.

  2. Choose Upload image

  3. Choose Add files.

  4. Locate and select the 3 files that you downloaded.

  5. If prompted, choose I acknowledge that existing objects with the same name will be overwritten.

  6. Choose Upload image

  7. Once the files have been uploaded, choose Close image

Enabling access to the objects

Objects that are stored in Amazon S3 are private by default. This ensures that your organization’s data remains secure. We will make the uploaded objects publicly accessible. We confirmed that the website is not accesible from the 403 Forbidden message we received when we accessed the link. This response is expected! This message indicates that the static website is being hosted by Amazon S3, but that the content is private. You can make Amazon S3 objects public through two different ways:

  • To make either a whole bucket public, or a specific directory in a bucket public, use a bucket policy.
  • To make individual objects in a bucket public, use an access control list (ACL).

It is normally safer to make individual objects public because this avoids accidentally making other objects public. However, if you know that the entire bucket contains no sensitive information, you can use a bucket policy. We will now configure the individual objects to be publicly accessible.

  1. Return to the Amazon S3 console and in the website bucket, choose the Objects tab.

  2. Select all three objects.

  3. In the Actions menu, choose Make public via ACL. image

  4. Choose Make public.

The static website is now publicly accessible. Return to the web browser tab that has the 403 Forbidden message and refresh the webpage. You should now see the static website that is being hosted by Amazon S3. Because it is hosted on Amazon S3, the website has high availability and can serve high volumes of traffic without using any servers. You can also use your own domain name to direct users to a static website that is hosted on Amazon S3. To accomplish this, you could use the Amazon Route 53 Domain Name System (DNS) service in combination with Amazon S3. Creating, managing, and hosting websites and webpages and sharing data publicly is very important and crucial as this provides the public face of most brands and organizations. Looking at this perspective, AWS has developed a great idea to publicly provide an easy and simple solution for their users to host content using the S3 bucket. This guide describes simple steps to host your static website using the AWS S3 bucket. I hope you found this article helpful.