Using Amazon S3 for Static Website Hosting: A Guide

If you want to host a static website but don’t know much about web development, Amazon S3 can handle the job. This guide walks through setting up a static website on S3, storing your files reliably without paying for traditional hosting.

First, let’s clear up some terminology. A static website uses HTML, CSS, and JavaScript to show content. There’s no server-side processing or database involved. Amazon S3 (Simple Storage Service) is a cloud storage solution from Amazon Web Services (AWS) that lets you store data as objects and files.

If you’re studying AWS, check out the AWS Learning Kit. It has 260 questions and answers plus 20 Mind Maps covering what you need to know.

Why use S3 for static hosting?

S3 works well for static sites for a few reasons. Hosting costs drop compared to traditional options. The service scales automatically, so you don’t worry about traffic spikes. S3 stores data across multiple locations, so your files stay safe even if something fails.

When does “static” make sense?

Static sites work best for simple pages with fixed content, like portfolios, product catalogs, or brochure sites. They load fast and need little maintenance.

WordPress and similar CMSs use dynamic content, so you can’t host a WordPress blog directly on S3. Some plugins can convert WordPress to static files, but you lose a lot of WordPress features that way.

JavaScript frameworks for static sites

Popular options include React, Vue.js, AngularJS, Ember.js, and Backbone.js. These frameworks help you build interactive sites using HTML, CSS, and JavaScript. Many developers use them to create fast, modern websites.

Getting started with S3

One thing to know upfront: you can’t use S3 Access Points with the same bucket you’re using to host a website.

Here’s what you need to do:

1. Create an AWS account and an S3 bucket for your files.
2. Upload your HTML, CSS, JavaScript, and media files to the bucket using the AWS Management Console or CLI.

Setting up static hosting via CLI

If you prefer the command line:

1. Make sure AWS CLI is installed and configured with your credentials.
2. Create a bucket:

   aws s3 mb s3://<static-website-bucket-name>
   

3. Upload your files:

   aws s3 sync <path/to/your/website> s3://<static-website-bucket-name> --acl public-read 
   

   This makes your files publicly readable.

4. Enable website hosting:

   aws s3 website s3://<static-website-bucket-name> --index-document index.html 
   

5. Optionally, set a custom error page:

   aws s3 website s3://<static-website-bucket-name> --error-document <your-custom-error-document>
   

6. Test your site at the endpoint:

   http://<static-website-bucket-name>.s3-website-<region>.amazonaws.com
   

   Replace the bucket name and region with your values.

7. To use your own domain, create a CNAME record in your DNS settings pointing to that endpoint.

Setting up via the AWS Console

1. Open the S3 console and create a new bucket.
2. Select your bucket and go to “Properties.”
3. Click “Static website hosting” and choose “Use this bucket to host a website.”
4. Set index.html as your default page.
5. Optionally, set a custom error document.
6. Upload your files using the “Upload” button.
7. Test at the endpoint shown in the console.

Sample bucket policy

Here’s what a bucket policy looks like for static hosting:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::aws-learning-kit.bitslovers.com/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2RJXE1ANT2AM1"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::aws-learning-kit.bitslovers.com/*"
        }
    ]
}

Configuring the index document

The index document serves as your site’s default landing page. In the S3 console, go to your bucket’s Properties, click “Static website hosting,” and enter “index.html” in the Index document field.

When someone visits your site, S3 looks for index.html in the bucket’s root and displays it. If you haven’t uploaded one yet, create a simple HTML file and upload it.

S3 also accepts index.htm and default.html, but index.html works best for compatibility.

Setting up a custom 404 page

1. Create an HTML file for your error page (like 404.html).
2. Upload it to your bucket.
3. In the S3 console, go to Properties > Static website hosting.
4. Enter your error document name in the Error document field.
5. Save your changes.

S3 returns your custom page when users hit missing URLs. You can also configure custom pages for 403 (Access Denied) or 500 (Internal Server Error) by creating separate HTML files.

Setting up URL redirects

Redirects come in handy when you’re moving pages or want users to land on the www version of your site.

To set up redirects:

1. Create a new S3 bucket with the domain you want to redirect from (e.g., example.com).
2. In the S3 console, go to Properties > Static website hosting.
3. Click “Edit” in the Redirection rules section.
4. Add your redirect rules in XML:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals>example.html</KeyPrefixEquals>
    </Condition>
    <Redirect>
      <Protocol>https</Protocol>
      <HostName>www.example.com</HostName>
      <ReplaceKeyPrefixWith>new-page.html</ReplaceKeyPrefixWith>
      <HttpRedirectCode>301</HttpRedirectCode>
    </Redirect>
  </RoutingRule>
</RoutingRules>

This redirects example.html to new-page.html on www.example.com using a 301 (permanent) redirect. S3 also supports JSON-based redirect configuration.

Changes may take a few hours to propagate due to DNS and browser caching. Test your redirect after some time has passed.

Connecting your domain

To use your own domain, you need to modify DNS records at your registrar. Create a CNAME record pointing to your S3 bucket endpoint. For root domains (example.com instead of www.example.com), you’ll need an A or AAAA record instead of a CNAME.

DNS changes can take up to 48 hours to propagate worldwide. Use a tool like MxToolbox to check your DNS settings.

DNS alternatives

You don’t have to use Route 53 for DNS. Any registrar works. You can use GoDaddy or Cloudflare. Just create the appropriate records pointing to your S3 bucket.

HTTPS and S3 static websites

S3 website endpoints don’t support HTTPS directly. You need to work around this.

The easiest path is using CloudFront, AWS’s CDN. CloudFront provides HTTPS for your S3-hosted site and speeds up content delivery globally.

Using CloudFront with S3

CloudFront is AWS’s content delivery network. It caches your content at edge locations worldwide, making your site faster for visitors everywhere.

To set it up:

1. Log into the AWS Management Console and open CloudFront.
2. Click “Create Distribution.”
3. Choose “Web” as the delivery method.
4. For the origin, select your S3 bucket.
5. Enter your domain name.
6. Choose an SSL certificate from AWS Certificate Manager (ACM).
7. Configure whether to redirect HTTP to HTTPS.
8. Set cache behavior options like TTLs if needed.
9. Create the distribution.

Using Cloudflare instead

Another option is using Cloudflare for DNS while keeping S3 for your files. This gives you free CDN and SSL without Route 53.

Cloudflare offers:

CDN - Caches images, videos, and stylesheets on global servers. This cuts load times for visitors anywhere.

Free SSL - Encrypts traffic between your site and visitors. Good for protecting login credentials and personal information.

DNS Management - Lets you manage domain records with features like load balancing, failover, and geolocation routing.

Security - DDoS protection, malware blocking, and a web application firewall (WAF) that guards against SQL injection and cross-site scripting.

Analytics - Real-time data on traffic, performance, and security threats.

For most small static sites, Cloudflare’s free tier covers everything you need.

Complete setup walkthrough

What you need beforehand

• An AWS account
• A domain name you control
• An SSL/TLS certificate (free via ACM if using Route 53 or Cloudflare)
• A text editor
• A browser

Step 1: Create an S3 bucket

1. Open the S3 console.
2. Click “Create bucket.”
3. Pick a unique name and a region close to your audience.
4. Keep default settings and create the bucket.

Step 2: Upload your files

1. Select your bucket in S3 console.
2. Click “Upload.”
3. Choose your website files.
4. Use defaults for other settings.
5. Complete the upload.

Step 3: Set bucket permissions

1. Go to your bucket’s Permissions tab.
2. Click “Bucket Policy.”
3. Add a policy like this (replace example.com with your domain):

{
  "RoutingRules": [
    {
      "Condition": {
        "KeyPrefixEquals": "example.html"
      },
      "Redirect": {
        "Protocol": "https",
        "HostName": "www.example.com",
        "ReplaceKeyPrefixWith": "new-page.html",
        "HttpRedirectCode": "301"
      }
    }
  ]
}

Step 4: Create a CloudFront distribution

1. Open CloudFront console.
2. Click “Create Distribution.”
3. Choose “Web” and click “Get Started.”
4. Select your S3 bucket as the origin.
5. Add your domain name.
6. Choose an SSL certificate.
7. Create the distribution.

Step 5: Update DNS

1. Go to your DNS provider (Route 53, GoDaddy, or Cloudflare).
2. Create a CNAME record pointing to your CloudFront distribution domain.
3. Wait for DNS to propagate.

Step 6: Test

1. Open your browser and visit your domain.
2. Verify the site loads and uses HTTPS.

Common questions

What are the main advantages of S3 static hosting? The biggest benefits are high availability and durability. S3 automatically replicates data across multiple availability zones, so your site stays online even during outages. Storage is essentially unlimited, and security features are solid.

What are the limitations? S3 works only for static content. It can’t run server-side code or serve dynamic content. If you need databases or dynamic pages, you’ll need a different solution.

How do you improve performance on S3-hosted sites? Use a CDN like CloudFront or Cloudflare to reduce latency. Compress images and files to cut load times. Set up caching headers to reduce repeat downloads.

What security steps should you take? Set bucket policies to control who can access your files. Use HTTPS via CloudFront for encrypted traffic. Enable versioning so you can recover from accidental deletions.

How do you monitor an S3-hosted site? CloudWatch gives you metrics on traffic and performance. CloudTrail logs API calls for security auditing. AWS Config tracks changes to your resources.

How do you handle backups and disaster recovery? Enable versioning to keep previous versions of files. Set up cross-region replication to copy data to another AWS region. You can also use third-party backup tools.

How do you migrate an existing site to S3? Upload files manually through the console or AWS CLI. Use sync commands for larger sites. Consider third-party migration tools that handle the heavy lifting. Plan the migration to minimize downtime.

Wrapping up

Hosting your static site on S3 cuts costs and removes the hassle of managing servers. Your files stay secure and accessible. Follow the steps in this guide, and you’ll have a working site up quickly.

For AWS study materials, the AWS Learning Kit covers what you need to know for certification exams.