Deploying a static website to AWS S3

AWS S3 is a cloud storage service that caters to the storage needs of modern software applications. As part of it, offering S3 can be used to host static sites.

Any website made up of just HTML, CSS, and Javascript can be hosted and made publicly available using S3.

Getting started

Once you have your AWS account all setup you can login and then use the search bar up top to search for the S3 service.

s3-option

Once you land on the S3 page click on the Create bucket button to create a new storage bucket. This should present you with a form.

create-bucket

There are two main things to complete on this form among other optional settings:

  • Name of the bucket should be unique across the entire S3 network, so it only makes sense to use the domain name of your static site as it's unique across the web as well.

  • Scroll down to the Block Public Access... section of the form and uncheck the Block all public access button and check the I acknowledge that the current settings... right underneath that. This will allow your bucket to be publicly accessible for other apps to use for storage purposes.

block-access-button

You can now go ahead and create your storage bucket by clicking on the Create bucket button.

Uploading our site files

Now that we have a storage bucket, the next step is to upload our website to the bucket.

For that click on the newly created bucket, then click on the Upload button. This should open up your computer's file explorer. Be sure to select the web files and not the folder containing your files.

s3-upload-button

Pointing to our index and error files

Next, we will need to specify which file to serve up once a visitor hits the domain name assigned to the site as well as the 404 page to use in case a user requests a non-existing file.

For that, we need to go back to our bucket's page and head over to the Properties tab this time.

Scroll down to the Static website hosting section then click on edit.

You should now see a couple of fields:

  • Disable/Enable: Check Enable to allow for your site to be served.
  • Index document: Specify the name of the page you will like to serve your users when they first visit your site.
  • Error document: This is the name of the page that will be served to the user in case a requested page does not exist.

specify-files

Once you click on Save changes and scroll back to Static website hosting you will find a {url}.amazonaws.com domain name, this should now point to your website.

This URL might not work yet and lead to a forbidden page.

Fixing forbidden error

The forbidden error shows up because we have yet to set HTTP access permissions for our bucket.

To fix this you need to go back into your bucket, then click on the Permissions tab close to the Properties tab.

From there scroll down to the Bucket policy section which is a large text box with the policy settings in JSON.

set-permissions

You can go ahead and replace this with the JSON code below:

01: {
02:     "Version": "2012-10-17",
03:     "Statement": [
04:         {
05:             "Sid": "PublicRead",
06:             "Effect": "Allow",
07:             "Principal": "*",
08:             "Action": [
09:                 "s3:GetObject",
10:                 "s3:GetObjectVersion"
11:             ],
12:             "Resource": "arn:aws:s3:::<your-bucket-name>/*"
13:         }
14:     ]
15: }

This will allow your website files to be publicly readable and thus viewed in the browser.

And that's it, once you hit Save changes your website should now be accessible from your browser!