DEV Community

David Meadows
David Meadows

Posted on

Hosting a static website in AWS

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

Fist navigate to the service S3 and click on the Create bucket button to provision your bucket.

S3 service

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

General configuration

Note: Bucket names need to be unique across all accounts for all AWS regions within a particular partition.
AWS documentation - Buckets overview

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

Success

Update Bucket Permissions

Next, navigate to the Permissions tab and update the public access settings.

Permissions

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

Edit Block public access

You will be warned and asked to confirm.

Edit Block public access confirm

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/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Updating Bucket policy

Enable Static Website Hosting

Next navigate to the Properties tab where the Static website hosting can be enabled.

static website hosting

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

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

Upload the Website Files

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

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

upload index.html

Here is the contents of my simple index.html:

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

Enter fullscreen mode Exit fullscreen mode

Upload succeeded

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

Summary

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.

Top comments (1)

Collapse
 
staticmaker1 profile image
staticmaker • Edited

You can do exactly above under 5 minutes using service like staticfast.com.