Hosting a Website on Amazon S3

By  on  

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.

What is a static website? In short, it's a website comprised of only HTML, CSS, and/or JavaScript. That means server-side scripts aren't supported, so if you want to host a Rails or PHP app, you'll need to look elsewhere. For simpler purposes, welcome to the wonderful world of hosting websites on S3!

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.

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.

Creating a bucket in the AWS console

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.

Viewing your bucket in the AWS console

The only thing left to do is enable Static Website Hosting. Just select it from the panel on the right.

Static Website Hosting settings in the AWS console

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.

Uploading a file in the AWS console

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.

Getting the link to your file in the AWS console

Clicking the link will take you to your new homepage.

Homepage Preview

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:

Domain: example.com
Type: CNAME
Target: s3.amazonaws.com.

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.

Surreal CMS sites page

Select Add a New Site and you'll be taken to a form that asks for some information.

Adding a site in Surreal CMS

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.

Enabling Pages

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!

Editing Pages

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.

The Live Editor in Surreal CMS

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!

Extras

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!

Cory LaViska

About Cory LaViska

Cory LaViska is the founder of A Beautiful Site, LLC, a small development studio in New Hampshire. He’s responsible for Shoelace and Surreal CMS, as well as a handful of open source projects on GitHub.

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Get Slick with MooTools Kwicks

    When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such...

Discussion

  1. Laurent

    The good thing is that you can plug Amazon Cloudfront to your S3 bucket and get a very fast delivery.

    BTW, you can also host websites on Rackspace CDN, but it is a push CDN, a bit tricky to set up.

  2. Hi,

    Amazon S3 Website is the best choice to how your website. The blogs is simple, clear and step to step.
    I am one of the developer of Bucket Explorer. That is a S3 Tool, solution available for Win/Linux/Mac.
    For more details : http://www.bucketexplorer.com

    Tej Kiran

  3. S3 always providing tremendous services at cheap price. I have taken a backup copy of all websites to s3.

  4. Amazon S3, where the 3 S stands for – Simple Storage Service, is an online file storage web service offered by Amazon Web Services and provides storage through web services interfaces.

  5. Great tutorial, just what I needed. By the way, I have query for you. I run a download site and host my files on a file sharing website. But lately, I have been thinking of uploading the files on my own server. What server or hosting should I choose for hosting files that gets heavy downloads every month?

  6. Vitaly

    Nice article, I also found this https://github.com/EastCoastProduct/cloudformation-static-site that has a nice cloudformation script to set it all up on AWS. Got me up and running in few minutes

  7. I was super excited to learn about this option (a bit late), but I really wish there could be a WordPress integration. What would you recommend for a WordPress user to make a smooth transition from an “easy” host (i.e. Bluehost) to S3?
    Thanks a lot for this, great article!

    • Don’t think you will be able to host wordpress websites by just using S3. Take a look at EC2 (for hosting the wordpress files) and RDS (for storing the mysql)

    • Azaz

      S3 is not for hosting your WordPress or any other PHP application. S3 is mainly for cloud storage, like storing your database or application backup. You need EC2 for hosting WordPress or any other application. You can either directly go to AWS EC2 hosting for that or go for managed cloud platforms like Cloudways or SiteGround.

  8. This is a nice post. I want to know that, if I upload any apps to this server, will the apps show any effect on the server?? Please answer. Thank YOu.

  9. Amazon online S3, where the 3 Ersus symbolizes – Uncomplicated Storage space Services, is definitely an on the web file storage devices internet assistance proposed by Amazon online World-wide-web Services and provides storage devices through internet companies interfaces. Thanks

  10. Nice post.. I have some doubt is amazon hosting really worth enough for some serious designers? Help me

  11. Hi Cory,
    Found this article interesting. Have some doubts too..
    Is there any effect on traffic Heavy traffic handling ??.. Is that fine with huge traffic. Please let me know. Thank You.

  12. I like the versioning part. Versioning allows me to preserve, retrieve, and restore every version of every object stored in an Amazon S3 bucket.

  13. Hello sir, I want to know whether CDN can be enabled for Amazon S3 Web. Please help me in knowing

  14. Is it possible to move a website from godaddy to amazon

  15. Looks pretty easy. But is it worthy enough to shift from WordPress to Amazon S3?

  16. Nice post. I am a little bit confuse about WordPress and Amazon hosting. Also, i am using Namecheap hosting for my site, i want to know that is it possible to move my site from Namecheap hosting to Amazon.

  17. Phani

    Hi,

    I need your help, I have static site in aws, I created instance, E.IP, installed PHP / Mysql and also done Route53. Now in my website “blog” is there, for that I want to create sub-domain “blog.mywebsite.com” with wordpress in AWS. Once this wordpress setup in subdomain aws, I will redirect this to “Blog” menu.

    Now for this I was unable to host wordpress in sub-domain created in AWS. Can you please help me to create this.

    Thank you.

  18. Great tutorial. I have a few static 1-2 page websites for testing purposes, and I was looking for a free solution to host them. You just saved my day, mate. Thanks a lot!

    Regards,
    Andrew

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!