My First Smart Static Website

Introduction

Building a smart static website was an exciting challenge. I wanted a site that was more than just a basic HTML page—I needed it to be scalable, fast, and reliable. To achieve this, I hosted my website on AWS S3, distributed it using CloudFront, secured it with AWS Certificate Manager, monitored performance with CloudWatch, and configured Route 53 to ensure my custom domain worked seamlessly.

While this might sound simple, I ran into a few challenges along the way. This blog post will walk through the process, the issues I faced, how I debugged them, and what I learned.

Building the Infrastructure

Creating an S3 Bucket

• Enabled static website hosting.
• Set up public access policies.

Uploading Website Files

• Added my index.html and supporting files.
• Configured proper permissions.

Setting Up CloudFront

• Created a CloudFront distribution to serve my content globally.
• Set the S3 bucket as the origin.
• Integrated AWS Certificate Manager to enable HTTPS.

Configuring Route 53

• Registered a custom domain (jordanpbraysr.org).
• Created an Alias Record pointing to the CloudFront distribution.

Monitoring with CloudWatch

• Configured CloudWatch to monitor request patterns and errors.
• Set up alarms to detect high error rates or latency.

Project Diagram

Troubleshooting and Debugging

Problem 1: Domain Not Resolving (DNS_PROBE_FINISHED_NXDOMAIN)

At first, my domain jordanpbraysr.org wasn’t resolving correctly. Running a dig command showed that the domain had no A record pointing to CloudFront.

Fix:

• Ensured Route 53 had an A record (Alias) pointing to the CloudFront distribution.
• Verified that NS (Name Server) records matched those in my domain registrar settings.
• Allowed time for DNS propagation.

Problem 2: Website Updates Not Reflecting

Even after uploading the correct index.html, my site still showed the old version.

Fix:

• Invalidated the CloudFront cache (/* wildcard in CloudFront).
• Cleared my browser cache.

Problem 3: Certain Tabs Not Working

Some links, like Certifications and Blog, were not opening new pages.

Fix:

• Updated index.html with correct paths for certifications and blogs.
• Ensured blog pages existed in the S3 bucket.
• Double-checked internal linking structure.

What I Learned

• CloudFront caching can cause delays in updates, so always invalidate the cache after changes.
• DNS propagation takes time; patience is key.
• File permissions and policies are crucial when hosting on S3.
• Debugging tools like dig and nslookup are essential for troubleshooting domain issues.
• CloudWatch logs are invaluable for monitoring performance and diagnosing errors.

What’s Next?

This was my first smart static website, but I don’t want to stop here. Right now, I manually set up the infrastructure, but in my next project, I plan to automate this entire deployment using Infrastructure as Code (IaC) with Terraform or AWS CloudFormation. Stay tuned!