AWS

How to Create a Static Website Using S3 Bucket (Step-by-Step)

Today we are going to learn about “creating a static website using s3 bucket”. Because there are times when we just want to deliver a static web page to the users, then, in that case, using “S3 buckets” is a good choice available on Amazon AWS.

Question: Why only a “static website“?

Answer: As of now, all alone the Amazon’s S3 service will only allow the static content, but it can be further used with other AWS services in order to deliver dynamic content as well, we are going to discuss that in future posts.

Step 1: Create an S3 bucket

We have already created an S3 bucket with the name “geekylane-website“.

If you do not know or want to know more about creating S3 buckets, follow -> How to create an S3 bucket on AWS?

Create a new S3 bucket Static Website Using S3 Bucket
Create a new S3 bucket

Step 2: Create files – to be delivered by S3 bucket

File we are about to create and upload:

  1. index.html = main web page
  2. geekylane1.jpg = going to be referenced via “index.html

Firstly, we have written the following code for our “index.html“.

 Code for index html file
Code for “index.html” file

Secondly, following is our “geekylane1.jpg” file.

geekylane.com Static Website Using S3 Bucket
geekylane1.jpg

Step 3: Upload Files

The files which we have in the “Step 2“, it is time to upload them our “geekylane-website” S3 bucket. We have already uploaded both the files, as shown below.

Upload the required files
Upload the required files

Step 4: Access Files

Now, it is time to access the files which we have uploaded in the “Step 3“.

In order to access a particular object (file) stored in an S3 bucket, we have to copy the “Object URL“, for reference check below.

Copy the object URL of index html file
Copy the object URL of index html file

Question: Wait! What? it is showing “AccessDenied” Error? Why?

Answer: It is showing Error because we have not made the objects public.

Access denied on accessing the index html file
Access denied on accessing the “index.html” file

Step 5: Make S3 Objects Public

Because we want to access the files which we have uploaded in “Step 3” via a web-browser. We have to make the objects stored in the bucket (geekylane-website), public.

In order to do that, we have to change the “block public access” settings.

The following picture is the default settings for the “block public access“, you can see that all types of access via “ACLs” or “bucket policies” are blocked.

By default Public access is blocked
By default Public access is blocked

We have to alter/change the settings as the picture below, we have unblocked the public access to the S3 buckets and its objects granted through the bucket policies.

Static Website Using S3 Bucket
Edit block public access settings

After that, we will be asked for a final confirmation, as shown below, simply type “confirm” and hit “Confirm“.

 Confirmation on changing public access settings
Confirmation on changing public access settings

Our final permissions will look like shown below.

Final settings for block public access
Final settings for block public access

Step 6: Set-up Bucket Policy

First of all, we have to copy the “ARN” number for the bucket, this number is going to be different in your case, so do make a note of that.

And in order to generate a “bucket policy“, select the “policy generator” on this from the bottom, for reference check the screenshot below.

Copy the ARN number and Click on policy generator
Copy the ARN number and Click on policy generator

Create a statement as follows, using the policy generator.

The statement should look like this
The statement should look like this

After creating a statement, as shown above, generate a bucket policy, and you will be seeing something similar to the “JSON” document shown below.

Policy has been generated
Policy has been generated

After that, copy the “JSON” code generated above and paste it under the “Bucket Policy” section of an S3 bucket, in our case we have pasted it under “Permissions” of our “geekylane-website“, which we have created in the “Step 1“.

 Add the generated bucket policy
Add the generated bucket policy

Finally, you will be seeing a message like -> “This bucket has public access” and a “Public” icon with “yellow color” on the “permissions tab” and on the “Bucket Policy” tab, as shown in the image below.

To learn more about S3 bucket Permissions, follow -> S3 Bucket Policy

The bucket now has public access using bucket policies
The bucket now has public access using bucket policies

Step 7: Try Accessing the File Again

It is time to access the “objects” stored in the S3 bucket again after updating the appropriate permissions. In our case, we have to access the “index.html“, and from the picture below we can confirm that the S3 bucket is working as the content holder for our “static website” and it is also showing other referenced elements like “geekylane1.jpg” file.

The static website using S3 bucket is now running perfectly
The static website using S3 bucket is now running perfectly
 S3 dahboard is also showing public access icon
S3 dashboard is also showing public access icon

Conclusion for “Static Website Using S3 Bucket”

We have already tried accessing the “index.html” file in “Step 4” but it has shown an “AccessDenied” error and in order to solve that, we have made the S3 bucket “geekylane-website” public in “Step 5“, after that we have set up appropriate access permissions on the “geekylane-website” using the “Bucket Policies” in “Step 6“. Finally, our “static website using S3 bucket” is accessible in the “Step 7“.

More on S3:

Comment here