Hosting a static website using Amazon S3 bucket

Hosting a static website using Amazon S3 bucket

Amazon S3

Amazon S3 is a service provided by Amazon that allows you to store and retrieve your files and data on the Internet. It's like a big virtual storage space where you can keep things like documents, pictures, videos, and more.

You can access your stored data through a web interface or by using programming interfaces (APIs). Amazon S3 is designed to be very reliable and can handle storing data of any size, from small files to very large ones.

It offers different options to store your data based on your needs, like storing frequently accessed data for quick retrieval or archiving infrequently accessed data at a lower cost. You can also control who can access your data and set up extra security measures like encryption.

Many individuals and businesses use Amazon S3 for various purposes, such as backing up their files, hosting websites, sharing files with others, and analyzing large amounts of data.

AWS S3 Object

An S3 object is a file or a piece of data that you store in Amazon S3. It can be any type of file, such as a document, image, video, or even a database backup.

Each object in Amazon S3 has a unique identifier called a key. The key is like the address of the object within the storage service. For example, if you have a picture called "vacation.jpg," the key for that object would be something like "photos/vacation.jpg." The key helps you locate and retrieve the object when you need it.

An object in Amazon S3 can be of any size, from very small to extremely large. You can store millions or even billions of objects within a bucket, which is a logical container for organizing and managing your objects in S3.

Objects in S3 are stored with high durability and availability, meaning they are designed to be safe and accessible. You can perform various operations on objects like uploading, downloading, copying, deleting, and modifying their properties.

Static and Dynamic Website

Static Website: A static website is a type of website that displays the same content to every visitor. The content of a static website is fixed and does not change based on user interactions or inputs. It is typically created using HTML and CSS, with each page being a separate HTML file.

Static websites are simple and easy to create. They are well-suited for websites that do not require frequent updates or dynamic functionality. Common examples of static websites include informational websites, portfolios, and simple company websites.

Dynamic Website: A dynamic website, on the other hand, is a type of website that can change its content dynamically based on user interactions and inputs. The content of a dynamic website is generated or fetched from a database or other data sources and can vary depending on factors such as user preferences, actions, or real-time data.

Dynamic websites often use server-side programming languages like PHP, Python, or Ruby, along with databases such as MySQL or MongoDB. They can include features like user authentication, personalized content, e-commerce functionality, and interactive forms.

Dynamic websites are more complex to develop compared to static websites, but they offer greater flexibility and interactivity. They are suitable for websites that require frequent updates, user-generated content, and interactive features such as online shopping, social media platforms, and web applications.

It's important to note that the boundary between static and dynamic websites is not always rigid. Websites can have both static and dynamic elements, where some parts of the website remain static while others are generated dynamically based on user interactions or data inputs.

Hosting a Static Website using Amazon S3 Bucket

Not only we can store data on an Amazon S3 bucket, but we can also host an entire website on the same. Let's do it following a few simple steps.

Just follow my lead!

  1. Create an S3 bucket

    Name your S3 bucket. The Bucket name must be unique and must not contain spaces or uppercase letters. Select an AWS region, I have selected N.Virginia (us-east-1).

    Please scroll down and go to the section called "Block Public Access settings for this bucket." In that section, deselect the checkbox mentioned to allow public access to your website. Additionally, click on the acknowledgment message located just below the checkbox.

    You can leave the rest of the settings as it is and click on Create bucket.
    You will see that your bucket is created successfully.

  2. Upload your files

    Now, upload your files and folders in the bucket. Go to the Properties section and scroll to "Static Website Hosting", and click on Edit.

    If you need my help with the files you can visit my GitHub page.

    Enable "Static website hosting"

  3. Edit the Bucket Policy

    Go to Permissions, and edit the Bucket policy.

    Add the following bucket policy.

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

    Replace [YOUR_BUCKET_NAME] with the name of your bucket policy.

    Click the 'Save' button to save changes.

  4. Test your website

    Copy the Bucket website endpoint and open it in a new tab.

    Yay!

    We've successfully created our website on an S3 bucket, it's up and Running!

    Thanks for reading!