Host a Static Website on S3

September 8, 2023

#aws #s3 #storage

Introduction

Amazon S3 (Simple Storage Service) is a highly scalable and secure object storage service offered by AWS. It allows users to store and retrieve data, such as documents, images, videos, and other data, in a cost-effective and reliable manner. S3 is highly scalable and durable due to its design, with data stored redundantly across multiple data centers, ensuring high availability.

In S3, you store data in buckets (containers for objects) and set access controls to determine who can access the stored data. Amazon S3 also includes advanced features such as versioning and lifecycle policies, as well as tiered-storage options to optimize for durability or cost-savings. Static websites (websites that are not dynamic and don’t often change) can also be hosted on S3. Due to its durability and availability, S3 has become a trusted storage solution across the globe and contains a significant chunk of cloud storage globally.

Tutorial: Getting Started with Amazon S3

In this tutorial, we’ll demonstrate how to create an S3 bucket and store, retrieve, and delete an object from the bucket. For this tutorial, we’ll host a simple, static website on S3 that contains the text “Hello, world!”.

Pre-requisites

An AWS account. If you don’t already have one, see our [AWS Getting Started]({{ ref . “getting-started” }}) tutorial.

Visit the AWS Management Console and sign in with your AWS account credentials.

Step 2: Open the Amazon S3 Console

In the AWS Management Console, type “S3” in the search bar. You can also find a link to S3 by clicking on the Services menu and selecting “S3” under the “Storage” group.

Step 3: Create a new S3 Bucket

Once you’re in the S3 console, click on the “Create Bucket” button. You will need to choose and enter a unique and descriptive name for your bucket.

Note that S3 bucket names a globally unique across all of AWS. This means that your bucket name must be a name that nobody else with an S3 account has used in the past.

When you’re ready to create your bucket, click “Next” to configure the bucket properties. You can configure any optional properties that you’d like, such as versioning, logging, or server access logging. For this tutorial, it’s not necessary to configure any of these options, so you can accept the default settings and click the Create button to create the bucket.

Step 4: Enable Static Website Hosting

After you create the bucket, you’ll be directed to the bucket’s detail page. If you need to get back to this page at any time, you can navigate to the S3 console, find the bucket from the list, and click on the bucket name.

Select the Properties tab to see additional configuration options for the bucket. There will be a configuration available for “Static Website Hosting.” Choose to enable this setting. You will be prompted for an Index Document and an optional Error Document. You can leave the error document alone for now, but enter index.html for the index document. You can leave all other options to their defaults.

Step 5: Enable Public Access

At this point, you have created an S3 bucket and have enabled static website hosting. However, S3 has default access controls which disable public access. This means that you won’t actually be able to access the website over the internet. To change this, you will need to enable public access.

You should not usually enable public access for S3 buckets. Enabling this option makes every object in your S3 bucket freely available to the public. Please make sure you understand the risk of enabling this option before doing so.

Select the Permissions tab to see additional permissions configurations. There will be an option for “Block Public Access”. Clear the “Block all public access” option (this will uncheck all other checkboxes) and click Save Changes. Now you have disabled the control which prevents your bucket contents from being accessed publically, however you still need to explicitly make the bucket publicly accessible. In the same Permissions tab, click the Edit button under “Bucket Policy”. To grant public read access, you can use the Bucket policy editor to enter the following bucket policy (replacing YOUR_BUCKET_NAME with the name of your S3 bucket):

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

Step 6: Create and Upload a Web Page

Now that you have created a publicly accessible S3 bucket, you will want to create and upload a simple web page. If you are familiar with HTML, feel free to create your own web page. Otherwise, you can use your favorite IDE or test editor to create the following file named index.html:

<!DOCTYPE html>
<html>
<body>
    <p>Hello, world!</p>
</body>
</html>

Save the index.html file. You can upload the file to the S3 bucket by either dragging and dropping the file into the bucket, or clicking the Upload button and selecting the file using your computer’s file browser.

Step 7: Visit Your Website

At this point, you should have a publicly available website hosted on Amazon S3. To visit your website and test that everything is configured properly, you can find the link on the S3 bucket detail page. Under the Static website hosting section, click the Bucket website endpoint button. Your website will open in a new tab in your web browser.

Step 8: (Optional) Clean up

After you are finished with the tutorial, you can clean up the S3 bucket and object you created to prevent additional storage or service charges. To delete the bucket (and all its contents), find the bucket in the Amazon S3 console, select the bucket, and choose Actions > Delete. You will be prompted to confirm that you will be deleting the bucket and all its contents. After you confirm, the bucket and all objects within the bucket will be deleted.

Alternatively, you can delete individual objects within the bucket. To do this, select the S3 bucket to view its contents. You can select any object(s) you’d like to delete, and choose Actions > Delete. After confirming, the objects you selected will be deleted.

Conclusion

Congratulations! In this tutorial, you successfully created an S3 bucket, uploaded an object, and enabled static web hosting to utilize S3 to host a static website. You can apply these skills to create more complex websites or expand on them to create more complex storage systems. As a thought exercise, consider how you may utilize S3 to create an image or document hosting service.

Remember to familiarize yourself with Amazon S3’s pricing model to understand the cost associated with your usage. AWS charges based on storage, data transfer, and other factors. Always be mindful of your AWS resource usage to optimize cost of the applications you build.