DEV Community

Cover image for Hosting a Static Website on Amazon S3
AWS Community Builders profile image Esther Ninyo
Esther Ninyo for AWS Community Builders

Posted on

Hosting a Static Website on Amazon S3

#webdev #cloud #aws #beginners

Deploying a static website just got easier with S3 on AWS. You don't have to manage servers, and Amazon S3 is one of the easiest and most cost-effective ways to host a static website.

In this project, I will walk you through how to deploy your project on S3 step-by-step. This is a beginner-friendly project.

I will be making use of an HTML website I cloned in 2020 when I just started learning how to code. Feel free to use any HTML project of your choice. The steps are the same.
If you don't have an HTML project, you can create a simple index.html file and paste the code below into the file:

<!DOCTYPE html>
<html>
<head>
    <title>My AWS Website</title>
</head>
<body>
    <h1>Hello from AWS S3!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

What we will do:

  • Create an S3 bucket

  • Upload project files

  • Enable static website hosting

  • Make the website publicly available

Resources to be created:

  • AWS S3 bucket

Prerequisite:

  • AWS account

  • HTML project/Basic HTML Knowledge

STEP 1: Create S3 bucket on AWS

AWS console dashboard

  • Search for S3 in the search bar and click on create bucket

Create bucket

Create bucket options

  • Enter a unique bucket name

  • Disable block public access

  • Leave everything else as it is and create bucket

STEP 2: Upload your files

Upload files

upload files

After uploading the files

Files uploaded

STEP 3: Enable static website hosting

  • Open bucket properties

bucket properties

  • Scroll all the way to the end and enable Static Website Hosting.

Edit static website hosting

enable static website hosting

  • Save after all changes have been made.

STEP 4: Update Bucket policy

  • Navigate to the permissions tab and update the bucket policy with the permissions below. Don't forget to save changes.

Permission tab

permission

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

STEP 5: Access your website

  • Navigate to the properties tab
  • scroll all the way to the end
  • Access your website using the Bucket Website Endpoint

Access website

Closing Remark!
You have successfully hosted your website on AWS using an S3 bucket. If you encounter any problems, kindly review what you've done and ensure you haven't missed any steps.

Thank you for reading to the end. Kindly reach out to me in the comment section if you have any questions, or on LinkedIn.

Till next time, cheers.

Top comments (0)