Hosting Your Production Company Website on Amazon S3: No Server Required

I’ve been testing out using Amazon S3 to host a static website and thought I’d share my experiences, as well as, provide a tutorial on how to do it yourself. Using S3 to host a website has many advantages compared with using the low-priced ($5/month) “unlimited” hosting services that are offered by many domain registrars like the terrible GoDaddy. The main advantages are:

Performance

Pages load faster than they would with a low-end hosting provider. There are no overloaded shared servers to slow things down.

Scalability

If there is a sudden rush of traffic to your site, you don’t have to worry about the site slowing down or pages failing to load.

Pay per use pricing

For most production or post production websites the monthly costs will be trivial.

In short, using S3 will give you best in class performance for a relatively small monthly fee. Not much of a trade off.

Best suited for:

  • Static webpages.
  • Tech saavy production companies.
  • Companies that want to use S3 or Amazons’ Cloudfront CDN to deliver video.

Not good for:

  • Database driven dynamic pages.
  • Sites driven by a CMS or Wordpress.
  • Pages that are regularly updated by non-technical folks.

If you are brave (and a bit nerdy), then follow these steps to get started.

Step 1 - Create an AWS Account

Go to aws.amazon.com and create and Amazon Web Services account. Once you’ve created your account, go into the management console and sign up for S3. S3 stand for Simple Storage Service. It’s a cloud service where you can store any amount of files for the low price of about $0.12 per GB per month. This is where you will upload the files for your website.

Step 2 - Create a Storage Bucket

Once you are in the S3 portion of the AWS Management Console, click "create bucket". This will bring up a dialogue box asking you to select a bucket name and region. A couple of quick pointers.

  • If you want to host your website using S3, then you need to make the bucket name match the domain name for your website. For example, if I want to host the website www.myproductioncompany.com on S3, then I must create a bucket called www.myproductioncompany.com.  See the S3 help files for more details.
  • Bucket names have to be unique across all of Amazon S3. This shouldn’t be a problem since it’s highly unlikely that someone else has a bucket with the same name as your website.
  • Region determines which of Amazon’s datacenters your files will be stored at. I would pick the one closest to you and your customers, but this choice isn’t really a big deal. I chose US Standard because it’s the cheapest and closest to me.
  • I didn’t bother with setting up logging. For tracking the website, I would use Google Analytics rather than digging into the details of the S3 logs for your bucket.

Step 3 - Configure Your Bucket as a Website

In the S3 management console, select the bucket you setup in the previous step and click the "actions" button as illustrated below. This will bring up the "properties" box at the bottom of the screen. Click the "website tab", and then click the "enabled" checkbox to allow S3 to host your static website.

Now enter the "default page" for your website (index.html). This is the first page that is displayed when visitors go to your website. You can also add an error document that will be shown when someone types in the address of a page that does not exist.

Note the endpoint, which will be used in one of the steps below.

4. Set the Bucket Permissions so that the Files are Publicly Readable

Click the "permissions tab" and then click the "add a bucket policy" button as shown below. This will bring up the policy editor.

Copy the following code and paste it into the policy editor (don’t worry, I'm the business guy and didn’t write it myself... It comes from Amazon's documentation).

{
  "Version": "2008-10-17",
  "Statement": [{
    "Sid": "PublicReadForGetBucketObjects",
    "Effect": "Allow",
    "Principal": {
      "AWS": "*"
    },
    "Action": ["s3:GetObject"],
    "Resource": ["arn:aws:s3:::example-bucket/*"]
  }]
}

You will need to make one change to the code, which is replace the words example-bucket with the name of your bucket (in this example, www.myproductioncompany.com). Make sure to leave the code before your bucket name and the /*” at the end. Click save to finish creating the policy.

Step 5 - Upload Your Files and Website Assets

You can either upload your files through the S3 management console or using an FTP client. I’m on a Mac and am used to Cyberduck, so I’ll focus on it in this tutorial. A good choice on a PC is CloudBerry.

To setup your FTP client to access S3 you will need to enter your Amazon Access Key ID and your Secret Access Key for your AWS account. If you didn’t note them when you signed up, they can be found on the “Security Credentials” section of your AWS account page. For more details on the credentials and where to enter them, here is a guide to getting started on AWS with Cyberduck.

Once you’ve entered your credentials into your FTP client, you can go ahead and upload your website files to the bucket you created in step 2. The folders within your bucket don’t have to be unique to all of Amazon S3, so I would keep your existing folder structure intact.

Make sure that you upload all your web pages, css, images, and other assets.

Step 6 - Test Your Website

On the website properties page of the S3 admin console (see step 3), the bottom section contains an endpoint address that takes the ugly form:

http://www.myproductioncompany.com.s3-website-us-east-1.amazonaws.com/index.html

Enter this name in your browser. This will bring up your site so that you can navigate around and make sure that everything works.

Step 7 - Configure Your Domain Name to Point to Your S3 Bucket

In order for people to see your website without entering the ugly address above, you will need to point your domain to this address by setting up a CNAME entry.

It’s not hard to do, but since most domain registrars have a different admin console, the fields you see might be slightly different than shown below. If this is the case, Google has instructions on how to setup a CNAME entry with a variety of popular hosts.

With GoDaddy, you need to:

  1. Login to your GoDaddy Account, navigate to the DNS manager, and select your domain name.
  2. Click Add New Record. The Add DNS Record window displays.
  3. From the Record type list, select CNAME (Alias).
  4. Complete the following fields: Enter an Alias Name — Enter the subdomain name for the alias assignment. In our example for the site www.myproductioncompany.com, you would want to type www. Points to Host Name — Enter the S3 endpoint from step 6. www.myproductioncompany.com.s3-website-us-east-1.amazonaws.com. TTL — Select how long the server should cache the information. Just leave the defaults.
  5. Click OK.
  6. Click Save Zone File, and then click OK. The new CNAME record displays in the CNAME (Alias) section.

Your CNAME record is now configured to point to your AWS bucket. Keep in mind that changes to DNS record settings may take up to 24 hours. If you have any problems with this step you can contact the company where you purchased your domain name for support.

Step 8 - Celebrate that Your Site Has Been Robustified

I’ve found the service blazing fast and great to use. Another benefit is scalability. No matter how much traffic your sight generates, it will always be able to keep up with demand.

Let me know if this tutorial was helpful or interesting and I can post more of them.