DEV Community

Aditya Rawas
Aditya Rawas

Posted on

Hosting a Static Website on Amazon S3: A Step-by-Step Guide

Introduction:

Amazon S3 provides an easy and cost-effective solution for hosting static websites with high availability and scalability. In this step-by-step guide, we'll walk through the process of hosting a static website on Amazon S3.

Step 1: Set Up an AWS Account

If you don't have an AWS account, sign up for one at AWS official website. Once you have an account, log in to the AWS Management Console.

Step 2: Create an S3 Bucket

  1. In the AWS Management Console, navigate to the S3 service.
  2. Click "Create bucket" and follow the prompts.
  3. Choose a globally unique name for your bucket (e.g., "your-website-bucket").
  4. Select a region for your bucket.
  5. Uncheck the "Block all public access" option if you intend to make your website publicly accessible.

Step 3: Upload Your Website Content

  1. Inside your newly created bucket, click "Upload."
  2. Add your static website files (HTML, CSS, JavaScript, etc.) to the bucket.
  3. Ensure that your main HTML file is named "index.html" as this will be the default landing page.

Step 4: Configure Bucket Properties for Website Hosting

  1. In your bucket, click on the "Properties" tab.
  2. Scroll down to the "Static website hosting" card.
  3. Click "Edit" and choose the "Use this bucket to host a website" option.
  4. Set the "Index document" to "index.html" or your preferred landing page.
  5. Optionally, set the "Error document" for custom error pages.

Step 5: Set Permissions

  1. Still in the bucket properties, navigate to the "Permissions" tab.
  2. Click on "Bucket Policy" and add a policy to make your bucket publicly accessible. An example policy allowing public read access to all objects looks like:

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::your-website-bucket/*"
            }
        ]
    }
    

    Replace "your-website-bucket" with your actual bucket name.

Step 6: Enable Website Hosting

  1. Go back to the "Properties" tab and click on the provided website endpoint link.
  2. Your website should now be accessible through the provided URL. Note that it may take a few minutes for changes to take effect.

Step 7: (Optional) Configure a Custom Domain

If you have a custom domain, you can configure it to point to your S3 bucket using AWS Route 53 or another domain registrar. Update your domain's DNS settings to include a CNAME record pointing to your S3 bucket's website endpoint.

Conclusion:

Congratulations! You've successfully hosted a static website on Amazon S3. This straightforward process, combined with S3's reliability and scalability, makes it an excellent choice for hosting static content in the cloud.

Top comments (3)

Collapse
 
rickdelpo1 profile image
Rick Delpo

hey thanks @rawas_aditya , a well organized and concise writeup. I recently migrated to S3 on Cloudfront and ran into some issues that I outline in this article
dev.to/rickdelpo1/cloudfront-dns-m...
also wrote about enabling s3 to act more like a web server
dev.to/rickdelpo1/enabling-aws-s3-...

In both articles I go into great detail about Gotchas that no one tells u about. But overall my experience was good.

happy coding!

Collapse
 
bogomil profile image
Bogomil Shopov - Бого

Nice tutorial. How much does it cost to host a small website there?

Collapse
 
rickdelpo1 profile image
Rick Delpo

I have used S3 for a couple of years now and if u host AWS S3 using Cloudfront I pay only 50 cents per month (using route53) after a 12 month free trial. You can also host s3 on Cloudflare at no charge