As you may already know, Amazon offers the best cloud services through an initiative called Amazon Web Services (or simply Amazon AWS). Among the available services are some that, when combined, allow the hosting of websites to be effortless and with a relatively low (and scalable) cost. One such service is Simple Storage Service (S3), a service that stores files in the cloud.

S3 is a low-cost service that offers excellent storage capacity. The advantage of using Amazon S3, besides the cost, is having Amazon’s infrastructure in your project. Among the several possibilities in using the services, we can mention the possibility of hosting a static website with an AWS S3 bucket. What is a static website? In short, it’s a website made up of only HTML, CSS, and JavaScript. Static webpages are those pages that do not rely on backend languages and a database, which means that server-side scripts are not supported, so if you want to host a Rails or PHP application, you need to look elsewhere.

Hosting a website traditionally uses a dedicated, shared physical or virtual server and some software that will serve the site’s features. Monitoring and continuously updating hardware and Software are not simple tasks, not to mention the risk of unavailability. The chance of losing a file or even the whole website is a risk that no one can afford; that is when AWS S3 Buckets comes in handy. On AWS servers, the risk of losing a file is virtually zero, and it is way more secure than saving data into a conventional data system such as flash drives, hard drives, or any other alternative media.

AWS S3 buckets have redundancy in their storage system. In other words, it replicates each file stored in a bucket on several different servers. So, in addition to having a copy of your data in many different servers, you also have its redundancy increased by replicating it in other regions, countries, and continents.

“AWS s3 stores data as objects within resources called “buckets.” These buckets allow users to store as many objects as they want and save, read, and delete objects. “

But using S3 can go far beyond a simple object storage service. We can use it for hosting static websites and using AWS S3 for this purpose; it is possible to obtain several advantages that would not exist or would be way more challenging to perform in the traditional model of web hosting, such as:

  • Very high availability (99.99% uptime)
  • Scalability
  • Possibility of integration with CloudFront for certificates and caching
  • Access control (access authorization by ips, for example)
  • Object redirect rules
  • Replication across regions (for latency reduction)
  • File Versioning

The following tutorial aims to explain quickly and briefly host a static website on an AWS S3 Bucket.

Hosting a static website on a AWS S3 bucket

Sign up for Amazon AWS if you haven’t already.

In Route53, create a new hosted zone. Add the name server settings to your domain registrar. Then be prepared to wait; this can take a while to propagate.

Name server values
Name server values
Custom DNS - Enter Name server values
Custom DNS – Enter Name server values

S3 Buckets

In S3, create two buckets, example.com + www.example.com.

In your primary domain, select Static website hosting >> Use this bucket to host a website. Fill in the necessary document details.

AWS - Static website hosting

In the secondary domain, add the redirect.

bucket redirect

Remember to turn to block off, or no one will be able to access your website.

public access

Certificate Manager

In Certificate Manager, add your domain name. Verify you own the domain through Route53 using DNS verification.

certificate manager

Remember to use example.com + www.example.com (or *.example.com, which is a wildcard SSL)

Wait until it is valid.

CloudFront

In CloudFront, create a new Distribution.

Add your Origin Domain Name: example.com.s3.amazonaws.com (it will auto-fill as you start typing)

Add your URL name to Alternate Domain Names (CNAMEs): example.com; if you don’t, CloudFront DNS won’t be selectable in Route53.

Select your Custom SSL Certificate (example.com): example.com (f3d1b334d-66fc-4b0c-87c9-74f33729dde8)

Add the Default Root Object: index.html (example)

Create distribution.

Route53

Select the proper target alias in your settings:

If you select the S3 version, SSL won’t work; you need to select the CloudFront option.

Both example.com + www.example.com need to be A-records, pointed to the Alias bucket/CloudFront distribution, or the redirect will not work.

alias target

Last step: Check your website URL to make sure it works.