Skip to content

AWS IS CHEAP - Part1. Static Website Hosting

Looking to host your blog, personal site or startup bootstrap page affordably and efficiently? Dive into this blog post for quick, cost-effective, and automated solutions using AWS, Terraform code, and clear explanations to facilitate your website deployment. If you're familiar with AWS and Terraform, enjoy the code repositories. For beginners, a bit of technical skill or a willingness to learn is needed.

This is the kickoff of a series demonstrating how, with the right setup, carefulness, and smart usage, AWS can be incredibly affordable for hosting websites or services.

AWS Services Used

AWS Service Description Usage for this project Estimated Price For This Project
S3 Cloud Object Storage Store Website Files (< 5Go) < 0,20$ / month
(Optional) Cloudfront Content Delivery Network (CDN) Needed for https ~ 0$ (< 5000 GET requests/month)
(Optional) ACM Certificate Manager Needed for https ~ 0$ / month
(Optional) Custom Domain name You own domain name Ex: my-website.com ~ 12$ / year (1$ per month)
(Optional) Route53 DNS Service Needed for Custom Domain Name 1$ per month

So the total cost for a small static website (personal page, static blog, bootstrap page) hosted on AWS with:

  • A custom Domain Name
  • HTTPS
  • Less than 5Go of Website content
  • Less than 5000 GET requests per month.

costs around 2,20$ a month.

For a more accurate estimate, use the AWS Pricing Calculator

Pre-requisites

  • An active AWS account
  • Installed and configured Terraform with AWS credentials

Deployment

You have two options for deployment:

  1. Manual deployment following the official AWS documentation: Hosting a static website using Amazon S3
  2. Automatic deployment using Terraform files, which are available in the sections below

1. Simple Static S3 Website

Goal: Deploy a Static Website on an S3 bucket
Description: Creates a S3 bucket, enable S3 website hosting, grants public reading access to the bucket
Target Projects: Simple Static Website Testing, Basic Prototyping
Advantages: Simplest, Most Economical Disadvantages: No HTTPS, no custom domain name (website url will be like: http://my-test-website.s3-website-eu-west-1.amazonaws.com)
Estimated Cost: < 0,10$ / month

Can be deployed automaticaly with Terraform with this Github project -> Github - Deploy S3 Static Website

Deployment example of a HTTP Static Website hosted on S3
git clone git@github.com:Le-Blanchardeu/aws-is-cheap_static-website.git
cd aws-is-cheap_static-website

terraform init
terraform apply -var="domain_and_bucket_name=my-test-website999999999.com" -var="aws_region=eu-west-1"

aws s3 cp my_website_html_files/ s3://my-test-website999999999.com/ --recursive

Simple S3 Static Webpage screenshot Simple S3 Static Webpage

2. Static S3 Website with CloudFront and HTTPS

Goal: Deploy a Static Website on an S3 bucket with a CloudFront distribution and HTTPS enabled
Description: Creates a S3 bucket, enable S3 website hosting, creates a CloudFront distribution with default SSL, and configures the S3 bucket as the origin
Target Projects: Static Website Test with HTTPS, Website Prototyping with HTTPS
Advantages: Simple, Cost-effective, HTTPS enabled Disadvantages: No custom domain name (website URL will be like: https://ds51jhq64zd0.cloudfront.net) Estimated Cost: < 0,20$ / month

Auto-deployment available with Terraform and explanations here -> Github - Deploy S3 Static Website CloudFront and HTTPS

Deployment example of a Static Website hosted on S3 with HTTPS
git clone git@github.com:Le-Blanchardeu/aws-is-cheap_static-website.git
cd aws-is-cheap_static-website

terraform init
terraform apply -var="domain_and_bucket_name=mysuperwebsite-cloudfront-test.com" -var="aws_region=eu-west-1" -var="https=true"

aws s3 cp my_website_html_files/ s3://mysuperwebsite-cloudfront-test.com/ --recursive

Simple S3 Static Webpage with CloudFront HTTPS Simple S3 Static Webpage with CloudFront HTTPS

Note

CloudFront caches your website content. When you upload new website content to S3, perform a CloudFront cache invalidation either via the AWS Console or by using the following command: aws cloudfront create-invalidation — distribution-id E1xxxxxxxxxx — paths “/*”

3. Static S3 Website with CloudFront, HTTPS and Custom Domain Name

Goal: Deploy a Static Website on an S3 bucket with a CloudFront distribution, HTTPS enabled, and a custom Domain Name
Description: Creates a S3 bucket, enable S3 website hosting, creates a CloudFront distribution with default SSL, configures the S3 bucket as the origin,and sets up the custom Domain Name to resolve to the CloudFront distribution
Target Projects: Personal Blog, Personal Website, Startup Bootstrap Page
Advantages: Full Static Website Hosting with HTTPS and custom Domain Name Disadvantages: Requires payment for a custom Domain Name (approx. \(12 per year). Architecture may become slightly more complex if customization or changes are needed **Estimated Cost:** < 2,20\) / month

Deployment example of a Static Website hosted on S3 with HTTPS and Custom Domain Name
git clone git@github.com:Le-Blanchardeu/aws-is-cheap_static-website.git
cd aws-is-cheap_static-website

terraform init
terraform apply -var="domain_and_bucket_name=leblogdublanchard.com" -var="aws_region=eu-west-1" -var="https=true" -var="custom_dn=true"

# You need to put the files in the www. bucket (created automatically)
aws s3 cp my_website_html_files/ s3://www.leblogdublanchard.com/ --recursive

Auto-deployment available with Terraform and explanations here -> Github - Deploy S3 Static Website CloudFront HTTPS and Custom Domain Name

Simple S3 Static Webpage with CloudFront, HTTPS, Custom Domain Name and real content screenshot Simple S3 Static Webpage with CloudFront, HTTPS and Custom Domain Name

Note

CloudFront caches your website content. When you upload new website content to S3, perform a CloudFront cache invalidation either via the AWS Console or by using the following command: aws cloudfront create-invalidation — distribution-id E1xxxxxxxxxx — paths “/*”

Note

DNS record propagation may take some time. Please be patient!

4. What if I need to host several websites?

Just use terraform workspaces

terraform workspace list
terraform workspace new mynewwebsite.com
terraform workspace select mynewwebsite.com

In the upcoming AWS-IS-CHEAP series:

  • Setup a smart and cost-effective AWS email service for your custom domain name
  • Introduce Aws Lambda to add dynamics to a static website