How to setup Amazon S3 for Static Website

Static website

A static website displays pre-built HTML, CSS, and JavaScript files on a server. It differs from a dynamic website that generates content based on user actions or preferences.

What Is Amazon S3?

Amazon S3 (Simple Storage Service) is a scalable cloud storage service provided by Amazon Web Services (AWS). It is designed to store and retrieve any amount of data from anywhere on the web. S3 offers durable, secure, and highly available storage infrastructure for various use cases, ranging from simple backup and restore to complex big data analytics.

Amazon S3 can be used to host static websites, providing a cost-effective and scalable solution.

Using Amazon S3 and Amazon CloudFront together offers several benefits for hosting and delivering static content. Here are some advantages:

1. Scalability: Amazon S3 provides highly scalable storage for your static content, allowing you to store and retrieve any amount of data. It can handle sudden spikes in traffic and accommodate growing storage needs. When combined with Amazon CloudFront, the global content delivery network (CDN) service, your content can be distributed across multiple edge locations worldwide, ensuring low latency and high performance for users regardless of their geographic location.

2. Cost-Effectiveness: Amazon S3 and CloudFront follow a pay-as-you-go pricing model, where you only pay for the storage and data transfer you use. S3 offers cost-effective storage options, including various storage classes suited for different access patterns and data retention requirements. CloudFront helps minimize data transfer costs by caching and delivering content from edge locations, reducing the load on the origin server.

3. Improved Performance: By leveraging Amazon CloudFront's global network of edge locations, your static content can be cached closer to end users. This reduces the round-trip time (RTT) and improves overall website performance. CloudFront also optimizes content delivery by automatically compressing and optimizing files, enabling faster loading times for visitors.

4. Enhanced Security: Amazon S3 and CloudFront offer various security features. S3 supports encryption options, both in transit and at rest, to protect your data. You can also configure access controls using AWS Identity and Access Management (IAM) and bucket policies to manage who can access your content. CloudFront integrates with other AWS security services like AWS Web Application Firewall (WAF) and AWS Shield to provide additional protection against DDoS attacks and web application vulnerabilities.

5. Global Reach: CloudFront has a vast network of edge locations distributed across the globe. When your content is distributed through CloudFront, it is cached in these edge locations, reducing the latency for users accessing your website from different regions. This enables a consistent and fast user experience regardless of geographic location.

6. Analytics and Monitoring: Both S3 and CloudFront provide detailed logging and analytics capabilities. You can gain insights into the usage patterns, performance metrics, and visitor statistics for your static content. This information can be used to optimize your website and make informed decisions about content delivery.

By combining Amazon S3 and CloudFront, you can benefit from scalable storage, global content delivery, improved performance, cost-efficiency, enhanced security, and detailed analytics for your static content hosting needs.

How to config Static Website for Amazon S3?

At a high-level overview, hosting a static website on Amazon S3 requires the following steps:

1. Create an S3 Bucket: Log in to the AWS Management Console and navigate to the Amazon S3 service. Click on "Create bucket" to start the bucket creation process.

2. Provide Bucket Name: Enter a unique name for your bucket. The bucket name should be DNS-compliant and should ideally match your website's domain name. It is optional when you want to create Static Website using Amazon S3 and CloudFront.

3. Select Region: Choose the AWS region where you want to create the bucket. Select the region closest to your target audience for improved performance.

4. Enable Static Website Hosting: After the bucket is created, go to the bucket's properties. Under the "Static website hosting" section, click on "Edit."

5. Set Hosting Options: Select the "Use this bucket to host a website" option. Enter the index document name (e.g., "index.html") that will serve as the default page for your website. Optionally, you can also specify an error document to handle any errors encountered while accessing your website.

6. Configure Permissions: In the bucket's permissions settings, modify the bucket policy to allow public access to your website's content. Here's an example bucket policy to allow read access to all objects:

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

Replace the YOUR_BUCKET_NAME with your actual S3 bucket.

Verification

Now we almost finish the configuration. Next, let us upload files or static web applications on the S3 bucket e.g. hosting gatsby static website on Amazon S3.

After that, to test the website from the web browser type the domain: YOUR_BUCKET_NAME.s3-website-REGION.amazonaw... Replace your YOUR_BUCKET_NAME with the actual bucket name and region where deploying the S3 bucket. Verify that your website is loading correctly.

If you want to use a custom domain for your website, you can config the DNS setting to map your domain to the S3 bucket's website endpoint by creating a CNAME or Alias in your DNS provider's settings or follow the AWS document for routing traffic from your domain to S3 bucket.