1. Introduction

In this guide I'll show you how to create a static website on S3 and serve it via Cloudfront.

You'll end up with something like this:
- duhttestg7mi2.cloudfront.net

Which is a generated domain name. In the next article I'll show you how to do a custom domain name.

So why is it free?

Well... technically not free, but VERY VERY cheap.

The only 2 services you'll use is S3, where storing a small website costs virtually nothing, and CloudFront which has a free tier resetting every month forever.

And what is a static website?

A static website consists of pre-built pages with fixed content, displaying the same information to every visitor. Created using HTML, CSS, and JavaScript files, these sites don't require server-side processing or database management. This simplicity leads to faster load times, improved performance, and easy maintenance. Static websites can be hosted on various platforms, including CDNs, enhancing speed and reliability. In short, static websites are efficient and reliable, offering benefits like faster load times and easier upkeep, making them popular among web developers and content creators.

What examples can you do with a static website?

• Personal blogs or portfolios showcasing an your work

• Small business websites providing information about products, services, and contact details

• Landing pages for marketing campaigns, product launches, or events

• Online documentation or knowledgebases for software products or services

What are the limitations and things you CANNOT accomplish with a static website?

• Inability to handle complex, dynamic content like user-generated content or real-time data feeds

• Limited support for e-commerce functionality, such as shopping carts and payment processing

• Challenges in implementing advanced search capabilities or personalized content based on user preferences

• Difficulty in managing large-scale websites with frequently updated content, as each update requires regenerating the entire site

Okay, so this is out of the way, let's get to work!

2. Services we will use

S3 => to host the website
Cloudfront => to cache the content and give it HTTPS

What this guide will not cover?

• a custom domain name. You'll end up with an autogenerated site-name (you'll find custom website name in the next article)

3. Create a bucket

There's nothing special in here.

Go to Amazon => S3 Buckets and create a bucket.

Contrary to what you heard you don't need to do any of the following:

• Enable static website hosting (don't do it)

• Enable public access to the bucket (don't do it)

The reason for the above is, that we'll block public access to S3 and only have our static site available from CloudFront via OAC (Origin Access Control).

However what we need later on is:

• A bucket policy to allow access from CloudFront

The only step you do here is the following:

• Upload your static website to S3. I you need an easy way to upload your website, you can use my previous article about accessing S3 from your PC (or just use AWS Console)

I will just use one of the example Vite project I created a short while ago.

4. Cloudfront

We can have Cloudfront in front of our S3 website to provide secure access (S3 doesn't provide us with an SSL certificate)

• Go to Cloudfront and create a new distribution.

• Make sure you enter the S3 bucket name and NOT the bucket endpoint

• Add Origin access control settings and create a new OAC with default settings. Make sure you select "Sign Requests (recommended)" here, otherwise you'll get an Access Denied from CloudFront

  

• Select : "Redirect HTTP to HTTPS" at the Viewer section.

• Add index.html do the "Default root object - optional" section

You can leave the rest as default or modify it to your liking.
Click Create.

After a few minutes of deploying you'll be provided a domain distribution name like https://xxxxxxx.cloudfront.net that you can use to access your website.

While you wait you can do the bucket policy update.
When you created the CF distribution, you probably had a yellow alert on top of the page:

You can either click on the provided "Copy policy" button or have this added to your bucket

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

Of course use your own CloudFront and s3 bucket ARN.

Once you have all these you should have your static site deployed.

In the next article I'll show you how to have a custom domain name!