Host a Static Website on AWS S3 with CloudFront, ACM, namecheap, and GitHub CI/CD

Leehi — Thu, 19 Mar 2026 20:20:19 +0000

Deploying a static website can be simple and efficient. By leveraging AWS S3, CloudFront, ACM, and GitHub Actions, you can host a fast, secure, and globally accessible site, with fully automated deployments whenever updates are made. This guide will walk you through the process step by step.

Architecture:

Step 1: Host Your Static Website on S3

This setup allows you to host a static website (HTML, CSS, JS) directly on Amazon S3 without needing a traditional web server. Amazon S3 provides a reliable, highly available, and scalable storage service

1. Create an S3 Bucket

Go to the AWS S3 console and click Create bucket.
Name it after your domain (e.g., mywebsitedomain.com).

2. Keep everything private:

Do not enable public access.
Do not enable static website hosting - CloudFront will serve them

3. Upload your website files:

Add your .html, .css, .js, and other static assets.

4. Configure S3 Bucket Policy:

This policy will allow your Cloudfront distribution to access your S3 Bucket files.
You can go back here later to change the BUCKET_NAME, ACCOUNT_ID & DISTRIBUTION_ID

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<BUCKET_NAME>/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<ACCOUNT_ID>:distribution/<DISTRIBUTION_ID>"
                }
            }
        }
    ]
}

Step 2: Setup a CloudFront Distributions

To securely deliver your website with low latency worldwide, we’ll use CloudFront with Origin Access Control (OAC). This ensures your S3 bucket remains private while CloudFront handles all public access.

1. Create a Cloudfront Distribution

Go to Cloudfront
Click Create distribution
Choose a plan: Select the $0 Free tier plan for testing or personal projects.
Give a Distribution Name
We will setup the domain later on these steps.

2. Configure Origin Settings

Origin type: S3 bucket
S3 Origin: Select your S3 bucket (e.g., mywebsitedomain.com)
Just enable "Allow private S3 access through CloudFront"
Review and Create

3. Create Origin Access Control

Go to Cloudfront > Security
Click Create control setting:

4. Add the OAC to your Cloudfront Distribution

Go to Cloudfront > Distributions
Select your Distribution
In Origins tab, edit your existing origin
Origin domain: Select your S3 Bucket
Origin Access: Select "Origin access control settings"
Origin Access Control: Add your OAC that you've created earlier

Step 3: Buy a Domain from a Third-Party Registrar

Before you can host your website, you’ll need a domain name. Using a third-party registrar like Namecheap, GoDaddy, or Google Domains is simple and cost-effective. In this guide, we’ll use namecheap to purchase the domain.

1. Choose a Domain Name

Pick a domain that represents your brand, project, or personal site.
Check availability using the registrar’s search tool.
Follow the registrar’s checkout process.

2. Manage DNS Settings

After purchasing, you’ll have access to the domain’s DNS settings.
In namecheap, Go to Domain List > Verify Contact > Manage > Advanced DNS
You’ll need to add CNAME or A records later to point to CloudFront and ACM.

Step 4: Request a Public Certificate

1. Request a certificate via ACM

Switch your AWS Region to us-east-1
Go to AWS Certificate Manager
Request a Public Certificate
Validation method: DNS Validation
ACM will generate a CNAME records like:
- Name: _abc123.mywebsitedomain.com
- Value: _xyz456.acm-validations.aws

Step 5: Add CNAME Record to Domain Registar

To validate your SSL/TLS certificate with AWS ACM, you need to add a CNAME record at your domain registrar.

1. Add CNAME record and ALIAS to your Domain Registar

Go to Namecheap > Advanced DNS
Click Add new Record:
- Type: CNAME Record
- Host: e.g., _abc123 (not the full domain, namecheap automatically appends your domain.)
- Value: e.g., _xyz456.acm-validations.aws
- TTL: Automatic
For Cloudfront:
- Type: ALIAS Record
- Host: @
- Value: e.g., d19e7mdg4h8u43.cloudfront.net.
- TTL: Automatic
Save the record and wait for DNS propagation.
Go back to AWS ACM.
- Once DNS has propagated, the certificate status will change to Issued.
- This usually takes a few minutes, but sometimes longer depending on your DNS provider.

Step 6: Add Your Domain and SSL Certificate to CloudFront

Go to the **CloudFront **console and select your distribution.
In General tab, click Edit
Alternate domain name: Your Domain Name
Custom SSL certificate: Select your ACM
Save changes and wait for CloudFront to deploy the updates.

Step 7: Setup Your GitHub Repository

Create a new repository
Add your website files to the repository
Go to Settings > Secrets and variables > Actions
Add the following secrets:
- AWS_ACCESS_KEY_ID : Your IAM user's access key
- AWS_SECRET_ACCESS_KEY : Your IAM user's secret key
- AWS_REGION : Your AWS Region
- CLOUDFRONT_DISTRIBUTION_ID : Your Distribution ID

Step 8: Creating GitHub Actions Workflow

The heart of our CI/CD pipeline is the GitHub Actions workflow file. Create a new file at .github/workflows/main.yml with the following content:

name: Deploy to S3 + CloudFront

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Sync to S3
        run: |
          aws s3 sync ./ ${{ secrets.S3_BUCKET }} --delete

      - name: Invalidate CloudFront cache
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

DEV Community: Leehi