How to Host a Static Website on AWS S3 with a Custom Domain Using Route 53

Hosting a static website on AWS is a cost-effective and scalable solution, especially if you're just getting started or need a simple site. In this post, I'll walk you through the steps to configure a static website using AWS S3, Route 53, and other necessary services.

What You'll Need:

1. An AWS account.

2. A registered domain name (which you can purchase through AWS Route 53 or any other domain registrar).

3. Basic knowledge of S3 and Route 53.

Step 1: Create an S3 Bucket for Your Website

1. Log in to the AWS Management Console and go to the S3 service.

2. Create a new S3 bucket:

   • The bucket name should match your custom domain (e.g., example.com).

   • Choose the region closest to your audience.

   • Uncheck the "Block all public access" option to allow public access to your website files.

3. Upload your website files (HTML, CSS, JS, etc.) to the bucket.

4. Configure the bucket for static website hosting:

   • Go to the bucket properties and enable "Static website hosting."

   • Set the index document (e.g., index.html).

   • Optionally, set an error document (e.g., error.html).

5. Make your content public:

   • Under the bucket permissions, add a bucket policy that allows public access to your files. You can use the following JSON policy:

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

Replace example.com with your actual bucket name.

Step 2: Set Up Route 53 for Domain Management

1. Register a domain or use an existing domain in Route 53.

2. Create a hosted zone for your domain:

   • This will allow Route 53 to manage the DNS settings for your domain.

3. Update the name servers:

   • If your domain is registered with another provider, update the name servers to point to the ones provided by Route 53.

Step 3: Configure DNS Settings

1. Create an alias record in Route 53:

   • Go to your hosted zone and create a new record.

   • Choose "Alias" as the record type.

   • Select your S3 bucket as the alias target.

2. Add additional records:

   • You may want to add www or other subdomains as CNAME records pointing to your main domain.

Step 4: Test Your Setup

1. Wait for DNS propagation: This may take a few minutes to several hours.

2. Visit your domain: Enter your custom domain in a browser to see your static website live.

Conclusion:

Congratulations! You've successfully set up a static website on AWS S3 with a custom domain using Route 53. This setup is perfect for personal blogs, portfolios, and simple websites. Plus, with AWS's scalability and reliability, your site will be fast and available to users worldwide.

If you have any questions or run into any issues, feel free to reach out in the comments or connect with me on Linkedin!

Happy hosting!