How to Host Static Site on S3

How to Host a Static Site on S3 Hosting a static website on Amazon S3 (Simple Storage Service) is one of the most cost-effective, scalable, and reliable ways to deploy modern web applications. Whether you're building a personal portfolio, a marketing landing page, a documentation hub, or a single-page application (SPA) powered by React, Vue, or Angular, S3 provides a robust foundation without the

alex

Nov 10, 2025 - 11:41

How to Host a Static Site on S3

Hosting a static website on Amazon S3 (Simple Storage Service) is one of the most cost-effective, scalable, and reliable ways to deploy modern web applications. Whether you're building a personal portfolio, a marketing landing page, a documentation hub, or a single-page application (SPA) powered by React, Vue, or Angular, S3 provides a robust foundation without the overhead of managing servers. With global content delivery via Amazon CloudFront, near-instantaneous uptime, and pay-as-you-go pricing, S3 has become the go-to choice for developers seeking simplicity and performance.

Unlike traditional web hosting that requires configuring servers, managing operating systems, or handling security patches, S3 eliminates these complexities by offering a fully managed object storage service. When configured correctly, an S3 bucket can serve your HTML, CSS, JavaScript, images, and other static assets directly to users around the world with minimal latency. Combined with AWSs global infrastructure, this makes S3 not just a storage solution, but a full-fledged content delivery platform.

In this comprehensive guide, youll learn exactly how to host a static site on S3from setting up your bucket and uploading files, to enabling website hosting, configuring permissions, securing your site with HTTPS, and optimizing performance. By the end, youll have a production-ready static website running on AWS with enterprise-grade reliability and scalability.

Step-by-Step Guide

Prerequisites

Before you begin, ensure you have the following:

An AWS account (free tier available)
Basic familiarity with the AWS Management Console
A static website ready to deploy (HTML, CSS, JS, images)
A domain name (optional, but recommended for production)

If you dont have a static site yet, create a simple one. For example, make a folder named my-website with the following files:

index.html
styles.css
script.js
images/logo.png

Heres a minimal index.html to get started:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Static Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Static Site</h1>
<p>Hosted on Amazon S3.</p>
<img src="images/logo.png" alt="Logo">
<script src="script.js"></script>
</body>
</html>

Save all files locally. Youll upload them shortly.

Step 1: Create an S3 Bucket

Click the Create bucket button. Youll be prompted to enter a bucket name. The name must be:

Unique across all AWS accounts globally
Between 3 and 63 characters
Lowercase only
Use hyphens or periods, but no underscores

For example: my-static-site-2024

Choose a region close to your primary audience. While S3 is global, selecting a region with lower latency improves initial load times. For most users, US East (N. Virginia) is a safe default.

Uncheck Block all public accessthis is critical. Since youre hosting a public website, your bucket must be accessible over the internet. AWS will warn you about this setting; confirm you understand the risks and proceed.

Leave all other settings at default for now. Click Create bucket.

Step 2: Enable Static Website Hosting

Once your bucket is created, select it from the list. Go to the Properties tab.

Scroll down to the Static website hosting section and click Edit.

Check the box for Enable static website hosting.

In the Index document field, enter: index.html

In the Error document field, enter: index.html (this is essential for SPAs that use client-side routing like React Router or Vue Router)

Click Save changes.

After saving, youll see a new endpoint URL appear below the settings. It will look like:

http://my-static-site-2024.s3-website-us-east-1.amazonaws.com

Copy this URL. You can paste it into your browser to test your sitebut it wont work yet, because your files arent uploaded, and permissions arent configured.

Step 3: Upload Your Website Files

Go to the Overview tab of your bucket.

Click Upload, then Add files. Select all the files from your local my-website folder.

After selecting files, click Upload.

Once uploaded, verify that all files appear in the bucket listing. Your structure should look like:

index.html
styles.css
script.js
images/logo.png

Step 4: Configure Bucket Policy for Public Access

By default, uploaded files are private. To serve them publicly, you must apply a bucket policy that grants read access to everyone.

Go to the Permissions tab.

Scroll to Bucket policy and click Edit.

Paste the following JSON policy. Replace my-static-site-2024 with your actual bucket name:

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-static-site-2024/*"
}
]
}

Click Save changes.

This policy allows any user on the internet to read (download) objects from your bucket. It does not allow writing, deleting, or listing contents unless explicitly granted.

Step 5: Test Your Website

Return to the Properties tab and locate the Static website hosting endpoint URL again.

Open a new browser tab and paste the URL. You should now see your website rendered correctly.

If you see a blank page or 403 error, double-check:

File names are spelled exactly right (case-sensitive)
index.html is uploaded and set as the index document
The bucket policy is correctly applied
Files are not private (check the Permissions column in the file listit should say Everyone has Read access)

If you see your site, congratulationsyouve successfully hosted a static website on S3!

Step 6: Connect a Custom Domain (Optional but Recommended)

While the S3 endpoint works, its not professional. To use your own domain (e.g., www.yourwebsite.com), follow these steps:

Option A: Use S3 with Route 53 (AWS DNS)

If you purchased your domain through AWS Route 53:

In the Route 53 console, select your hosted zone.
Create a new record:
Record name: www (or leave blank for root domain)
Type: A
Value: Copy the S3 website endpoints IP address (you can ping the endpoint URL to get it, or use a tool like DNSChecker)
Save.

Alternatively, use an alias record:

Record type: A
Alias: Yes
Alias target: Select your S3 bucket from the dropdown (it should appear if youre in the same region)

Alias records are preferred because theyre dynamic and cost-free.

Option B: Use a Third-Party Domain Provider (e.g., Namecheap, GoDaddy)

If your domain is registered elsewhere:

Log in to your domain registrars dashboard.
Find DNS management settings.
Remove any existing A or CNAME records pointing to other hosts.
Add a CNAME record:
Name: www
Value: my-static-site-2024.s3-website-us-east-1.amazonaws.com
Save and wait for DNS propagation (up to 48 hours, usually under 10 minutes).

For the root domain (e.g., yourwebsite.com), CNAMEs arent allowed by DNS standards. You must use an A record pointing to the S3 endpoints IP addresses. AWS publishes these IPs for each region. For US East (N. Virginia):

54.231.16.0
54.231.17.0
54.231.18.0
54.231.19.0

Set four A records pointing to these IPs. This ensures redundancy and high availability.

Step 7: Enable HTTPS with CloudFront (Critical for Production)

By default, S3 website endpoints serve content over HTTP only. Modern browsers flag HTTP sites as not secure, and search engines penalize them. To enable HTTPS, you must use Amazon CloudFront, AWSs content delivery network (CDN).

Step 7.1: Create a CloudFront Distribution

In the AWS Console, go to CloudFront and click Create distribution.

Under Origin domain, paste your S3 website endpoint URL (e.g., my-static-site-2024.s3-website-us-east-1.amazonaws.com).

Set Origin ID to something descriptive, like MyStaticSiteOrigin.

Leave Origin path blank.

For Viewer protocol policy, select Redirect HTTP to HTTPS.

Under Default cache behavior settings, leave defaults for now. You can optimize later.

Under Alternate domain names (CNAMEs), enter your custom domain (e.g., www.yourwebsite.com).

Under SSL certificate, select Custom SSL Certificate ? Request or import a certificate with ACM.

In the ACM pop-up, request a certificate for your domain and its www subdomain (e.g., yourwebsite.com and www.yourwebsite.com).

Wait for ACM to issue the certificate (usually under 10 minutes). You may need to validate it via email or DNS (follow AWS prompts).

Once issued, return to CloudFront and select the certificate from the dropdown.

Leave other settings as default and click Create distribution.

Step 7.2: Update DNS to Point to CloudFront

Go back to your DNS provider (Route 53 or registrar).

Change your CNAME record for www to point to your CloudFront distribution domain name (e.g., d1234567890.cloudfront.net).

For root domain, update A records to point to CloudFronts IP addresses (AWS publishes these; use the latest list from AWS Docs).

Wait for DNS propagation.

After 515 minutes, visit https://www.yourwebsite.com. You should now see your site served securely over HTTPS with a valid SSL certificate.

Best Practices

1. Always Use HTTPS

Never serve your static site over HTTP. Use CloudFront with ACM-certified SSL to ensure encryption. This protects user data, improves SEO rankings, and avoids browser warnings.

2. Set Correct MIME Types

AWS S3 automatically detects MIME types based on file extensions. However, if you upload files without extensions or use non-standard ones, S3 may serve them as application/octet-stream, causing browsers to download them instead of rendering.

To fix this:

Ensure all files have correct extensions: .html, .css, .js, .png, etc.
If using a build tool (Webpack, Vite, etc.), configure it to output files with proper extensions.
Manually edit object metadata in S3 if needed: select a file ? Properties ? Metadata ? Add key Content-Type with value text/html, text/css, application/javascript, etc.

3. Enable Compression

Enable Gzip or Brotli compression to reduce file sizes and improve load times. S3 doesnt compress files automatically, but CloudFront can.

In your CloudFront distribution, under Origin and Origin Groups, ensure Compress Objects Automatically is set to Yes.

This compresses HTML, CSS, JS, and other text-based files on-the-fly before delivery to users.

4. Set Cache Headers

Improve performance by setting long cache expiration times for static assets.

In S3, edit object metadata and add:

Key: Cache-Control
Value: max-age=31536000 (1 year) for assets like CSS, JS, images
Value: max-age=300 (5 minutes) for HTML files

CloudFront respects these headers. This reduces origin requests and lowers bandwidth costs.

5. Use Versioned Filenames or Hashes

To avoid stale caching issues, append a hash to filenames during builds:

styles.abc123.css
app.def456.js

Modern build tools (Webpack, Vite, Parcel) do this automatically. This allows you to set aggressive cache headers without worrying about users seeing outdated code.

6. Monitor Usage and Costs

S3 is inexpensive, but costs can grow with traffic. Monitor usage in the AWS Cost Explorer or set up billing alerts.

Use S3 Storage Lens to analyze storage patterns and identify large or infrequently accessed files.

Consider lifecycle policies to delete old logs or temporary files automatically.

7. Secure Your Bucket

Even though your site is public, avoid granting unnecessary permissions:

Never grant s3:PutObject or s3:DeleteObject to the public.
Use IAM users with limited permissions for deployment, not root credentials.
Enable S3 access logs to track requests.
Consider enabling S3 Block Public Access at the account level, and disable it only for specific buckets.

8. Use CI/CD for Automated Deployment

Manually uploading files via the console is fine for testing, but for production, automate deployment.

Use GitHub Actions, AWS CodePipeline, or tools like aws-cli or s3cmd to sync your local build folder with your S3 bucket:

aws s3 sync ./dist s3://my-static-site-2024 --delete

This ensures every code push triggers a fresh deployment.

Tools and Resources

1. AWS CLI

The AWS Command Line Interface lets you manage S3 buckets from your terminal. Install it via:

pip install awscli

Configure it with your AWS credentials:

aws configure

Useful commands:

aws s3 ls List buckets
aws s3 sync ./site s3://bucket-name --delete Sync and delete extraneous files
aws s3 cp index.html s3://bucket-name --content-type "text/html" Upload with custom headers

2. S3 Browser (GUI Tool)

For users who prefer desktop tools, S3 Browser (Windows) or Cyberduck (Mac) provide intuitive interfaces for uploading, editing metadata, and managing permissions.

3. Build Tools

For modern JavaScript frameworks:

React: npm run build ? output in build/
Vue: npm run build ? output in dist/
Angular: ng build ? output in dist/
Vite: npm run build ? output in dist/
Next.js (Static Export): npm run build && npm run export ? output in out/

Always build your site locally first, then upload the entire output folder to S3.

4. DNS and SSL Tools

DNSChecker.org Verify DNS propagation
SSL Labs Test Validate your HTTPS configuration
GTmetrix Analyze page speed and performance
PageSpeed Insights Googles performance scoring tool

5. Automation and CI/CD

Automate deployments with:

GitHub Actions: Use the aws-actions/amazon-s3-sync action
Netlify or Vercel: If you prefer managed hosting with built-in CI/CD
AWS CodePipeline: For enterprise-grade workflows

6. Documentation

Refer to official AWS resources:

Real Examples

Example 1: Personal Portfolio Site

A freelance designer built a portfolio using HTML, CSS, and vanilla JavaScript. She uploaded the files to an S3 bucket named janedoe-portfolio, enabled static hosting, and applied a bucket policy for public access. She then used CloudFront to enable HTTPS and connected her domain janedoe.design. Her site loads in under 1.2 seconds globally and costs less than $0.50/month. She uses GitHub Actions to auto-deploy every time she pushes to the main branch.

Example 2: Open-Source Documentation

A team maintaining a developer tool created documentation using Docusaurus. After running yarn build, they uploaded the build folder to an S3 bucket. They configured CloudFront with a custom domain (docs.mytool.dev) and set up caching for 1 year on static assets. They also enabled access logs and CloudWatch alarms for 4xx errors. The documentation now serves over 50,000 monthly visitors with zero downtime.

Example 3: Marketing Landing Page

A startup launched a product with a single-page landing page built in React. They used Vite to build the site, then deployed it to S3. To reduce latency for international users, they configured CloudFront with multiple edge locations. They added a custom domain and SSL certificate, then integrated with Google Analytics and Hotjar for user behavior tracking. The page achieved a 98/100 Lighthouse score and reduced bounce rate by 35% compared to their previous shared hosting.

Example 4: Static Blog (Markdown to HTML)

A developer used Astro to build a blog from Markdown files. Astro outputs pure HTML, CSS, and JSperfect for S3. He wrote a simple Node.js script to sync the output folder to S3 on every commit. He also set up a cron job to invalidate CloudFront cache after each deploy. His blog has been running for 2 years with no server maintenance and costs under $2/month.

FAQs

Can I host a dynamic website on S3?

No. S3 only serves static files. For dynamic content (user logins, databases, server-side rendering), you need a backend server (e.g., AWS Lambda + API Gateway, EC2, or a platform like Vercel or Render).

Is S3 hosting secure?

Yes, when configured properly. Use HTTPS via CloudFront, restrict bucket permissions, and avoid exposing sensitive data in client-side code. Never store API keys or secrets in static files.

How much does it cost to host on S3?

On the AWS Free Tier, you get 5 GB of storage and 15 GB of bandwidth per month for 12 months. After that, pricing is approximately:

Storage: $0.023 per GB/month
Requests: $0.0004 per 1,000 GET requests
Data transfer: $0.09 per GB (outbound to internet)

For a small site with 10,000 visits/month, expect under $1/month.

Why is my site loading slowly?

Common causes:

Missing CloudFront (no CDN)
Large, uncompressed files
Missing cache headers
Incorrect DNS configuration

Use tools like PageSpeed Insights or GTmetrix to identify bottlenecks.

Can I use S3 with a root domain (e.g., example.com)?

Yes, but you must use A records pointing to S3s IP addresses or CloudFronts IPs. CNAMEs are not allowed at the root level by DNS standards.

Do I need to pay for CloudFront?

CloudFront has a free tier (50 GB data transfer/month for 12 months). After that, its pay-as-you-go. For low-traffic sites, costs are negligible. The benefits of speed, SSL, and caching far outweigh the minimal cost.

How do I update my site after deployment?

Rebuild your site locally, then sync the new files to S3 using aws s3 sync. If using CloudFront, invalidate the cache (or set short TTLs for HTML files) to ensure users get the latest version.

Can I host multiple static sites on one S3 bucket?

Technically yes, using prefixes (e.g., /site1/, /site2/), but its not recommended. Each site should have its own bucket for easier management, permissions, and DNS configuration.

What happens if my bucket name is already taken?

S3 bucket names are globally unique. If your desired name is taken, add a timestamp, your initials, or a random string (e.g., my-site-2024-john).

Conclusion

Hosting a static site on Amazon S3 is not just a technical taskits a strategic decision that aligns with modern web development principles: simplicity, scalability, and performance. By following the steps outlined in this guide, youve transformed a folder of HTML and JavaScript files into a globally accessible, secure, and high-performing websiteall without managing a single server.

The combination of S3s reliability, CloudFronts speed, and AWSs ecosystem makes this one of the most powerful hosting solutions available today. Whether youre a solo developer, a startup, or an enterprise, the cost-to-value ratio is unmatched. Youre no longer limited by shared hosting constraints or complex server configurations. Your website is now as resilient as AWSs infrastructure.

As you continue to build, consider automating deployments, implementing analytics, and optimizing for accessibility and SEO. The foundation youve built on S3 will scale effortlessly as your audience grows. And with minimal ongoing maintenance, youll have more time to focus on what matters: creating great content and experiences for your users.

Now that you know how to host a static site on S3, the only limit is your imagination.

alex