Hosting a static site on AWS S3

Front-end Development
Back-end Development
A majority of the sites we develop at Rapid Development Group require a hosting environment that is robust enough to minimally handle a database, and several concurrent “workers” executing code and delivering pages to the client. But occasionally a client needs a small site, that doesn’t execute any code, and just delivers static markup to the client. Using an application stack in this situation is beyond overkill. Perhaps the most popular alternative for deploying a simple static website that loads fast, and costs very little is Amazon’s AWS s3 service. One of the very few barriers to taking this approach, is configuring AWS s3 (a service for simple file storage) to act as a web server.  Amazon does provide resources for getting us there, but it’s far from a one click install.
 
For the purposes of this article, let’s assume you have your static site assembled and ready to deploy. We are also skipping the actual AWS account creation process.

Creating your s3 bucket

Create bucket button on s3 console
  • Name the bucket with the domain name of your site, INCLUDING the WWW.
    • Example www.example.com
    • Select a region that makes sense for your site.  
    • Click ‘Next’
Create bucket name step
  • On the second step, the only thing you should do is add a tag called ‘hosting’
s3 bucket options
  • And on step three, turn OFF ‘block all public access`
    • We will be revisiting the details of access permissions a bit later.
s3 bucket permissions
  • Finally, review your settings and click “Create Bucket”.  This will complete the initial bucket setup.
  • Next go to the bucket in s3 console, and select the Properties tab.  
    • Choose Static website hosting from the options, and select the first option.  You will likely specify index.html as the index document (and error doc perhaps).
    • Take note of the URL to the site provided at the top.  This is where a CNAME record will need to point to in DNS.
    • The site needs an index page in the root of the bucket, and sub-directory won’t do.
Static s3 site hosting
Hosting index document selection
  • Go to the Permissions tab and the Bucket Policy sub option.
    • Add the following to this policy, replacing www.example-rdg.com with the appropriate ARN And Save.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example-rdg.com/*"
        }
    ]
}

 

s3 Bucket Policy
  • This will issue a warning message that you have allowed “public access” which is fine.
Public Access Warning
 
At this point, you can place the files in your site’s bucket either via the s3 console, or your method of choice.  
 
You can visit your site using the URL provided under Properties → Static Website Hosting.
s3 bucket public URL

In order for your custom domain name to resolve to this location, a CNAME record will need to be created with your registrar.  A subdomain will be required to use this approach (ie. www.example-rdg.com).  Setting up a root domain requires extra configuration.

And if you want to secure your site with a certificate you will need to set up AWS Cloudfront.  I have created a separate article for configuring this service.

Need a fresh perspective on a tough project?

Let’s talk about how RDG can help.

Contact Us
About the Author

Mike Bopp

Mike Bopp
Mike is the Managing Director of Rapid Development Group, where he drives strategy and operations while also leading multiple software development projects.