Host a Static Website on Amazon S3 for Free
If your experience creating and hosting websites comes from a hosted platform background such as 1and1, the Planet, RackSpace, or EC2, you may have trouble wrapping your mind around why the Amazon Simple Storage Service (S3) is so amazing, especially if you think all pages have to be rendered in Python, Ruby, or PHP.
What This Tutorial Will Teach You
This tutorial will teach you how to host a static website on Amazon S3 and how to connect a domain name so that your website URL points to static files on the Internet.
In this example, upload a website to static S3 resource, in preparation for connecting our domain name, (e.g. tonygaitatzis.com)
Six Reasons to Use Amazon S3
1) S3 can host a static web site or a Content Delivery Network (CDN).
A CDN for those who don’t know is a web host for static content such as JavaScript, CSS, fonts, images, and Flash. There’s no need for an HTML preprocessor, so you can dump these files from a CDN onto the user and leave them cached indefinitely, thereby dramatically decreasing load time and bandwidth when they are using your site.
2) S3 can be used to host the entire front-end of a website
With the plethora of REST APIs, micro services, and AJAX micro-interactions on the web, there’s no need to use a preprocessor to render an entire page anymore. A beautiful static site can be designed with ajax event hooks that connect all the functionality of an amazing website.
3) It can inspire you to create an event-driven, micro-interaction, micro-services based microsite.
Do yourself and your users a favor. Drop Wix, Squarespace, Drupal, or (uhhhhh) Wordpress. Make a real website that is a joy for your customers to use. Hand-craft the CSS and the Javascript to do exactly what it needs to do and no more. Slash down load times, increase user joy.
4) S3 has super speed and super high availability.
Really, you think you are going to beat S3 uptime and performance on a shared server or cloud resource running nginx or Amazon on your own? Even if you can, is it worth your time to maintain it?
I did this on my own site and went from a 113ms load time to an 2.74s load time to a 1.86s load time, increasing my load time by 32%!
5) You can actually automate this process
Because you can automate this, you can do very sophisticated stuff for a lot of clients very quickly. In fact, you could do what I did and create your own fully automated web hosting platform.
Two Reasons Not to Use Amazon S3
1) Amazon Web Services (AWS) is almost absurdly complex.
No, seriously, and it features a 1990s-style web uploader. This tutorial will get you started though.
2) S3 Hosting does not support SSL encryption
This may not be an issue for most people. The vast majority of websites can skate by without encryption. There are ways around this but they require more work with Amazon AWS.
Even in the case of purchases or custom private accounts management, the actual data exchange can be offloaded to a REST service or some other source of dynamic content that has encryption. The down-side is that end-users won’t see this encryption and may feel wary of using dynamic services on your site.
This tutorial will walk you through creating a web host using Amazon S3, setting it’s permissions to be viewed on the online, and connecting it to a domain name using Amazon Route 53.
Point your browser to http://aws.amazon.com and click My Account->AWS Management Console to log in, or Sign Up to create a new account for free.
Locate and click on the S3 option under Storage and Content
Clicking on S3 will bring you to the S3 Home Screen, which on first run will look like this:
Amazon refers to a repository or top level folder on S3 as a “bucket.” Each bucket name must be globally unique, so you can’t use the same name as anyone else on the system, even though you don’t know what other people name their buckets.
Click “Create Bucket” and a dialog will open that lets you type in the name of your bucket and the region where the server will be located.
Since we are deploying a website, the bucket name must be exactly the same as the domain we are using. In this example, I’m creating a website called tonygaitatzis.com, so that will be my bucket name. If I wanted to create just a static CDN called http://static.tonygaitatzis.com, I would name my bucket static.tonygaitatzis.com.
If later you want to automate GitHub deployment to S3, then you’ll want to select one of N. Virginia, Oregon, Ireland, or Tokyo for your region as those are the only regions supported by Lamda, amazon’s automation service.
Click “Create” to create the bucket, and you’ll see your new bucket listed.
Next let’s upload some website files. Click on the text of your new bucket and you’ll be brought inside.
Click “Upload” and a dialog will pop up. You will save yourself a lot of trouble by clicking “Enable Enhanced Uploader (BETA)” and enabling all the subsequent security settings to let Java to run.
With the Enhanced Uploader, you can upload entire folders to your bucket. Otherwise you have to manually create each folder in the bucket manually before uploading files to it.
Click “Add Files” and navigate to your files. Select the files you want to upload and click “Choose” to prepare them for uploading.
Click “Start Upload” to begin the upload. S3 uploads are a bit slow so be patient, especially if you have a large site.
When the upload is complete, you will see the files listed on the left.
The next step in this process is to ensure that the world can see your web content. You do this by enabling Static Website Hosting in the bucket properties. S3 will generate a domain name based on the bucket name and where it’s located.
Remember this hostname or how to find it. We will check it later.
Make sure you are at your bucket root folder by clicking on the name of your bucket, then click the “Properties” button to load the bucket properties.
Click “Static Web Hosting” from the list on the right to reveal the hosting options.
Click “Enable website hosting” to create a website from the bucket.
In here you should specify an index document as a default website file and optionally an error document in case of people trying to access files that don’t exist. In my case I have index.htm as my default website file and a 404.htm for these purposes
Click “Save” to save the changes.
This enables web hosting but does not give public access to the files. You still need to make all the website files public.
Select all the files in the bucket, click the “Actions” button and click “Make Public” in the drop down menu.
This will make your website files available to the world. Now you can go to the public url for this bucket to see if it worked.
In this example, the public url for this bucket is http://tonygaitatzis.com.s3-website-us-west-2.amazonaws.com
Remember that every time you upload content to your Amazon S3 bucket, you must select the files and make them public, or your website will no longer be accessible.
You’ll know something is wrong when you see this message instead of your web site:
The next step is to connect it to a domain name using Amazon Route 53 to connect a domain name to the amazon S3 bucket so we never have to look at this ugly URL again.