Introduction

In the ever-evolving landscape of web development and hosting, efficiency, scalability, and reliability are paramount. Amazon Web Services (AWS) offers a powerful combination of services for hosting static websites, leveraging the simplicity and affordability of Amazon S3 (Simple Storage Service) buckets, coupled with the global content delivery capabilities of Amazon CloudFront.
Amazon S3 is an object storage service designed to store and retrieve any amount of data from anywhere on the web. Its simplicity lies in its ability to store data as objects within buckets, which act as logical containers. For hosting a static website, each HTML, CSS, JavaScript, image, or other static file is treated as an object within an S3 bucket.

Amazon CloudFront: Global Content Delivery Network (CDN)
While S3 provides a reliable storage solution, Amazon CloudFront takes static website hosting to the next level with its Content Delivery Network (CDN) capabilities. CloudFront accelerates the delivery of your website's content by caching it at edge locations around the world.

By caching content closer to your users, CloudFront reduces latency and improves the overall performance of your website. Furthermore, it helps mitigate the impact of traffic spikes and distributes the load across multiple servers, ensuring a seamless browsing experience for visitors regardless of their geographic location.

Overview

This guide outlines the steps to host a static website on AWS S3 bucket and accelerate its delivery using Amazon CloudFront content delivery network (CDN).

• Prerequisites
  Before getting started, ensure you have the following:

  • An AWS account
  • A static website ready to be hosted

Creating S3 Bucket

• Sign in to the AWS Management Console: Go to the AWS Management Console and sign in to your AWS account.
• Navigate to S3: Once logged in, you can find the S3 service by typing "S3" in the search bar at the top of the console. Click on the "S3" service from the search results.
• Enter any bucket name of your choice e.g alex-buc
• Review and Create: Review your configuration settings and click on the "Create bucket" button to create your S3 bucket.
• Open the bucket you created

Uploading Files and Folders

• To upload individual files, click on the "Upload" button. This will open a file selection dialog where you can select the files you want to upload from your local machine.

Enabling static website hosting

• Open the bucket you created
• Click on properties
• In the "Static website hosting" settings, you'll find an option to enable static website hosting. Click on the "Edit" button. Select the option to enable static website hosting.
• At first, it will be disabled
• Enable it Specify the index document (e.g., index.html) and error document (optional) for your website.
• After configuring the static website hosting settings, click on the "Save changes" button to apply the changes.

Creating CloudFront Distribution

• Navigate to the CloudFront service by typing "CloudFront" in the search bar at the top of the console. Click on the "CloudFront" service from the search results.
  • Enter your bucket details in the origin
  • Edit the origin access from public
  • Click on origin access control settings
  • Origin Settings: Choose the S3 bucket that you want to serve as the origin for your CloudFront distribution. You can either select an existing S3 bucket from the dropdown menu or specify the S3 bucket's website endpoint. Leave other settings as default or configure them according to your requirements.
  • Scroll down and Enable security protection
  • Implement AWS WAF to filter and block malicious traffic before it reaches your CloudFront distribution. Create and associate WAF web ACLs (Web Access Control Lists) with your CloudFront distribution to define rules for filtering traffic based on IP addresses, HTTP headers, URI strings, and more.
  • Click on the "Create Distribution" button to create your CloudFront distribution. Wait for Deployment: (It may take some time for your CloudFront distribution to deploy)
  • Copy this policy and paste it inside the bucket policy. To do these;
    • click on bucket you created after copying the policy,
    • go to your file permission
    • edit the bucket policy and paste
    • Paste it here and save click save
  • Go back to your cloudFront and copy the distribution domain name

Testing

• Paste the distribution domain name on a new webpage
• Here is the result after running it successfully

With the following steps, I have successfully hosted a static website on AWS S3 bucket and accelerated its delivery using Amazon CloudFront. This website is now highly available and scalable.

Conclusion

Leveraging AWS S3 and CloudFront for hosting a static website offers a powerful, scalable, and cost-effective solution for web developers and businesses alike. By combining the simplicity of S3 with the global reach of CloudFront, you can deliver an exceptional web experience to your users while minimizing infrastructure overhead and maximizing performance.