In an attempt to reduce debt and move some sites off my virtual server so I can close it down, I’ve decided to relocate the static websites over to Amazon S3.

This post outlines how to do so, without the need of signing up for Amazon Cloudfront as well. Every example tutorial I found on it online talks about Route 53 and setting up Cloudfront. Cloudfront is nice, but I don’t really need CDN-like capabilities across 5 different data-centers for what I’m hosting. The CDN speed also isn’t crucial for me.

Instead of discussing Route 53, I’m using DNSMadeEasy.com as my DNS server. Yes, there’s an affiliate link hidden there. Sorry! :)

I have been using this service for a couple of years now with no issue. I’ve always preferred to make sure that my DNS server was at a different location than my virtual server / hosting. If I had to pick up and leave my hosting, it’s as simple as redirecting elsewhere.

Just like I did recently with pointing web-rat.com to ghost.org.

Amazon S3 Setup Instructions

So, back to the topic at hand, relocating my static websites to S3. You basically log into your S3 accounts and at the topmost level, you’ll want to create two buckets.

• example.com
  
• www.example.com
  
  

ProTip: Replace example.com with your real domain.

Now, still at at the top level of your S3 account, click on example.com and at the top right (1), you should click properties which will expand it as seen:

Click on the «Edit Bucket Policy» (2) button and the following modal will pop up:

You’ll want to paste the following:

Again, please change out example.com with your actual domain. Click «Save» on the modal and we’re ready to proceed onto the next step.

Static Website Hosting Panel

If you refer back to the first screenshot above, you’ll note that one of the properties of this bucket is «Static Website Hosting.» Go ahead and click that header and the panel will open.

This part is pretty straightforward, just enable website hosting and choose your default document index. Mine, for example, is index.html.

Please note/copy the domain listed beside «Endpoint:» – You’ll need that in your DNS portion of this write-up below.

Planning your domain

So, the above was done for example.com, but www.example.com isn’t the same as example.com. Most «www» Sub-Domain/CNAMES are pointed at example.com. If yours isn’t, you really need to figure out what you’re doing DNS wise or perhaps you generally like screwing with people (or you know what you’re doing).

I’m of the opinion that I should be able to go to your domain without the www typed in the browser and still see your homepage.

So, at this point, I’m comfortable with making my www.example.com forward directly to example.com. As a sidenote, it vexes me that I have to make an empty bucket in S3 to pull this off. I’ve tried without doing this and Amazon S3 throws an error.

Back to Amazon S3 to create an empty bucket (insert grumbles)

If you’re forwarding like me, you’ll want to follow this step. You don’t need to setup a policy on the www.example.com bucket. Just click on it, click Properties on the top right corner like you did above and then click on Static Website Hosting. Then click on the option that says «Redirect all requests to another host name» and fill in the «Redirect all requests to:» example.com.

Don’t forget to click «Save» before doing anything else.

Now, the DNS stuff

As mentioned above, I use DNSMadeEasy.com. You’re free to figure out your own DNS server option or find another one online (Example: Amazon Route 53 is an option).

Log into the DNSMadeEasy Control Panel. Click on your domain that you’re moving to S3. DNSMadeEasy has a brand new ANAME feature.

Click on the + underneath the ANAME block and you should see this panel:

For example.com (note the lack of www.) you’ll want to leave the «Name» field empty. The FQDN or IP area will default to an (empty field).example.com – We don’t want this.

We want the S3 Endpoint that is linked in the Static Website Hosting portion of your S3 Bucket noted above.

In order for the (empty field).example.com to go away, we want to paste in that S3 Endpoint.

It should look something like this:
*example.com.s3-website-us-east-1.amazonaws.com.*

Note the pesky period at the very end. That’s correct. If you did this step correctly, (empty field).example.com will go away. This now means that example.com will now point directly at the FQDN (Fully Qualified Domain Name) without issues.

Setting up www.example.com is just as simple as repeating the steps above again, except that this time, you’re going to fill in the «Name» field with www.

Your S3 Endpoint for the FQDN should read:
*www.example.com.s3-website-us-east-1.amazonaws.com.*

ProTip: Again, note the period. It’s really really important not to forget that trailing period.

Wrap up

So, this wraps up this blog post on how to have Amazon S3 host the static webpages that you have for particular domains. Why in the world would I ever have a static website these days? Majority of them are placeholders for the many many projects I have laying around and haven’t had time to launch. Another is a legacy static website that I have for my Mother-in-Law’s bakery.

This took about 30 minutes overall to get up and running and DNS changes were almost immediate. Especially if you lower the TTL to 80 and then later bump it back to a higher number when you’re done.

A S3 gotcha!

I should note that I forgot to mention that when you upload a .css file, you should go to the css file in S3 and make sure the content type is set to «text/css» otherwise when you look at your website, the css won’t be properly rendered. Not sure why Amazon S3 can’t properly set this. Thought I should mention it.