Deploying A Static Website To AWS S3

Table of contents

• Getting started
• Uploading our site files
• Pointing to our index and error files
• Fixing forbidden page error

AWS S3 is a cloud storage service that caters to the storage needs of modern software applications. S3 buckets can be used to host static sites.

Any website made up of 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.

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.

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 since 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.

You can now 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 the files.

Pointing to our index and error files

Next, we will need to specify the file to serve up when a visitor hits the domain name assigned to the site (index page) and a 404 page to use in case a user requests a non-existing page.

For that, go back to the bucket page and head to the Properties tab this time.

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

You should now see a couple of fields:

• Disable/Enable: Check Enable to allow your site to be served.
• Index document: Specify the page to use as the home page.
• Error document: This is the name of the page that will be served in case a requested page does not exist.

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 page error

The forbidden page 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, this a large text box with the policy settings in JSON.

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

✅ Wrap📋
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: }

Now your website files will be publicly readable and thus can be viewed in the browser.

And that's it. Once you hit Save changes your website should now be accessible anywhere on the web!

Here is another article you might like 😊 Export CSV in Javascript