Serverless web-site with Gatsby static generator

How to build a serverless website and blog with Gatsby static generator on AWS

This article is part of an aggregating article describing Serverless React/Gatsby/Go template

Build a web-site using this template

Choices

There are multiple options to build web site’s frontend: a) Build it by hands from scratch b) Use some Content Management System (CMS) c) Use a static content generator

Let’s not consider a), as it doesn’t make much sense from the ROI perspective. b) is currently one of the most popular choices, with Wordpress being one of the leaders. This option has an advantage of low entry threshold for its users, however it also has a number of disadventages, which we’ll cover as advantages of option c)

Static content generator re-builds your web-site every time when you change its content. It may sound excessive, but in reality this process becomes absolutely transparent to you if you have a proper Continuous Deployment set-up.

But on the other hand, this approach immediately gives you the following advantages:

  1. When you use a CMS, one part of your content will be in a (relational) database, another part (like images) in a file system or, with proper set-up, in a cloud storage. The set-up of the CMS (like plug-ins setup) will be stored on the server, or, with a good set-up, in some code repository. Static generator allows you to keep all your content along with the mark-up, plug-ins, images, etc in one place, code repository. Which in turn gives you a possibility to monitor, review and track changes, easily rollback to a previous state, review history of changes, etc.
  2. Gatsby, as well as other static content generators allows you to host your web-site on a static hosting, like Google Cloud Storage (GCS) or AWS S3. This is much cheaper than hosting a server with a CMS, or paying a 3d party to host it for you.
  3. If you put a CDN (like AWS Cloudfront) on top of your static storage, you’ll observe an amazing web site performance, which is not achievable by any CMS. (To be fair, a CDN can be used on top of a CMS as well)

This is exactly what the template discussed here is doing. The template generates the following artifacts:

  1. A source code repository with web site and base content, integrated with Gatsby engine
  2. An AWS S3 bucket with public web hosting enabled and properly set up permissions;
  3. A CloudFront stack on top of the AWS S3 bucket, caching and distributing the content all over the world, providing a sub-second latency of the page load.
  4. CloudBuild, CloudDeploy and CloudPipeline orchestrating delivering the changes to production.
  5. Replicated Lambda function to improve user experience as well as SEO quality of your public web site.

The replicated lambda is needed to solve one simple problem: when you host a web site in AWS S3, you can set a default document, like index.html for the top-level folder. However, if you have subfolders, then S3 is not able to load a default document from the subfolder. So, an URL like https://example.com will be routed to https://example.com/index.html, whereas a URL like https://example.com/blog/ will return 404, because S3 doesn’t have such a document, and is not smart enough to route it to https://example.com/blog/index.html.

The replicated lambda handles such requests and make sure that a correponding “index.html” is being served in this case.

Cost of the infrastructure

The cost of a serverless web site and blog consists of the following parts:

  1. Storage
  2. Cloudfront
  3. Replicated Lambda function
  4. Pipeline to promote your changes.

The storage cost is so small that can be neglated. Cloudfront cost is pretty low and is shared with other pieces of the infrastructure. Replicated Lambda function costs $ per call. This Lambda will not be executed every time when someone requests a document from your web site. It will be executed only when the corresponding document is not found in the Cloudfront cache. Thus, the cost will be extremely small. AWS CodePipeline costs $1 per month assuming that you are using the pipeline. If you choose to deploy manually (without CD), or you just don’t update your content frequently, then AWS will not charge you for the pipeline usage.

Launch Gatsby web site locally

To run Gatsby on your local environment you need to run

gatsby develop

or

yarn develop

Your site will be running at http://localhost:8000.