Host a Static Site on AWS S3

If your site is static, like a one pager or a simple site that only requires HTML, CSS, and JavaScript, you can host it on Amazon Web Services S3 at a very low cost. S3 is typically used for storage purposes, but you can run a full blown static site just as easily. This blog is running on S3. Let me show you step-by-step how you can do that.

AWS Account

The first thing you need is an AWS account. If you don’t have one, head over to AWS and create an account.

Log on to your AWS Account and select the S3 Service under Storage & Content Delivery in the AWS Dashboard:

Create Buckets

Buckets are containers to store objects (files and folders). You need to create two buckets: one for the root domain of your site and one for the www subdomain. Give buckets the same name as your domain, like so:

Bucket for root domain: yourdomain.com
Bucket for www domain: www.yourdomain.com

The default permissions on a new bucket are such that only the owner has access, no one else.

Redirect

You need to redirect traffic from yourdomain.com to www.domain.com. You could do it the other way around if you want to, but in this example we’ll stick to redirecting from the root domain to www. Follow these steps:

Select the bucket yourdomain.com
Select the Properties button
Expand the Static Website Hosting section
Select the option titled Redirect all requests to another host name
Redirect all requests to: www.yourdomain.com
Select Save button

Enable Website Hosting

Now you need to enable website hosting for the www.yourdomain.com bucket. The steps are similar to the previous ones:

Select the bucket www.yourdomain.com
Select the Properties button
Expand the Static Website Hosting section
Select the option titled Enable website hosting
In the box titled Index document enter index.html
Select Save button

Permissions

Let’s allow Read-Only access to the www.yourdomain.com bucket:

Select the bucket www.yourdomain.com
Select the Properties button
Expand the Permissions section
Select the Add bucket policy button
Enter the following policy (be sure to replace yourdomain.com with your actual domain):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.yourdomain.com/*"
        }
    ]
}

This gives anyone the permission to “get objects” from the www.yourdomain.com bucket, including any of its folders.

Upload

While you’re still in the www.yourdomain.com bucket, you can upload your index.html file (and all your site files):

Select Upload button
Follow instructions on the Upload screen

At this point your site should be accessible through the default endpoint URL: http://bucket-name.s3-website-AWS-region.amazonaws.com

For example:

http://yourdomain.com.s3-website-us-west-2.amazonaws.com

or

http://www.yourdomain.com.s3-website-us-west-2.amazonaws.com

Using Your Own Domain

To use your own domain, you need to set up your DNS records. For this, we’ll use the Route 53 service, so go back to the dashboard and select the Route 53 icon under Networking.

Follow these steps:

Select Hosted zones
Select Create Hosted Zone button
Domain Name: yourdomain.com
Type: Public Hosted Zone
Select Create button

Create an A record for yourdomain.com:

Select Create Record Set button
Name: nothing (leave it blank)
Type: A-IPv4 address
Alias: Yes
Alias Target: yourdomain.com (under – S3 website endpoints –)
Routing Policy: Simple
Evaluate Target Health: No
Select Save Record Set button

Now create an A record for www.domain.com:

Select Create Record Set button
Name: www
Type: A-IPv4 address
Alias: Yes
Alias Target: www.yourdomain.com (under – S3 website endpoints –)
Routing Policy: Simple
Evaluate Target Health: No
Select Save Record Set button

Update DNS Servers on Your Domain Provider

You’ll notice that you have an NS record that was created by default when you created the hosted zone. This NS record has four DNS servers. These are the DNS servers you need to enter in your domain provider records to direct your domain’s traffic to AWS. So, head over to your domain provider, log on to your account and update your DNS servers there.

You’re done. It’s just a waiting game now. Once propagation has completed throughout the world’s DNS servers, traffic will be properly directed to S3 and your site will be accessible via your own domain.

For more information on hosting a static site on S3, check out the AWS Docs.

Cheers!

Blog