How to Manually Host a Static Website on AWS S3 and CloudFront
Learn how to build a fully serverless, highly available website architecture by configuring an Amazon S3 bucket with CloudFront and AWS Certificate Manager.
Hosting a static website manually on physical servers can be costly and hard to scale. By leveraging Amazon S3 and CloudFront, you get a fully serverless, highly available website architecture that costs virtually nothing for low-to-medium traffic.
### Architecture Overview
1. **Amazon S3:** Stores your HTML, CSS, JavaScript, and image assets.
2. **Amazon CloudFront:** Acts as a Content Delivery Network (CDN) to cache your files globally.
3. **AWS Certificate Manager (ACM):** Provides a free SSL/TLS certificate for HTTPS security.
1. **Amazon S3:** Stores your HTML, CSS, JavaScript, and image assets.
2. **Amazon CloudFront:** Acts as a Content Delivery Network (CDN) to cache your files globally.
3. **AWS Certificate Manager (ACM):** Provides a free SSL/TLS certificate for HTTPS security.
### Step 1: Configure Your S3 Bucket
* Create an S3 bucket named after your domain (e.g., `mywebsite.com`).
* Upload your `index.html` and assets.
* Keep public access blocked—we will safely expose it using CloudFront instead of native S3 website hosting.
* Create an S3 bucket named after your domain (e.g., `mywebsite.com`).
* Upload your `index.html` and assets.
* Keep public access blocked—we will safely expose it using CloudFront instead of native S3 website hosting.
### Step 2: Set Up CloudFront
* Create a new CloudFront distribution.
* Set your **Origin Domain** to your S3 bucket.
* Under **Origin Access**, choose **Origin Access Control (OAC)** to securely connect CloudFront to your private S3 bucket.
* Update your S3 Bucket Policy with the policy auto-generated by CloudFront.
* Create a new CloudFront distribution.
* Set your **Origin Domain** to your S3 bucket.
* Under **Origin Access**, choose **Origin Access Control (OAC)** to securely connect CloudFront to your private S3 bucket.
* Update your S3 Bucket Policy with the policy auto-generated by CloudFront.
### Step 3: Map Your Domain
* Point your custom domain provider (or AWS Route 53) to your new CloudFront domain name
* Point your custom domain provider (or AWS Route 53) to your new CloudFront domain name
Now your site is live, secure, and blazing fast!
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article