Hosting a static website in AWS
Tags: aws, react, s3, beginners
Published: 2023-02-20 02:29:31

## Summary
It is easy to forget how overwhelming software developing can be. Let's say you are a frontend developer who is passionate about creating a website and getting it out in front of users. The journey of learning how to code a frontend and all that goes with it is already a long journey. 

However, it does not stop there, you realize that your wonderful website does no good to anybody unless you deploy it. The reality is that frontend developers can benefit from having at least some knowledge of deploying and maintaining a backend.

In this post, I will detail how to set up and deploy a static website using an AWS S3 bucket.

## Contents
* [Create Bucket](#1)
* [Update Bucket Permissions](#2)
* [Enable Static Website Hosting](#3)
* [Upload the Website Files](#4)
* [Summary](#5)


## Create Bucket <a name="1"></a>
Fist navigate to the service S3 and click on the **Create bucket** button to provision your bucket.

![S3 service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/677ypwsfk6m4eo834s18.png)

I will enter a bucket name and then go with the default/recommended configuration options for now. 

![General configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0db8f2uy9bgspvysh31.png)

Note: Bucket names need to be unique across all accounts for all AWS regions within a particular partition.
[AWS documentation - Buckets overview](https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingBucket.html)


When finished selecting the desired configurations, click the **Create bucket** button and wait for the bucket to be provisioned.


![Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xm9pdf4iunac1o9ghd1.png)

## Update Bucket Permissions <a name="2"></a>
Next, navigate to the **Permissions** tab and update the public access settings.

![Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvnre7anhleo7uxr9cgr.png)

Uncheck the **Block all public access** checkbox. This should uncheck all of the checkboxes beneath. Save changes and continue.

![Edit Block public access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3si5pamnga6x22151ko7.png)

You will be warned and asked to confirm.


![Edit Block public access confirm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8l1swoy6g3i7omxlwym.png)

Next update the Bucket policy. This will provide access to the files that are uploaded to the bucket.

Here is the JSON object I used for the bucket policy:

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::devto-example-bucket/*"
        }
    ]
}
```
![Updating Bucket policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6rfy5g9v5eoae68to1u.png)

## Enable Static Website Hosting <a name="3"></a>
Next navigate to the **Properties** tab where the Static website hosting can be enabled.


![static website hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxexz0coxx7mzn5gyqok.png)

Select _Enable_ Static website hosting and other options will appear. I will stick with the default settings except for the **Index document**. The index document is where you can specify the default page for the website. I will choose index.html and leave the Error document field empty.

![Edit static website hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtukku0m2hdkdgthcrs4.png)

Once the changes are saved there will now be a Bucket website endpoint.
This endpoint is the url used to access the website.

![Bucket website endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78dt8b9zoqu2o72actke.png)

## Upload the Website Files <a name="4"></a>
Next, we can upload the files into the bucket that are needed for the website. In this example, I will only upload the index.html file.
Click on the **Objects** tab and then click on the **Upload** button.

![Objects tab view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01h4zb7pkrsqjce6girs.png)

I will select my index.html file that I made for this website.

![upload index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70xmv64djq9y16w40aa6.png)

Here is the contents of my simple index.html:

```
<html>
    <head>
        <title>My example Webpage</title>
    </head>
    <body>
        <h1>Hello There!</h1>
    </body>
</html>

```


![Upload succeeded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta3sfqria6bmobt64qke.png)

That is it! Now use the endpoint that was created earlier in the **Enable Static Website Hosting** step to navigate to the website. The Bucket website endpoint can be found under the **Properties** tab.


![Testing website endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79audtgclw5s4mf1xwt5.png)



## Summary <a name="5"></a>

In this post I summarized how to create a S3 bucket and then configure it as a static website. Although this example is extremely simple, using S3 in this way can be powerful. Imagine hosting a dynamic application built with React or Vue. Also adding a code pipeline for ease of build and deployment with a CDN distribution in front of the bucket. The sky is the limit to what can be built around this S3 static website bucket.

If you run into any issues (particularly access issues), please refer to the section **Update Bucket Permissions**. Permission issues are usually the main culprit for issues.