How To Set Up and Host A Publicly-Accessible File on Amazon S3 (Simple Storage Service)

Published
February 8, 2008
by
Chris Coyier

One of the many good suggestions I got for hosting these video files was to use the Amazon S3 (Simple Storage Service). I had heard about this before, but didn't know much about it. Nothing like trial by fire to figure something out quickly...

Step 1: Sign up for Amazon Web Services

Simple enough. Go here to do this. There are other different web services Amazon offers. The one we are using here is the Simple Storage Service). You will get a chance to see the rates on this page, but just for kicks, here they are:

Requests
$0.01 per 1,000 PUT or LIST requests
$0.01 per 10,000 GET and all other requests*

That basically reads: "Super cheap bandwidth for sale!"

Get your Access Key ID and Secret Access Key

Click the little yellow dropdown graphic and select AWS Access Identifiers. You will see a graphic like this. Click the show button to show your secret access key.

This is basically your "User Name" and "Password" for logging into this service. One of the weird things about this is that Amazon provides no way to access this service themselves. Nor do they provide any information on third party tools in which to use, at least that I could find.

Download a Third Party Tool

The best way I've found is to use Transmit from Panic. It is their flagship FTP tool, which it's great for, and it offers Amazon S3 as one of the regular server types so it's super easy to use for this.

If you aren't on a mac, there are other tools to connect to Amazon S3. The first tool I tried was actually Bucket Explorer and also did a fine job, just wasn't quite as nice as using my already loved Transmit.

Connect, and Create a Bucket

Once you get connected, you'll need to create a bucket (basically just a directory, to keep you organized) in which to upload your file. Buckets are "globally unique" meaning that the name of your bucket cannot be the same as anyone elses in the world. So if you want your bucket to be called "images", too bad =) -- try something like the name of your website or your last name.

Upload your file(s)

This should be a pretty easy thing to do no matter what tool you are using. In the case of transmit, just double click your new bucket open and then drag files either directly from the finder or from the left-hand navigational pane into the right area.

Making the files public

Now that your file is uploaded, you need to do this step to make it actually publicly accessible. Since I was using this to embed video on a web page, this was a must. I forgot to do this once, and the video just didn't work. Took me a few minutes of head scratching to realize I forgot to make it publicly accessible.

In the case of Transmit, right click on the file and go to "Get Info".

This is where you need to change the Permissions for the Read setting to World. Now your file should be link-able. But what is the URL for that file?

Getting the URL for your hosted file

Again, in the case of Transmit, this is really easy. Just right click the file and go to "Copy Path".

Or, you can just create the URL yourself. It's very easy to figure out:

http://s3.amazonaws.com/YOUR-BUCKET-NAME/YOUR-FILE-NAME

Embed your video

If you are using this to host video like I am, now you can link directly to this file from your embed code.

One of the little scary things about doing it this way is you are exposing that link for all to see. In case someone was out there trying to poach your content, they could link directly to this and use your bandwidth. I guess you'll have to monitor your Amazon S3 statistics to see that. Hopefully they can show you that kind of information, I haven't dug into this that far yet.

Good luck!

Share On

Comments

I personally use S3Safe for uploading files to S3 while on a PC. You can find out a tiny bit more about it here. Technically, this is just the ‘trial’ version, but after contacting the company we’ve learned that there currently is no for-pay version, so it’s all the same version for now.

I would also point out that there’s another valid way of formatting the S3 URL:

How can I allow my rest of the team to login into bucket and they can upload files there, and get embed url? I want to make it limited to my team mates. As they also upload thousands of photos.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.