[How-to] Host a static website on a AWS S3 bucket

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 called Simple Storage Service (S3), a service that stores files in the cloud.

S3 is a low-cost service that offers excellent storage capacity. The advantages of using Amazon S3, besides the cost, is of having Amazon’s infrastructure in your project. Among the several possibilities in the way of 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 features of the site. Monitoring and continuously updating both 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 its 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 its users to store as many objects as you want, as well as 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 how to 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.

AWS S3 bucket
AWS S3 bucket

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 S3 bucket

The secondary domain, add the redirect.

AWS S3 bucket

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

AWS S3 bucket

Certificate Manager

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

AWS S3 bucket

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 www redirect will not work.

Route53 Target Alias
Route53 Target Alias

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

Isaac Adams-Hands

Full Stack Developer, Digital Marketer, and InfoSec enthusiast. He received his Bachelor’s Degree from the University of Western Sydney and his Business Diploma from Georgian College before joining various marketing positions in search portals, e-commerce, higher education, and addiction recovery services.

Follow @ twitter

Related posts

How to Verify SHA1 and SHA256 Checksum on Mac

It is incredibly easy to add a malicious components (malware) to DMG files,  uploading them to file sharing websites like sourceforge.net, & infecting computers on a mass scale.  SHA checksum is added to DMG files like TransmissionBT1, & Handbrake.fr2 to detect file tampering. How to check SHA checksums: In terminal, find the file(s) you’d like to… Read More

Backup VestaCP with Restic [Ubuntu]

Now that my VestaCP install is north of 100GB, backups are becoming more challenging. To achieve an extra level of security, I started backing up my server to S3 using Restic. Here are the steps I took to achieve this. 1. SSH into your box.ssh root@IP 2. Install Resticapt install restic *if you don’t have… Read More