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 methods for deploying modern web applications. Whether youre 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 seamless infrastructure that requires no server management. Unlike traditional hosting solutions that demand ongoing maintenance, patching, and scaling, S3 eliminates these complexities by offering a fully managed, highly available storage service designed for static content.

The rise of static site generators like Jekyll, Hugo, Gatsby, and Next.js has made it easier than ever to create high-performance websites that dont rely on server-side rendering. These tools compile content into HTML, CSS, and JavaScript filesperfect candidates for S3 hosting. When paired with Amazon CloudFront (a content delivery network), you can achieve global low-latency delivery, automatic SSL encryption, and enhanced securityall while paying only for the storage and bandwidth you use.

In this comprehensive guide, youll learn exactly how to host a static site on S3from initial setup to optimization and troubleshooting. Well walk through each step in detail, share industry best practices, recommend essential tools, showcase real-world examples, and answer common questions. By the end, youll have the knowledge to deploy your own static site securely and efficiently on AWS, with confidence in its performance and scalability.

Step-by-Step Guide

Prerequisites

Before you begin hosting your static site on S3, ensure you have the following:

• An AWS account (free tier available)
• Basic familiarity with the AWS Management Console
• A static website ready for deployment (HTML, CSS, JS, images)
• A terminal or command-line interface (CLI) for using the AWS CLI (optional but recommended)

If you dont have an AWS account, visit aws.amazon.com/free to sign up. The AWS Free Tier includes 5 GB of S3 storage and 20,000 GET requests per month for the first 12 monthsplenty for most small to medium static sites.

Step 1: Prepare Your Static Website Files

Before uploading to S3, ensure your website is fully built and optimized. If youre using a static site generator like Hugo or Gatsby, run the build command to generate the final output folder.

For example:

• Hugo: hugo generates content in the public/ directory
• Gatsby: gatsby build creates files in the public/ directory
• React (Create React App): npm run build produces a build/ folder
• Plain HTML: Ensure all files (index.html, styles.css, scripts.js, images/) are organized in a single folder

Verify your site works locally by opening index.html in a browser. Check for broken links, missing assets, or JavaScript errors. A clean build is criticalS3 wont process or fix errors during upload.

Step 2: Create an S3 Bucket

Log in to the AWS S3 Console.

Click the Create bucket button. Youll be prompted to enter:

• Bucket name: Must be globally unique across all AWS accounts. Use lowercase letters, numbers, and hyphens. Example: my-website-2024
• Region: Choose the region closest to your primary audience for lower latency. For global audiences, consider pairing S3 with CloudFront later.

Leave all other settings at their defaults for now. Click Create bucket.

Step 3: Enable Static Website Hosting

After your bucket is created, select it from the list. Go to the Properties tab and scroll down to Static website hosting.

Click Edit, then select Enable.

Enter the following:

• Index document: index.html (this is the default page served when someone visits your domain)
• Error document: index.html (critical for SPAs using client-side routingthis ensures all routes fall back to index.html)

Click Save changes.

Once saved, AWS will display an endpoint URL under Static website hosting. It will look like:

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

Copy this URL. You can now test your site by pasting it into a browser. If you see your homepage, youre on the right track. If not, double-check your file structure and ensure index.html is in the root of your bucket.

Step 4: Upload Your Website Files

Go to the Overview tab of your bucket. Click Upload.

Select all files and folders from your built website directory (e.g., build/ or public/). You can drag and drop the entire folder.

Click Upload.

After upload, verify that all files are present. You should see index.html, styles.css, script.js, and any asset folders like assets/ or images/.

Step 5: Configure Bucket Permissions

By default, S3 buckets are private. To make your website publicly accessible, you must grant public read access.

Go to the Permissions tab. Under Block public access (bucket settings), click Edit.

Uncheck the box that says Block all public access. A warning will appearconfirm by typing I understand and clicking Save changes.

Next, add a bucket policy to explicitly allow public read access. Click Bucket policy and paste the following JSON:

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

Replace my-website-2024 with your actual bucket name. Click Save.

Your site is now publicly accessible via the S3 endpoint URL. Refresh your browser to confirm.

Step 6: (Optional) Use a Custom Domain

While the S3 endpoint works, its not professional for public-facing sites. 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:

• Go to the Route 53 console and select your domain.
• Create a new record set:
• Type: A
• Name: www (or leave blank for root domain)
• Value: Paste the S3 website endpoint (e.g., my-website-2024.s3-website-us-east-1.amazonaws.com)
• TTL: 300
• Save

Option B: Use S3 with External DNS (e.g., Cloudflare, GoDaddy)

If your domain is registered elsewhere:

• Log in to your domain registrars dashboard.
• Find DNS management settings.
• Create an A record pointing to the S3 endpoints IP addresses.

However, S3 website endpoints dont have fixed IPsthey use DNS names. Instead, use a CNAME record:

• Type: CNAME
• Name: www
• Value: my-website-2024.s3-website-us-east-1.amazonaws.com

Wait up to 48 hours for DNS propagation. Test using dig www.yourwebsite.com or online tools like dnschecker.org.

Step 7: Enable HTTPS with CloudFront (Recommended)

Amazon S3 website endpoints do not support HTTPS natively. To serve your site securely over HTTPS, you must use Amazon CloudFronta content delivery network (CDN) that sits in front of S3.

Go to the CloudFront Console and click Create distribution.

Under Origin domain, paste your S3 website endpoint (not the bucket ARN or REST endpoint). For example:

my-website-2024.s3-website-us-east-1.amazonaws.com

Leave other settings as default for now. Under Viewer Protocol Policy, select Redirect HTTP to HTTPS.

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

Under SSL certificate, select Request a certificate with ACM if you havent already. Follow the prompts to validate your domain via DNS or email.

Once the certificate is issued (may take a few minutes), select it and click Create distribution.

After deployment (515 minutes), your site will be available at:

https://www.yourwebsite.com

And CloudFront will cache your content globally, improving load times and reducing S3 request costs.

Step 8: Automate Deployments with CI/CD (Optional but Recommended)

Manually uploading files is fine for one-off sites. For frequent updates, automate deployment using GitHub Actions, AWS CodePipeline, or similar tools.

Heres a simple GitHub Actions workflow for a Gatsby site:

name: Deploy to S3
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
run: npm ci
- name: Build site
run: npm run build
- name: Upload to S3
uses: jakejarvis/s3-sync-action@v0.6.0
with:
args: --acl public-read --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: us-east-1
SOURCE_DIR: public/

Store your AWS credentials as secrets in your GitHub repository settings. Every push to main will rebuild and redeploy your site automatically.

Best Practices

Use Versioned File Names for Cache Busting

Browser caching is powerful but can cause issues when you update your site. To ensure users receive the latest assets, append hashes to filenames:

• main.1a2b3c.css instead of main.css
• app.d4e5f6.js instead of app.js

Static site generators like Gatsby and Next.js do this automatically. If youre using plain HTML, use build tools like Webpack or Vite to handle asset fingerprinting.

Set Correct MIME Types

Incorrect MIME types can break CSS, JavaScript, or fonts. S3 defaults to application/octet-stream for unknown extensions. Manually set MIME types during upload or use a tool that does it automatically.

For example:

• .css ? text/css
• .js ? application/javascript
• .json ? application/json
• .woff ? font/woff
• .woff2 ? font/woff2
• .svg ? image/svg+xml

In the S3 console, select a file ? Properties ? Metadata ? Add key-value pairs.

Enable Compression with CloudFront

Enable Gzip or Brotli compression in CloudFront to reduce file sizes and improve load times:

• In CloudFront distribution settings, go to Behaviors
• Edit your behavior ? Compress objects automatically ? Set to Yes

CloudFront will automatically compress files like HTML, CSS, and JS when requested by compatible browsers.

Use Object Lifecycle Policies

If youre storing logs, backups, or temporary files in your bucket, set lifecycle rules to automatically delete them after a period (e.g., 30 days). This keeps costs low and reduces clutter.

Monitor with CloudWatch

Enable S3 access logging and CloudWatch metrics to track:

• Number of requests
• Latency
• 4xx/5xx errors
• Bandwidth usage

Set up alarms for unexpected traffic spikes or high error rates.

Secure Your Bucket

Even with public read access, avoid granting unnecessary permissions:

• Never grant s3:PutObject or s3:DeleteObject to the public
• Use IAM policies for deployment tools instead of access keys in code
• Enable MFA delete if youre storing critical data

Optimize Images and Assets

Large images are the

1 cause of slow static sites. Use tools like:

• ImageOptim (macOS)
• ShortPixel or TinyPNG (online)
• Sharp or ImageMagick (CLI)

Convert images to modern formats like WebP or AVIF for up to 50% smaller file sizes without quality loss.

Implement Caching Headers

Set Cache-Control headers on your S3 objects:

• HTML files: Cache-Control: no-cache
• CSS/JS: Cache-Control: max-age=31536000 (1 year)
• Images: Cache-Control: max-age=31536000

This ensures browsers cache static assets aggressively while still checking for HTML updates.

Tools and Resources

Static Site Generators

• Hugo Fastest static site generator, written in Go
• Gatsby React-based, ideal for content-heavy sites with GraphQL
• Next.js Hybrid static and server-rendered, excellent for SEO
• Jekyll Ruby-based, popular for GitHub Pages
• Eleventy (11ty) Simple, flexible, zero-config

Deployment Tools

• AWS CLI aws s3 sync for local deployments
• GitHub Actions Free CI/CD for public repos
• Netlify or Vercel Alternative platforms with simpler UIs
Deployer PHP-based deployment script (for advanced users)

Performance and SEO Tools

• Google PageSpeed Insights Analyze performance and SEO
• Lighthouse Built into Chrome DevTools
• GTmetrix Detailed waterfall analysis
• Web.dev Googles modern web performance guide
• SSL Labs Test your HTTPS configuration

Design and Asset Tools

• Figma UI/UX design
• Unsplash Free high-res images
• Font Awesome Icon library
• Google Fonts Free web fonts
• Canva Easy graphics creation

Learning Resources

• AWS S3 Static Website Hosting Documentation
• Amazon CloudFront Overview
• Gatsby S3 Deployment Guide
• Why S3 is Ideal for Static Sites

Real Examples

Example 1: Personal Portfolio with Gatsby

A developer built a portfolio using Gatsby, optimized for speed and SEO. The site includes:

• Markdown-based blog posts
• Interactive project showcase with animations
• Custom domain: www.johndoe.dev

They deployed using GitHub Actions, which automatically rebuilds and uploads the site on every git push. CloudFront handles caching and HTTPS. PageSpeed score: 98/100. Monthly cost: under $0.50.

Example 2: Open-Source Documentation with Hugo

A team maintains documentation for a developer tool using Hugo. The site includes:

• API reference pages
• Code snippets with syntax highlighting
• Search functionality via Algolia

They use S3 + CloudFront with a custom domain. All assets are compressed and cached for 1 year. They added a robots.txt and sitemap.xml for better indexing. Google Search Console shows 99% coverage.

Example 3: Marketing Landing Page with Plain HTML

A startup created a single-page landing page to promote a SaaS product. The site contains:

• Hero section with video background
• Testimonials
• CTA form

They used plain HTML/CSS/JS, optimized all images to WebP, and deployed via AWS CLI. They added a 301 redirect from http:// to https:// using CloudFront. Conversion rate increased by 22% after switching from a slow shared host.

Example 4: Static Blog with Eleventy and Netlify

While this example uses Netlify, the same principles apply to S3. The author writes posts in Markdown, uses Eleventy to build, and deploys via Git. The site loads in under 0.8 seconds globally. They use Cloudflare as a CDN and have achieved a 100/100 Lighthouse score.

This demonstrates that the architecturenot the platformis what matters. S3 can replicate any of these outcomes with slightly more configuration.

FAQs

Can I host a dynamic website on S3?

No. S3 only serves static filesHTML, CSS, JS, images, etc. If you need server-side logic (e.g., user authentication, databases, form processing), youll need to pair S3 with AWS Lambda, API Gateway, or a serverless backend. For full dynamic sites, consider AWS Amplify, EC2, or a PaaS like Heroku.

Is hosting on S3 secure?

Yes, when configured correctly. S3 provides enterprise-grade security features including encryption at rest, access control, and integration with AWS Shield for DDoS protection. Always use HTTPS via CloudFront, avoid public write permissions, and regularly audit bucket policies.

How much does it cost to host a static site on S3?

Extremely low. For a typical site with 10,000 monthly visitors:

• S3 storage: ~50 MB ? $0.0023/month
• Requests: 20,000 GET ? $0.00005/month
• Bandwidth: 5 GB ? $0.45/month
• CloudFront: ~$0.085/GB ? $0.43/month

Total: under $1/month. Even with higher traffic, costs rarely exceed $5$10/month.

Why use CloudFront instead of just S3?

S3 website endpoints dont support HTTPS natively, lack global caching, and have limited performance optimization. CloudFront provides:

• HTTPS with ACM certificates
• Global edge locations for faster delivery
• Automatic compression
• DDoS protection
• Custom error pages

CloudFront is the industry standard for production static sites on AWS.

Can I use S3 to host multiple websites?

Yes. Each website needs its own S3 bucket and CloudFront distribution. You can use different subdomains (e.g., blog.yourcompany.com, docs.yourcompany.com) with separate buckets and DNS records.

What happens if I delete my S3 bucket?

All files, including your website, are permanently deleted. Always back up your build folder locally or in version control. Enable versioning on your bucket if you want to recover accidentally deleted files.

Does S3 support server-side includes or PHP?

No. S3 is a static object store. It cannot execute server-side code. If you need dynamic includes, use a static site generator that supports partials (like Jekyll or Eleventy) to render them at build time.

How do I fix Access Denied errors?

Common causes:

• Bucket policy missing or incorrect
• Block public access is still enabled
• File permissions are not public
• Wrong index document name

Double-check each setting. Use the AWS Policy Simulator to test permissions.

Can I use S3 with a CMS like WordPress?

Not directly. WordPress is dynamic and requires a database and PHP server. However, you can use headless CMS solutions (e.g., Contentful, Sanity) with static site generators to pull content and build static sites hosted on S3.

Is S3 better than GitHub Pages or Netlify?

Each has trade-offs:

• GitHub Pages: Free, easy, but limited to 100GB bandwidth/month and no custom CloudFront features
• Netlify/Vercel: Simpler UI, built-in CI/CD, free tier, but less control over infrastructure
• S3 + CloudFront: More control, lower cost at scale, fully customizable, but requires more setup

S3 is ideal for teams who want full ownership, cost efficiency, and integration with other AWS services.

Conclusion

Hosting a static site on Amazon S3 is not just a technical choiceits a strategic advantage. By eliminating servers, reducing costs, and leveraging AWSs global infrastructure, you gain speed, reliability, and scalability without the operational overhead. Whether youre a solo developer building a portfolio or an enterprise deploying marketing campaigns, S3 provides a foundation that grows with your needs.

The processthough initially detailedis straightforward once broken down: prepare your files, create a bucket, enable static hosting, configure permissions, upload content, secure it with HTTPS via CloudFront, and optionally automate deployments. With best practices like caching, compression, and asset optimization, your site will perform better than most traditional hosting setups.

As static site generation continues to evolve, and as developers prioritize performance, security, and cost-efficiency, S3 remains one of the most powerful and underutilized tools in the modern web stack. You no longer need expensive servers or complex deployments to launch a professional website. With a few clicks and a well-structured build, your site can be live globally in minutes.

Start small. Test your setup. Iterate. Then scale. The future of web hosting is staticand its sitting right in your AWS console.