How I Deployed My First Static Site Using S3 Buckets

Background

#

As a Part of Devops Micro Intership (DMI) with Pravin Mishra, I Explore the Cloud Services , especially focusing on AWS . We have learned from basic to advance concepts of AWS services. It was very practical learning with hands on Experience with Real life projects and Assignments. As a Part of Assignment , I Learned the concept of S3 buckets and deployed my first static site on S3 buckets.

📩 Message: If you want to learn DevOps with hands-on practice and live projects for free, you can follow the YouTube playlist by Pravin Mishra.

Deploying Static Site

#

To Deploy a Static Site using S3 Buckets, we need an AWS account . I am using AWS Free Tier account. here is a step wise step instructions that i followed to deploy my first static site on S3 buckets.

1. Create a S3 Bucket

#

• Search the keywords,S3 Buckets in the AWS Console search bar and Select the S3 service.

  

• Select the General Purpose Buckets and Click, Create Bucket to create bucket.

  

• Create a new S3 Bucket (General Purpose) with Specific Project Name and disable the ACL.

  

2. Upload Website Files

#

• After selecting the options that we need as per our requirement, S3 buckets created successfully. Now we need to upload the source code of static application.

  

• Download the Source code of Static site from : https://html.design/download/repair-maintenance-html-template

  

• Upload the source code to the S3 bucket. You can use either the AWS CLI or the AWS Console (GUI). I used the GUI method for this project.

  

3. Enable Website Hosting

#

• Go to Properties and scroll down. You’ll see that S3 static website hosting is disabled. To enable it, click the Edit button and make the necessary changes.

  

  

  Enable the hosting and and select hosting type as a static hosting.

  

4. Configure an website hosting

#

• Go to Properties and configure the index and error documents for the site. We are selecting index.html as the index document and leaving the error document empty for now.

  

• Make the Changes and save the configuration,

  

5. Enable Block Public Access

#

Go to Permissions and check if public access is blocked. In our case, public access is blocked. Click the Edit button and disable it.

• Save the changes and confirm it.

  

6. Setting Bucket Policy for website access

#

• Go to Permission, scroll down, and select Bucket Policy. Click Edit and write a policy in JSON format.

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

• Click on the S3 bucket endpoint and visit the static site, the site is live now.

  

7. Demo

#