$0.01 Websites with Amazon S3

Part 2 of the Complete AWS Boilerplate

This is the second tutorial in the series “The Complete AWS Boilerplate” for quickly building entire internet products on the Amazon Cloud.

Welcome back to The Complete AWS Boilerplate. Today we’re going to learn how to host websites on Amazon S3 for $0.01 a month (actually costs may rise up to $0.39/month per 1 million visitors). Let’s start off with a few concepts.

What is Amazon S3?

S3 stands for “Simple Storage Service”, which is essentially a cloud hard drive. You can put images, videos, text, and even code & websites. S3 is organized by “buckets” where we group and store files. You can have up to 100 buckets before needing to request additional buckets from Amazon.

Today we will only cover how to host websites on S3 so that you can show your friends and get motivated (seeing is believing). Begin by downloading this zip file here, and extracting it open. You should see the following contents:

These files represent the website we’re going to host on S3. Go to the AWS Console and search for S3 and click the first option.

Next click “Create Bucket” and you will see the below screen:

Something important to note here. We can give the bucket any random name, but if we want to host at a domain name (eg. https://www.mydomain.com) you will need to name your S3 bucket www.mydomain.com. In my case, I want to host my domain on https://learnaws.tech so I will call my bucket learnaws.tech. Click “Next” when you’re ready.

Notice how I did not include www in my domain name. This actually makes a difference, because now I cannot access my website at www.learnaws.tech. There are 2 ways to work around this. I can either make another S3 bucket with that name, or use AWS Route53 to re-route all requests to www.learnaws.tech to learnaws.tech. We will learn how to do this in a future tutorial.

The next screen is “Configure Options”. In a future advanced tutorial, we will go over all these options, but for now we will just add a tag use-case with value website-hosting. Remember that tagging is part of the good habits we want to build for a clean cloud. After adding a tag, click “Next”.

By default, AWS restricts public access at the bucket level, so no one can access the files on this S3 bucket even if we allowed them access through our object level ACL (Access Control List, don’t worry we explain ACL in a future article). Since we want this website to be publically available, we are going to uncheck all the default settings.

Click “Next” when you’re ready.

And “Create Bucket” to finalize everything.

Now we’re back at the S3 console. Click the bucket you just created and then click the “Upload” button at the top left hand corner.

Drop the files from the zip folder you download earlier and click “Upload”. You will see the below progress bar.

When the uploading is complete, you will see your uploaded files.

Click on the index.html file and it will take you to this screen:

Click the “Object URL” at the bottom and you will be taken to this “Access Denied” screen.

By default, AWS restricts public access at the object level, so we actually need to tell AWS to allow index.html to be seen from the internet. Go back to the S3 bucket and click the top left checkbox to select all objects in your S3 bucket.

Then click the “Actions” dropdown and select “Make Public”.

Now let’s try to view an image. Click on paw-favicon.png and view the Object URL. You should be able to see it now:

But if we try to view the index.html file, we will get a blank screen. Why can we view images but not the index.html?

In order to actually view the index.html file as a website, we will need to configure S3 to display it as a website. This is easy, just go back to the S3 bucket and click the “Properties” tab.

Now click the card “Static Website Hosting” and select “Use this bucket to host a website”. Fill in the “Index Document” field with index.html to tell your S3 bucket it should use index.html as the main website file.

Now copy the URL shown in “Endpoint” and click “Save”. If we open a new tab and paste the URL we just copied, we will see our hosted website alive!

http://learnaws.tech.s3-website-us-east-1.amazonaws.com

Congratulations! You just hosted your first website on S3. Go ahead and share this link with your friends and colleagues.

A Few Things to Note

So the S3 website hosting works, but there are a few limitations as you may have noticed:

• URL is long and ugly. How do we get a custom domain https://learnaws.tech instead of http://learnaws.tech.s3-website-us-east-1.amazonaws.com
• If we go to a specific route such as /about-us, we get a 403 Forbidden page.
• No HTTPS greenbar
• Potentially slow loading

Not to worry, we can use Amazon CloudFront on top of S3 to solve all these issues. Check the Table of Contents to see my CloudFront tutorial.

Review

Today we learned how to:

• Setup an S3 bucket with public access permissions
• Upload files into an S3 bucket with public access permissions
• Configure S3 to act as a website host

Here’s what we’re going to learn in the next few articles:

• Create a “CTO” account on IAM
• Setup further security with 2-factor authentication
• Host our website on CloudFront with a custom domain

See you in the next tutorial!