image.png

Managing Static Content Delivery with Amazon S3 and CloudFront

Overview

This project involved the design, deployment, and optimization of a personal static website using Amazon S3 for object storage and CloudFront for global content distribution. The goal was to establish a reliable, cost‑efficient, and high‑performance method of delivering static HTML content to a global audience while ensuring scalability and low latency.

The Challenge

Delivering static website content directly from an S3 bucket without a content delivery network can result in inconsistent performance for users in different geographical regions. Network latency, limited caching, and the absence of edge delivery can degrade the user experience. The challenge was to create a simple yet production‑ready architecture that could serve static files reliably, scale with traffic demands, and maintain optimal load times worldwide.

The Approach

I chose an architecture built around S3’s static website hosting capability integrated with CloudFront as the CDN. This combination provided the benefits of cost efficiency, ease of configuration, and AWS‑native security features. The focus was on following a sequence of logically dependent steps to establish the hosting infrastructure, configure secure public access, and ensure content was distributed through edge locations for optimal performance.

Tools Used

The Execution

  1. I began by creating the single‑page HTML file index.html with a responsive layout to ensure compatibility across desktop and mobile browsers, incorporating personal profile content that introduced my name, career interests, and a long‑term life goal, which would serve as the central page of the site.

    image.png

  2. I provisioned an Amazon S3 bucket named about-kiza-bucket in the chosen AWS region to act as the primary storage location, aligning the bucket name with the intended site identity for clearer resource management.

    Screenshot 2025-08-14 043751.png

  3. I enabled static website hosting within the bucket’s Properties, configuring the index document to point to index.html so that HTTP requests to the bucket endpoint would consistently render the homepage without requiring explicit file paths.

    image.png

  4. I modified the bucket’s public access settings by disabling block public access and then implemented a bucket policy granting read‑only permissions to all users, ensuring the content could be accessed publicly while maintaining write protection for data integrity.

    image.png

  5. I uploaded the index.html file into the bucket, confirming that the object’s permissions matched the bucket policy so that the file was immediately available for public read requests through the S3 website endpoint.

    image.png

  6. I created a new CloudFront distribution, selecting the S3 bucket as the origin, which allowed CloudFront’s global network of edge locations to cache the content close to end users, significantly reducing latency and improving load times for geographically diverse visitors.

    image.png