Hosting a Static Website on AWS S3

Hello buddies, welcome to another wonderful edition and today we will be hosting a Static Website on AWS.

Introduction to AWS S3 Bucket

Amazon S3 ( Simple Storage Service) is a cloud-based object storage service that allows users to store and serve large amounts of data. An S3 bucket is a container used to store objects, such as files, images,and videos. S3 buckets are widely used for various purposes, including:

• Static Website Hosting: Hosting websites with static content, such as HTML, CSS, and JavaScript files.
• Data Storage: Storing and serving large amounts of data, such as images, videos, and documents.
• Backing up and archiving: Storing backups and archives of critical data.

In this project, we'll walk through the process of creating an AWS S3 bucket, hosting a Static Website, and restricting access to the bucket. This guide is perfect for developers looking to host a static Website on AWS S3 while maintaining control over access.
With that being said, let's dive in to the project.

• Step 1: Create an S3 bucket

• Login to your AWS Management Console

• Search for S3 and click on it

• Click bucket by your left

• Click create bucket

• Name your bucket

• Select a region

• Under encryption type, select the default one ( server side encryption with Amazon S3 managed key)

• Click on create

• Step 2: Upload your website file

• Select the newly created bucket

• Click upload

• If your website has a file and folder and you want to upload the two, click on file and click on add file

• Click on upload folder, and click on add folder

• Then click on upload

• Search for w3 schools on your browser
• Copy any HTML for this project ( But if you already have your own HTML, you can use it)
• Create a file on your laptop and paste the copied HTML in it
• Save the file with a .html at the end (e.g index.html)
• Navigate to the newly created bucket
• Click on properties in your bucket
• Scroll down and click on edit beside static Website Hosting
• click on enable

• Under index document, put your index.html file name
• Click on save changes Note: If you get an error message, go back to your bucket, click on permissions, and click on edit under block public access, then disable block all public access and save changes. Go back to your S3 and click on permissions again, scroll down and click on the edit in front of object ownership, enable ACLs and click on save changes. Then go back to the files you uploaded on your bucket, select it (if it has folder and file, then select all of it), click on Actions above, and select make public using ACL, then click on make public.
• Step 4: Let's test our website
• Go to your S3
• Click on properties
• Scroll down and click on edit beside static Website hosting
• Copy the website endpoint (it looks like URL)
• Paste it on your browser and hit enter

If you want to restrict access to your S3 bucket:

• Step 1

• Go to your S3 bucket

• Click on permissions

• Click on edit beside bucket policy

• Click on add statement

• Remove "statement" and put "block all public access"

• In principle, remove () and put *
  Note: Principle means which people do you want to restrict or apply this restriction to. * Means everybody

• In effect, put deny (remove allow)

• In action, search for S3 by your right, where you see choose service and enable all action
  {
  "Version": "2012-10-17",
  "Statement": [
  {
  "Sid": "AllowAccessFromSpecificIP",
  "Effect": "Allow",
  "Principal": "",
  "Action": "s3:GetObject",
  "Resource": "arn:aws:s3:::/",
  "Condition": {
  "IpAddress": {
  "aws:SourceIp": ""
  }
  }
  }
  ]
  }

• Click on add beside add a resource by your left

• Click on resource type drop-down and select bucket

• Under resource ANN, remove those things in front of S3= and put the name of your bucket

• Click on add resource

• Click on add condition by your left

• Click condition key drop-down, and search AWS principle ARN ( this means only the owner of the bucket can have access to the bucket)

• Click on the drop-down of operator, and select string not equals

• Under value, paste your AWS account ID ( go to your profile on your AWS Management Console by your right and copy your account id)

• Click add condition

• Then click on save changes

Step 2:

• Create an IAM Role

• Go to your AWS Management Console

• Search and click on I AM

• Click on Role and then click on create role

• Choose custom role, and select the service that will use the role (in this case, we are going to select S3)

• Attach the necessary policies to the role

• Create a Service Account

• Navigate to your IAM dashboard

• Click users, and then create user

• Choose Programmatic access

• Create the user

• Assign the Role to the Service Account

• Navigate to the I AM dashboard

• Click on Role and select the role you just created

• Click on attach policies, and ensure the necessary policies are attached

• Go to the users section and select the user you created

• Click on permissions, and then "add permissions"

• Choose attach existing policies directly and select the role's policy

This brings us to the end of today's section. See you soon
Your favorite girl Dabbie 😘