Deploy static websites to Amazon S3

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 which is my portfolio and accessible via this URL.

Prerequisites

The following are required to complete this tutorial:

• Create an AWS account. Sign-up 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
• Create a bucket by clicking the Create bucket button

• 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

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

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

    {
        "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.

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.

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 for this web application.

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
• An introduction to Amazon Simple Storage Service (Amazon S3)
• Amazon S3

Comments

[Johannes Koch]

Cool post, thanks a lot!

With CodeCatalyst and the Blue Prints there is a possibilty to get started faster - watch the video here:
youtube.com/watch?v=XG1_1dwbP6c

[teri]

Thanks for this info, Johannes. I will check it out.