DEV Community

Cover image for Hosting a Static Website on AWS S3: A Step-by-Step Walkthrough
Onakoya Temitayo
Onakoya Temitayo

Posted on

Hosting a Static Website on AWS S3: A Step-by-Step Walkthrough

Introducing Today's Project!

Project overview
I'm doing this project to learn how S3 storage services work. At the end of theproject I will demonstrate proficiency in uploading objects into S3 buckets.

Tools and concepts
Services and Key concepts used in this project include Amazon S3, S3 StaticWebsite Hosting, Access Control List(ACL), Bucket policies, Troubleshooting permission issues.

Time, challenges, and wins
This project took me approximately one hour five minutes. The most challenging part was when I did everything I was supposed to do and still got the 403: Access Denied error. This was the part of the project that took a whole chunk of my time. But with enough patience and enough troubleshooting, I was able to figure it out and get back on track without abandoning the project in frustration.

How I Set Up an S3 Bucket

In this step, I will create a S3 bucket, this is where I will store objects for mystatic website.
How long it took to create the bucket
Creating an S3 bucket took me 8 minutes
Region selection
The Region I picked for my S3 bucket was eu-central-1 because this is the regionwith lowest latency to my location.
Understanding bucket name uniqueness
S3 bucket names are globally unique! This means that no buckets worldwide have the same name because the bucket name is a part of the url

Upload Website Files to S3

In this step, I will download the index.html file, download the zip file of images for my website and upload all into my S3 bucket.

Files I uploaded
I uploaded two files to my S3 bucket - they were the unzipped folder containing all the files needed for the static page and the second file is the index.html file.

How the files work together
Both files are necessary for this project as index.html is the main entry point into the website and the folder contains all the supporting data and files for the frontend such as css, fonts.

Static Website Hosting on S3

In this step, I configure my S3 bucket so it can be publicly accessed over the internet, and when I'm done with that will visit the link to see the results.

Understanding website hosting
Website hosting is the storing of a website's files on a server so they can be accessed publicly by users over the internet.

How I enabled website hosting
To enable website hosting with my S3 bucket, I went down to the static website hosting panel and enabled it.

Access Control Lists (ACLs)
An ACL is a policy put in place to filter who gets access to a particular resource and what they are allowed to do with it.

Bucket Endpoints

Understanding bucket endpoint URLs
Once static website is enabled, S3 produces a bucket endpoint URL, which is a website where you can see all the content of the particular S3 bucket.

What I saw when I tested the endpoint
When I first visited the bucket endpoint URL, I came across an error page. The reason for this error is because the files in my S3 bucket are set to private by default so until I make it public, it cannot be viewed over the internet.

Finally Success!

In this step, I will make my S3 files accessible over the internet using ACL.

How I resolved the 403 error
To resolve this 403 Forbidden error, I went to the Actions tab and I made the objects in the website folder public using ACL

Bucket Policies

In this project extension I'm about to set up bucket policy for the bucket I'mworking with. I'm doing this so that no outsider can perform any function on the objects in the bucket or the bucket itself except read functions.

Understanding bucket policies
An alternative to ACLs are bucket policies. The benefit of using bucket policies is that they control who can access the bucket and what actions they can performon its objects. While ACLs are useful for granting basic permissions to individual objects or buckets by specifying which users or groups can read or write them.

What my bucket policy does
A bucket policy is a JSON-based access control rule that defines who can access an S3 bucket and what actions they can perform on the objects inside it

Top comments (0)