Deploy static websites to Amazon S3
Tags: aws, frontend, programming, webdev
Published: 2023-03-28 11:50:01

Amazon simple storage service (S3) primary focus is general object storage in the cloud, similar to Google Drive or Dropbox. In this case, S3 is for software-oriented applications which you can use to store anything from images, hosting static websites, source code, spreadsheets, and so on.

This article demonstrates using Amazon S3 as a storage center for your website, allowing users access to view it publicly. As developers, many front-end programming languages, from Astro, React, Nuxt, or even basic HTML, CSS, and JavaScript, can be deployed.

The choice is yours. 

Let’s get started.


## GitHub

For this project, the source code is in [this repo](https://github.com/Terieyenike/portfolio) which is my portfolio and accessible via this [URL](https://www.iamteri.tech).


## Prerequisites

The following are required to complete this tutorial:

- Create an AWS account. [Sign-up](https://portal.aws.amazon.com/billing/signup?nc2=h_ct&src=header_signup&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation) is free


## Benefits of S3

The benefits of choosing S3 over other services are:

- Durable: The services provided allow your app to scale without fluctuating downtime.
- Highly available: It is available across so many data regions worldwide.
- Supports integration with AWS: S3 can be integrated with other services by AWS based on your needs. Explore the over 200 AWS services and start developing.


## Deploying a static website

There are several ways to host your website:

- Using the S3 console
- Utilizing the representation state transfer (REST) application programming interface (API)
- Using the AWS software development kit (SDK)
- Using the AWS command line interface (CLI)

In this project, we will use the S3 console to deploy and host a website.

**Step 1**
Create a bucket
A bucket is like a container housing the project's different components, like the assets, which may include images, video files, code documents (index.html), and so on. 


- Make sure you are logged into your AWS management console and search for the [Amazon S3 console](https://console.aws.amazon.com/s3/)
- Create a bucket by clicking the **Create bucket** button


![s3 console](https://paper-attachments.dropboxusercontent.com/s_96C0199A1C5DB185A54205D0E4EEAB844B55AB734AF333D3F83E1FBEBE83A297_1679988002973_Screenshot+2023-03-28+at+08.18.32.jpg)



- Give your bucket a name and select the region
- Scroll to the end of the page and click Create bucket

**Step 2**
Enable static website hosting

- In the **Properties** tab, under the **Static website hosting**, choose **Edit**
- Choose **Enable** under the **Static website hosting**
- For the **Hosting** Type, select **Host a static website**
- Every website has a home page document. Enter the **index.html** (it is case-sensitive) in the **Index document**
- If you have an **Error document**, enter the file name like 404.html or error.html, depending on the naming convention in your project folder. 
- Once satisfied with the changes, click **Save changes**


![web app document](https://paper-attachments.dropboxusercontent.com/s_96C0199A1C5DB185A54205D0E4EEAB844B55AB734AF333D3F83E1FBEBE83A297_1679989384493_image.png)


**Step 3**
Edit the **Block public access (bucket settings)**. Find the setting in the **Permissions** tab. By default, Amazon S3 blocks unauthorized access to this bucket and can only be accessed on a public URL when allowed.

- Choose Edit and uncheck the **Block** ***all*** **public access** box
- Choose Save changes


![block public access](https://paper-attachments.dropboxusercontent.com/s_96C0199A1C5DB185A54205D0E4EEAB844B55AB734AF333D3F83E1FBEBE83A297_1679989755784_image.png)


**Step 4**
Add a bucket policy 
This policy makes your bucket content publicly available and written in JSON format. 

- Located in the **Permissions** tab, under the **Bucket policy**
- Choose **Edit** and copy-paste this policy
- This policy grants public read access to your website

```json
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": [
                    "s3:GetObject"
                ],
                "Resource": [
                    "arn:aws:s3:::Bucket-Name/*"
                ]
            }
        ]
    }
```

Replace **Bucket-Name** with the title of your bucket in **step 1** to something like this “arn:aws:s3:::astro-portfolio/*”

- Choose **Save changes**

**Step 5**
Uploading your website content
I used Astro, a front-end framework for building beautiful UI in this step. You can use any other framework or library, and it will work similarly to this process. 

Run this command on the project directory in the terminal:


    npm run build

This command will create a build directory folder named **dist** of your app with the following file: the `index.html` and other necessary for the web app.


![local machine folder](https://paper-attachments.dropboxusercontent.com/s_96C0199A1C5DB185A54205D0E4EEAB844B55AB734AF333D3F83E1FBEBE83A297_1679998908149_Screenshot+2023-03-28+at+11.21.04.jpg)


**Note**: The naming convention, **dist,** might be different for React, Vue, and Remix apps which could be named something like **build.**

Next, click the upload button in your AWS S3 console and store your web content from your local machine within the **Objects** tab.


![upload content](https://paper-attachments.dropboxusercontent.com/s_96C0199A1C5DB185A54205D0E4EEAB844B55AB734AF333D3F83E1FBEBE83A297_1679999114011_Screenshot+2023-03-28+at+11.12.59.jpg)


Under the **files and folders** section, upload all the content, including both files and folders, within the **dist** folder.

Choose **Upload** to commit and save the changes.

**Step 6**
Testing the app, which should be publicly available for anyone to view. 

Click the **Properties** tab, and under the **Static website hosting**, you will find the public URL beneath the **Bucket website endpoint**.

For this project, here is the [public URL](http://astro-portfolio.s3-website.eu-west-2.amazonaws.com/) for this web application.


![public web app](https://paper-attachments.dropboxusercontent.com/s_96C0199A1C5DB185A54205D0E4EEAB844B55AB734AF333D3F83E1FBEBE83A297_1680000567072_Screenshot+2023-03-28+at+11.48.50.jpg)



## Conclusion

This article just covered one aspect of what Amazon S3 can do, and it is efficient enough for all your developer-related work. 

Please give it a trial and let me know what you think.


## Further reading
- [Documentation S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html)
- [An introduction to Amazon Simple Storage Service (Amazon S3)](https://youtu.be/77lMCiiMilo)
- [Amazon S3](https://aws.amazon.com/s3/)