Amazon Cloudfront S3 Static Website

Static website hosting with AWS CloudFront and S3.

01

S3 Deployment

YouDoCMS is integrated with the AWS CLI. This synchronises your local build folder with your S3 bucket. Build a whole site or a single page and deploy in seconds with a single click. 

02

CloudFront

Setup CloudFront distribution, cache invalidation, SSL certificates and image metadata for maximum performance on desktop and mobile. Create 301 redirect rules for updated content.

03

IAM and Route 53

Simplify your deployment with AWS Route 53 integration to update site DNS settings for your domain and SSL certificate validation.

Deploying a Static Site to S3?

Creating, building and deploying a Jamstack site manually to S3 and CloudFront is straight forward enough. What about updating and maintaining!

A static site generator such as Hugo is a fast and simple way to build a static site once you have got your head around the syntax. However what happens when you make some changes such as adding an additional menu and a new page to a blog. The entire site will need to be rebuilt, manually uploaded to S3 and manually invalidating the CloudFront cache. A headless CMS such as YouDoCMS automates this process.

Furthermore if you delete content CloudFront will continue to serve the pages until the cache is cleared or it will return a 404 error. S3 allows up to 50 301 redirects free of charge which YouDoCMS can create automatically when you update your content.

Lastly to optimise your page performance on mobile devices images should have the correct meta data settings. This can be done manually for each image but if you have many of them it's a slow process. YouDoCMS automatically updates the meta data when you deploy the site.

Static vs Headless
prefs_s3_medium.png

AWS Static Site Hosting

AWS hosting consists of two products. CloudFront is the CDN and S3 is the storage. CloudFront is part of AWS always free option whereas S3 storage has a 12 month free period. 

The AWS platform is the most comprehensive of all clouds and includes identity management, reverse proxy and a domain name registry along with Lamda serverless functions.

Route 53 plus the domain name registry simplify the management of domains and the generation of SSL certificates. AWS static sites are able to work with either the AWS or third party domain name registry.

YouDoCMS is integrated with AWS web server logs for analytics as an alternative to JavaScript further speeding up page load times.

  • Domain name registry.
  • Route 53 and SSL.
  • Web Server Logs.
  • Reverse Proxy.
AWS Setup
aws-build_medium.png

S3 Storage

S3 bucket storage incorporates static site hosting with an Amazon S3 endpoint (domain) and W3C Web format web server logs included free of charge. Although S3 is object storage the control panel incorporates an easy-to-use file explorer allowing fine-grained control of your static assets.

The S3 free plan includes a generous monthly limit for data transfer of 1TB with no maximum file size. After the 12 month free period the storage charges are so low that for small business or personal websites the costs are negligible. Combination of S3 for storage and the CloudFront CDN can be complex to setup as they are separate products. However YouDoCMS is integrated with AWS CLI to make this process as simple as possible.

YouDoCMS builds a static version of the site locally before deploying using the AWS Node.js CLI to synchronise the local build folder with S3 storage. 

  • Free plan up to 1TB per month.
  • Maximum storage 5GB
  • No max file size.
  • Public or private access.
S3 Bucket
aws-deploy_medium.png

CloudFront CDN.

Build and deploy a static site to AWS CloudFront. YouDoCMS headless CMS is integrated with AWS CloudFront for quick and easy  static site hosting.

1

AWS Node.js CLI

The AWS API uses Node.js and NPM. YouDoCMS includes a single click install of AWS javascript sdk. Initialise a new CloudFront distribution with provision of SSL and S3 storage in a single step.

2

Build and Deploy

After your site has been built using the YouDoCMS static site generator a single click deploy to S3 the AWS CLI synchronises your local build folder with S3 blob storage. Before deployment we check the base URL matches the CloudFront. 

3

301 Redirects and Cache

After upload files to S3 the CloudFront distribution cache is refreshed and the updated content is available on the live site. Simultaneously YouDoCMS updates the S3 bucket with any 301 redirects created for outdated content.

CloudFront
aws-gt-metrix_medium.png

AWS Static Site Performance

GTMetrix test results for our home page tested on 19/12/2022 show AWS CloudFront/S3 achieving an excellent Largest Contentful Paint (LCP) time of 460ms which is the second fastest CDN we have tested. For comparison Cloudflare (393ms), Azure(495ms) and Firebase (468ms). 

LCP measures how long it takes for the largest content element e.g. an image or heading text on your page to become visible. For a good user experience, aim for an LCP of 1.2 seconds or less.

The 2022 Web Almanac analysis of the performance of hosted content management systems shows that less than half of the tested CMS sites achieve a “good” LCP of under 2.5 seconds for desktop or mobile.

  • 100% Lighthouse Score.
  • Fast CDN LCP score.
  • Fasted fully loaded time of 460ms.
  • Time to first byte of 84ms.
Why Speed Matters

There's More

Clear the Cache!

CloudFront uses S3 bucket storage which has many benefits. When you update your site and synchronise your local data to the cloud our application automatically requests CloudFront to clear the cache ensuring only the latest pages are available.

YouDoCMS automates the process to synchronise and deploy your website to the CloudFront CDN.

1. Upload

Deploy with the AWS CLI to synchronise your files with your S3 bucket.

2. Validate

Validate the deployment for CloudFront to create a new object in the cache.

3. Clear

Clear the previous deployment to update your site.

Reverse Proxy.

01

Create AWS Reverse Proxy

Update DNS to point to your target sub-domain.

02

Add URL Path

Add path for your proxy target. Multiple paths can be used.

03

Update Distribution

Clear the cache and update CloudFront to proxy the requests.

How It Works?

Static sites do not meet every requirement and if your site has a shopping cart or a community forum requiring users to login, a reverse proxy is the easiest way to manage this. 

A CloudFront reverse proxy can serve the majority of your site via the CDN thus achieving a high Google ranking and redirect specific URLs to a forum or shopping cart.

Our community forum uses the Xenforo platform running behind a CloudFront reverse proxy.

Learn More

How We Do It?

We make your setting up AWS stress-free for you to have the perfect control.

01

AWS S3

Setup and enable an AWS S3 storage bucket and synchronise the contents of your website to the cloud.  When you upload, only changed files are uploaded keeping upload times to a minimum.

02

Certificate Manager SSL

Create a free SSL to use with your website and attach this to the CloudFront distribution.

03

Route53 DNS

Using route 53 for DNS is optional. However if you are a route 53 user and your domain name is registered with Amazon then you can update the DNS settings when you create your CloudFront distribution.

04

CloudFront

The CloudFront content delivery network is the key component that makes static sites so fast. Automatically create a CloudFront distribution and link it to your S3  bucket to host your static site. CloudFront origin cache validation every time you deploy.