DEV Community

Cover image for How to Host Your Static Website on Amazon S3 in Simply way...
YOGESH BAGHEL
YOGESH BAGHEL

Posted on

How to Host Your Static Website on Amazon S3 in Simply way...

Amazon S3 (Simple Storage Service) is a cloud-based object storage service provided by Amazon Web Services (AWS). It is designed to store and retrieve large amounts of data in a secure, durable, and highly scalable manner.

amazons3

How Amazon S3 works:

  1. Buckets:

    • The basic unit of storage in Amazon S3 is a bucket. A bucket is a container that holds objects (files) in S3.
    • Each bucket has a globally unique name that must be DNS-compliant and adhere to specific naming rules.
    • You can create multiple buckets within your AWS account to organize and manage your data.
  2. Objects:

    • Objects are the individual files stored in Amazon S3. They can range in size from 0 bytes to 5 terabytes.
    • Each object in S3 is identified by a unique key, which includes the object name and its location within the bucket.
    • Objects can be any type of data, such as text files, images, videos, documents, etc.
  3. Storage Classes:

    • Amazon S3 offers various storage classes to optimize cost and performance based on your specific requirements.
    • Standard storage class provides high durability, availability, and performance.
    • Infrequent Access (IA) storage class is suitable for data accessed less frequently but still requires fast retrieval.
    • Glacier is a low-cost storage class for archiving and long-term backup. amazonstorageclass
  4. Data Durability and Availability:

    • Amazon S3 is designed to provide high durability and availability for stored data.
    • S3 automatically stores multiple copies of your objects across different servers and facilities within a region.
    • Data is redundantly stored and periodically verified to ensure integrity and durability.
  5. Security and Access Control:

    • Amazon S3 provides robust security features to protect your data.
    • You can configure access control policies using AWS Identity and Access Management (IAM) to manage user permissions.
    • S3 supports bucket policies, access control lists (ACLs), and encryption options to secure your data at rest and in transit.
  6. Scalability and Performance:

    • Amazon S3 is highly scalable, allowing you to store and retrieve any amount of data as your needs evolve.
    • It automatically scales to accommodate high request rates, making it suitable for both small and large-scale applications.
    • S3 also integrates with other AWS services and features, such as AWS CloudFront for content delivery and AWS Lambda for serverless computing.
  7. Data Transfer and Management:

    • You can transfer data to and from Amazon S3 using various methods, including the S3 Management Console, AWS CLI, SDKs, and third-party tools.
    • S3 provides lifecycle policies that allow you to automatically transition objects between different storage classes or expire them after a specified time.
    • Versioning and cross-region replication are additional features that enhance data management and disaster recovery capabilities.

Amazon S3 offers a reliable and scalable solution for storing and managing data in the cloud. It is widely used for a range of applications, including backup and restore, content storage and distribution, data archiving, and serving static websites.

To upload your static HTML, CSS, assets (such as images), and JavaScript files to Amazon S3, you can follow these steps:

Create an Amazon S3 Bucket:

  • Sign in to the Amazon S3 Management Console (https://console.aws.amazon.com/s3/).
  • Click on "Create bucket" to start creating a new bucket.

    Screenshot 2023-05-27 114831

  • Choose a unique name for your bucket and select the region where you want to store your files.

    Screenshot 2023-05-27 115101

  • Enable the ACLs Enabled

    Screenshot 2023-05-27 115158

  • Unblock all public access

    Screenshot 2023-05-27 115332

  • Enabled bucket versioning

    Screenshot 2023-05-27 115429

  • Leave the default settings for the rest of the options and create the bucket.

    Screenshot 2023-05-27 115535

Upload Files to the Bucket:

  • Open your newly created bucket in the S3 Management Console.

Screenshot 2023-05-27 115806

  • Click on the "Upload" button to start uploading files.

Screenshot 2023-05-27 115944

  • In the file upload dialog, click on "Add files" or "Add folder" to select the HTML, CSS, assets, and JavaScript files from your local machine.

Screenshot 2023-05-27 120138

  • Review the settings, such as permissions and metadata, for the uploaded files.

    Screenshot 2023-05-27 120217

  • Start the upload process.

Set Bucket and Object Permissions:

  • After the files are uploaded, select them in the S3 Management Console.

Screenshot 2023-05-27 120355

  • Click on the "Actions" dropdown and choose "Make public" to allow public access to your files. This is necessary if you want your website to be accessible to the public.

    Screenshot 2023-05-27 120500
    Screenshot 2023-05-27 120542

Configure Static Website Hosting:

  • Go to your bucket's properties

Screenshot 2023-05-27 120643

  • navigate to the "Static website hosting" section.

Screenshot 2023-05-27 120734

  • Enable static website hosting and specify the index document (e.g., "index.html") that will be loaded when someone accesses your website.

    Screenshot 2023-05-27 120818

Obtain the Website Endpoint:

  • Once static website hosting is enabled, you will see a website endpoint URL in the "Static website hosting" section of your bucket properties. Note down this URL as it will be used to access your website.

    Screenshot 2023-05-27 120920

Verify and Test your Website:

  • Open a web browser and enter the website endpoint URL (e.g., http://your-bucket-name.s3-website-us-east-1.amazonaws.com) to verify if your website is accessible.

That's it! Your static HTML, CSS, assets, and JavaScript files are now uploaded to Amazon S3, and your website is hosted. You can access it using the website endpoint URL you obtained. Remember to update any file paths in your HTML and CSS files to reflect the correct URLs for your assets and JavaScript files on Amazon S3.

Click here to visit on Website

Top comments (0)