DEV Community

Sathvik Kumar
Sathvik Kumar

Posted on

Static Site in the Cloud: An S3 Project

I’m excited to share my recent project, S3 Static Site Deployer, where I successfully hosted a static website using Amazon S3! This project involved creating a fully serverless, scalable, and cost-effective solution for web hosting, perfect for showcasing content without the complexity of a backend server.

Key Components:

Amazon S3: Hosted the static assets (HTML, CSS, JavaScript) with easy setup and minimal cost.
Amazon CloudFront: Integrated a CDN for faster, global content delivery.
Amazon Route 53: Managed the custom domain for a professional touch.

What I Gained: This project deepened my knowledge of AWS services, particularly in creating a seamless, globally available web solution. I'm thrilled to build on these cloud skills and look forward to more projects in the cloud space!

AWS #CloudComputing #S3 #StaticWebsiteHosting #CloudSkills #ProjectCompletion

Here’s a step-by-step guide to hosting a static website on Amazon S3:

Step 1: Create an S3 Bucket
Sign in to the AWS Management Console.
Open the S3 Console.
Click on Create Bucket.
Enter a unique Bucket Name (e.g., my-static-website-example).
Choose a Region that’s closest to your target audience.
Disable Block All Public Access (you'll make the bucket publicly accessible for a static website).
Click Create Bucket.

Image description

Image description

Step 2: Upload Website Files
Open your newly created bucket.
Go to the Objects tab, then click Upload.
Upload all files needed for your website, like HTML, CSS, and images.
Click Upload to finalize.

Image description

Step 3: Update S3 Bucket Permissions for CloudFront Access
Go back to the S3 Permissions tab and ensure the bucket policy allows CloudFront access.
If you restricted bucket access, no public bucket policy is needed. Instead, CloudFront’s origin access control will handle permissions.

Step 4: Set Up Route 53 for DNS Management (if you have a custom domain)
Register a Domain: If you don’t already have a domain, you can register one in the Route 53 Console.

Create a Hosted Zone:

Go to Route 53 Console > Hosted Zones and create a hosted zone for your domain (e.g., example.com).
Create Alias Records for CloudFront:

In your hosted zone, click Create Record.
Choose Simple Routing and select Define Simple Record.
Select Alias to CloudFront distribution.
Choose the distribution you created in CloudFront, then click Define Simple Record to complete it.

Step 5: Test Your Website
In the Properties tab under Static website hosting, you’ll see a Bucket website endpoint link.
Click this link to open your website in a new tab and verify everything is working as expected.

Image description

Top comments (0)