Deploy static sites in minutes with AWS CloudFormation and IaC

Frontend developers often face the tedious task of deploying static websites—whether for client demos, personal projects, or production releases. While many hosting solutions exist, the real magic happens behind the scenes with infrastructure as code (IaC), which automates deployments for consistency and reliability. Instead of manually configuring AWS services, you can now leverage a modernized AWS CloudFormation template to deploy a secure static site in just a few minutes.

This guide introduces a streamlined IaC approach that simplifies static site hosting on Amazon Web Services (AWS). By automating the setup of critical AWS resources, the template eliminates the need for console navigation and manual configurations. Whether you're working with React, Svelte, Angular, or Vue, this solution accommodates any static framework by treating your build artifacts as deployable assets.

Who benefits from this solution?

This CloudFormation template is ideal for developers who want:

• A secure static website hosted on AWS with minimal effort
• An IaC-based deployment process instead of manual console configurations
• A template aligned with current CloudFront and S3 best practices
• A practical reference for CloudFront, S3, ACM, Route 53, and infrastructure design trade-offs

The solution is framework-agnostic, meaning you can upload the static build output (e.g., index.html, JavaScript bundles, and CSS files) to an S3 Bucket without worrying about compatibility.

Prerequisites: What you need before starting

Before deploying the template, ensure you meet these requirements:

• A registered domain name (e.g., example.com) with an active Route 53 hosted zone in the same AWS account where you’ll deploy the template. For DNS configuration guidance, refer to the official Route 53 documentation.
• The AWS CLI installed on your local machine. Installation instructions are available in the AWS CLI documentation.

Key improvements over the original template

The upstream AWS sample project provided a solid foundation, but its older v0.5 release included outdated patterns that are no longer recommended for new deployments. This modernized version addresses those gaps with the following upgrades:

• Replaced Origin Access Identity (OAI) with the newer Origin Access Control (OAC) for more secure S3 access
• Upgraded the asset-copy helper Lambda function from Node.js 12 to Node.js 20 for better performance and security
• Removed the Lambda@Edge function for response headers in favor of CloudFront Response Headers Policy
• Applied least-privilege IAM roles for S3 operations to enhance security
• Kept the S3 origin private behind CloudFront to restrict direct access
• Added improved logging, encryption, and ownership controls for compliance
• Supported optional apex domains (e.g., example.com and www.example.com)
• Defined custom Cache Policy and Origin Request Policy for optimized performance
• Enabled SPA-friendly error handling (e.g., routing 403/404 errors to 200 for single-page applications)
• Introduced explicit resource naming parameters for better resource management

What gets deployed?

This CloudFormation template provisions the following AWS resources automatically:

• An S3 Bucket to store static website assets
• A separate S3 Bucket for access logs to track requests
• An ACM certificate for your domain to enable HTTPS
• A CloudFront distribution positioned in front of the S3 origin for global content delivery
• Route 53 alias records for the subdomain and optionally the apex domain
• A custom resource that uploads sample static assets to the origin bucket
• CloudFront security headers, cache policies, and origin request policies for enhanced performance and security

For detailed deployment steps, refer to the Deployment Guide.

Troubleshooting common issues

While the deployment process is designed to be straightforward, minor issues may arise due to AWS service updates or configuration mistakes. If problems occur:

• Check the CloudFormation Dashboard for stack status and error logs in the nested stacks
• Review the template syntax if errors persist, as AWS periodically updates CloudFormation capabilities
• Ensure your domain’s Route 53 hosted zone is correctly configured and matches the domain used in the template

For cost-conscious developers, this setup is highly affordable. The primary expense is your domain name (typically $12–15 annually), while services like CloudFront, storage, and DNS operate on a pay-as-you-go basis. For low-traffic static sites, monthly costs often range from a few cents to a couple of dollars.

Final thoughts

Adopting CloudFormation as your IaC tool can save hours of manual AWS console navigation, reducing deployment time from hours to minutes. The inclusion of an apex domain option further enhances reusability, allowing you to host multiple static sites under a single domain. Whether you're deploying a personal project or a client demo, this modernized template provides a secure, scalable, and efficient way to manage your static site infrastructure.