How to Host a Static Website on AWS S3 with GitHub and Configure CloudFront, ACM, and Route 53

This content originally appeared on DEV Community and was authored by Durrell Gemuh

This guide will walk you through hosting a static website on AWS S3 using your code from GitHub(my case) or any other place you have it deployed, and securing it with CloudFront, ACM, and Route 53. Each step is presented clearly to help you deploy your site with ease.

Step 1: Prepare Your Static Website Code on GitHub

• Push your static website files (HTML, CSS, JavaScript) to a GitHub repository.
• Make sure your main entry file is named index.html or as appropriate.

Step 2: Create an S3 Bucket and Upload Your Website Files

1. Log in to the AWS Management Console and open the S3 service.
2. Create a new bucket named after your website domain (e.g., example.com).
3. Choose a region close to your audience.
4. Disable “Block all public access” temporarily for this bucket.
5. Upload your website files from GitHub (download/archive or through CI/CD pipeline).
6. Go to the bucket Properties → Static website hosting.
7. Enable static website hosting, set the index document (index.html), and error document (error.html).
8. Save your changes.

Step 3: Set Public Access Bucket Policy

To allow public access to your website files:

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

• Replace "your-bucket-name" with your actual bucket name.
• Apply this policy in the Permissions tab under Bucket Policy.

Step 4: Test Your S3 Website Endpoint

• Go to the Static website hosting section of your bucket and copy the Endpoint URL.
• Open the URL in your browser, and confirm your static site loads correctly.

Step 5: Configure CloudFront, ACM, and Route 53 (To be covered next)

• Request an SSL certificate from AWS Certificate Manager (ACM) in us-east-1.
• Validate your domain using DNS through Route 53.
• Create a CloudFront distribution with your S3 bucket as the origin.
• Use HTTPS and attach the ACM certificate.
• Point your domain to CloudFront via Route 53 alias records.

Conclusion

Following these steps, you can host your static website on AWS with code managed on GitHub and prepare for a secure, performant setup using CloudFront, ACM, and Route 53.

This content originally appeared on DEV Community and was authored by Durrell Gemuh