Hosting a Website on Amazon S3
Everyone knows that Amazon S3 is great for storing files. It's fast, inexpensive, and easy to setup. What you may not realize is that you can also host static websites on this robust platform.
Creating a Bucket
If you don't already have one, the first thing you'll need to do is sign up for an Amazon Web Services (AWS) account. It doesn't cost anything to sign up, but keep in mind you will need to pay for storage and transfer fees once you start putting objects on S3. (Don't worry, it's cheap!)
Once you create an account, you'll have access to the AWS Management Console.
This is where you'll go to create your first bucket. A bucket is similar to a folder on your hard drive, except it's in the cloud and it has virtually unlimited storage. There are a few things you need to know about buckets before creating one:
- Bucket names need to be unique across the entire S3 platform
- You can create a bucket in one of many supported regions around the world
- If you want to use a custom domain, your bucket name will need to be the same as your domain name
To create a bucket, navigate to S3 in the AWS Management Console and hit Create Bucket. You'll be prompted to enter a name and a region.
If you plan on using your own domain/subdomain, use that for your bucket name. For the region, pick the one closest to you and hit Create. With any luck, you'll see your new bucket appear in the console.
The only thing left to do is enable Static Website Hosting. Just select it from the panel on the right.
Make sure you set the Index Document to
index.html. You can also set an error page if you want. When you're done, hit Save.
Well, that was easy. Now let's upload the homepage!
Uploading Your First Page
One nice thing about the AWS Management Console is that you can upload files to your bucket right from your browser. Let's start by creating one called
index.html. This will be the contents of the homepage:
<!doctype html> <html> <head> <title>Hello, S3!</title> <meta name="description" content="My first S3 website"> <meta charset="utf-8"> </head> <body> <h1>My first S3 website</h1> <p>I can't believe it was that easy!</p> </body> </html>
To upload it, select your new bucket and hit Upload.
Once you've uploaded
index.html, it will appear in your bucket. However, you won't be able to see it in your browser yet because everything in S3 is private by default.
To make it public, right-click on
index.html and select Make Public. (Remember to do this for any other files you upload to your website!)
Now that your homepage is visible to the world, it's time to test everything out! Select
index.html in the console and go to the Properties tab.
Clicking the link will take you to your new homepage.
You'll notice that the address bar shows
s3.amazon.com. This is the default URL for objects stored on Amazon S3. Let's setup a custom domain and really turn this into a website.
Using Your Own Domain
If your bucket name is the same as your domain/subdomain name, you can point it to your new website by creating a CNAME record in your domain's DNS settings. It should look something like this:
Remember to replace
example.com with your own domain. After the DNS propagates (which could take up to 24 hours), you should be able to see your website by visiting the domain in a browser. If it doesn't show up, make sure your bucket name is exactly the same as your domain/subdomain and double check your DNS settings.
How to Edit Your S3 Website
Now that your website is up and running, you'll probably want to make changes to it. Alas, you can't install something like WordPress on Amazon S3. So how do you manage content?
Shameless plug: I recommend Surreal CMS. It links up to just about any site using FTP, SFTP, or Amazon S3 and it's dead simple to integrate. Take that homepage, for example. Let's make the entire thing editable:
<!doctype html> <html> <head> <title>Hello, S3!</title> <meta name="description" content="My first S3 website"> <meta charset="utf-8"> </head> <body> <div id="content" class="editable"> <h1>My first S3 website</h1> <p>I can't believe it was that easy!</p> </div> </body> </html>
Notice how I've wrapped the content in a
<div> and given it a class called
editable? That pretty much sums up the integration process. You can make just about any HTML element editable this way.
Setting Up Surreal
Adding Your Site
Start by creating an account. The first thing you'll see once you're in Surreal CMS is the sites page.
Select Add a New Site and you'll be taken to a form that asks for some information.
Enter your website's URL. Make sure you change the protocol to Amazon S3 and pick the correct region, otherwise Surreal won't be able to connect. You'll also need to enter your access key and secret key. If you don't have these handy, you can get them from the Security Credentials page in the AWS Management console. For added security, consider creating a separate access key just for this purpose.
Once you're finished, hit Submit and your site will appear in Surreal.
The next step is to enable your homepage for editing. Select your site and hit the Enable Pages button. A dialog will appear showing you the contents of your S3 bucket. Select
index.html and then hit Done.
Congrats, you're ready to start editing!
Remember how you added that
editable class to the homepage earlier? Well, you're about to see why. The glorious thing about Surreal is that you'll be editing your page inline, just like it appears in the wild. Select it from the list and you'll be taken straight to the Live Editor.
Of course, you can make any changes you want in the editor—all the usual options are available. When you're done, go to Save > Publish and Surreal will save it to Amazon S3 for you!
Surreal also has a bunch of other great features that you'll find useful. To name a few:
- Inline editing
- Responsive UI
- Photo gallery editor
- Google Analytics dashboard
- Scheduled publishing
- Change notifications
- White-label support
While it isn't free, you can signup for a free trial and get a full month to play around with it. I may be biased, but it's definitely worth checking out ;)
And there you have it. Now you know how to setup a website on Amazon S3 and edit it with minimal effort. If you have questions, leave them in the comments. If you enjoyed this tutorial, let me know!
About Cory LaViska
Cory LaViska is the founder of A Beautiful Site, LLC., a small development studio in Central Florida. He's responsible for things like Surreal CMS, DirtyMarkup, jQuery MiniColors, and PHP SimpleImage. Code with him on GitHub or follow him on Twitter, but whatever you do, always use a serial comma.