Host a Static Website on AWS S3 with CloudFront, ACM, namecheap, and GitHub Actions

#aws #cicd #tutorial #webdev

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

We’ll host our website on S3 by keeping the files private and allowing access only through CloudFront. This ensures your content is secure while being delivered quickly to users worldwide.

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:

3. 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.