How To Host Static Site using AWS S3 - Tutorial

Posted by Marco Pineda on January 8, 2017

AWS is the uncontested IAAS provider. Sure, there are other services like Azure, Google Cloud and VMware but none come close to matching Amazon's suite of services. I've studying up to take the AWS Certified Cloud Architect - Associate exam ( shout out to Sam Kroonenburg and acloud.guru for an awesome course! ) and today I've learned how to host a static site using AWS S3. Tonight, I will pass on this knowledge on to you.

This tutorial assumes you have an AWS account (if not, create a free one, super easy) and that you know basic HTML. Before we get into the tutorial, let's review why hosting on S3 is so wonderful. Skip this if you want to get to the tutorial.

Why S3?

Several benefits to using S3 to host static websites. For example if you were hosting some big event and needed a landing page, S3 would be the place to do it. Below is a list of pros and cons to using S3.

Pros

  • Simple
  • Scales Automatically
  • Serverless
  • Don't have to worry about load balancing

Cons

  • Static content only
  • Can't do something server-side

Let me reiterate that S3 is only for static content. This means no Dot Net, PHP etc. S3 is ideal for landing pages.

AWS S3 Image S3. S3 is property of Amazon.

Le Grand Tutorial

Alright, you've made it this far. Great! Let's get to it. This tutorial assumes you've already made a free AWS account. Go ahead and log in.

Step 1

Once you're logged in to AWS Management Console, navigate to Services and Click on S3.

AWS S3 Image

Step 2

Once in S3, go ahead and create a new bucket. Name the bucket, leave everything as default and click NEXT.

AWS S3 Bucket Image

Step 3

Click the bucket, go into properties and select "STATIC WEBSITE HOSTING", then choose "Use this bucket to host a website". Make the landing page "index.html" and the error page "error.html"

AWS Static Site Hosting Image

Step 4

Create an index.html page and error.html page in your favorite code editor. I'm using Atom.

Atom Code Editor

Step 5

Go back to S3 Bucket and go ahead and upload the files. Go ahead and hit next.

Upload AWS S3 Image

Step 6

Go into your bucket, go to Permissions, Click on Everyone then tick the box that says Read to make your site public so Everyone can Read and see your site.

Permissions AWS S3 Image

Step 7

Go into properties, go to static site hosting and click on the AWS endpoint to take you to your newly hosted static site!

Hope you enjoyed this tutorial, if you have any questions, feel free to tweet at me: @marcoapineda13