4.7.2

Ghost CMS with Gatsby JAMstack

This tutorial will guide you through the process of deploying and hosting a Ghost CMS with Gatsby front-end using the serverless approach.

If you're completely new to Stackery, you may want to start with a smaller stack like any of the Quickstarts

What We're Building

By the end of the tutorial, you will have deployed into your AWS account:

  • An AWS Fargate ECS cluster, service, and Docker Task for the Ghost CMS
  • An AWS ELB application load balancer in front of the Ghost CMS service
  • An AWS Aurora MySql Serverless Database behind the Ghost CMS service
  • An AWS CodeBuild Project for Gatsby as a Website Builder
  • The Amazon S3 Bucket for Gatsby content to serve as a CDN origin Object Store
  • An Amazon CloudFront distribution that delivers your static web content to users quickly and securely as a CDN
  • A Lambda EdgeFunction to assert secure headers in requests to CloudFront

You can deploy the whole infrastructure in minutes, resulting in a fully functional CMS-sourced static site available through a CDN. Modest template additions for a custom domain and ssl certificates are missing, but otherwise this architecture is suitable for real workloads.

These are intricate stacks and more than the hello world template. Meaningful AWS fees may apply. We suggest deploying them for an hour to have fun with the possibilities of the Serverless JAMstack, but don't forget to delete the CloudFormation stack before considering the long-term costs with https://calculator.aws

The brilliant thing about this architecture is that the expensive Ghost infrastructure is only necessary when you're editing or building content. Once a build is delivered to the CDN, Ghost could be shut down.

Ghost CMS Architecture

Feel free to play around:


This stack provides the Ghost CMS web client and API through an Elastic Load Balancer. It's a heavyweight stack by serverless tutorial standards, providing a load-balanced container service and MySQL cluster. Because we're using AWS managed services, AWS SAM, and CloudFormation, everything can be replicated as infrastructure-as-code and there are zero servers to manage.

Gatsby Front-end Architecture

Setup

Project Repository

The following repository is referenced throughout this tutorial:

Requirements and Assumptions

This guide makes the following assumptions:

  • Sign up for a Stackery account if you haven't already.
  • A Stackery environment named 'development' linked to an AWS account of your choosing. You can adjust the named environment in the stackery deploy commands provided, or by using the Web UI
  • The templates provided will create AWS infrastructure in your default VPC and default ECS Fargate cluster, etc.

If you want to customize your Gatsby front-end, install the Gatsby CLI for local development but you can deploy a functional blog with content sourced from the Ghost CMS without it.

Deploy Ghost CMS

You can deploy each example stack into your own AWS account using these Stackery CLI commands or you can use the Stackery Web UI:

stackery login will authenticate your CLI to Stackery for use in the following commands.

stackery create will initialize a new repo in your GitHub account, initializing it with the contents of the referenced blueprint repository.

stackery create --stack-name 'jamstack-ghost' \
--git-provider 'github' \
--blueprint-git-url 'https://github.com/stackery/gatsby-starter-ghost'

stackery settings will adjust the created stack to reference the appropriate template from the repository.

stackery settings -n jamstack-ghost --key templatePath --value ghostTemplate.yaml

stackery deploy will deploy the newly created stack into your AWS account.

stackery deploy --stack-name 'jamstack-ghost' \
--env-name 'development' \
--git-ref 'master'

Provide Ghost CMS API Details to Stackery Environments

Once this stack is deployed, you'll need to retrieve a few pieces of data from the AWS Console and provide them as Stackery Environment parameter data which will be used by the following Gatsby stack.

First, identify the Elastic Load Balancer address in the AWS Console for EC2. It'll look like http://ghostapilb-#number.#region.elb.amazonaws.com/.

You'll then setup your Ghost CMS via that URL /ghost but note that because this stack isn't configured with a custom domain, the ELB is not protecting your data over SSL. Use throwaway information for this step or refactor the SAM template to use a custom domain and SSL certificate.

Once you've signed up for the admin account, navigate to '/ghost/#/settings/integrations'. Here you'll add a custom integration named Gatsby. You'll want to retrieve the 'Content API Key' and 'API URL' which you'll use to create environment data similar to the following example.

{ 
"ghostApiUrl": "API URL Here",
"ghostContentApiKey": "Content API Key Here"
}

Once saved into your Stackery environment, you can create and deploy the Gatsby stack.

Deploy Gatsby into CloudFront

stackery create will initialize a new repo in your GitHub account, initializing it with the contents of the referenced blueprint repository.

stackery create --stack-name 'jamstack-gatsby' \
--git-provider 'github' \
--blueprint-git-url 'https://github.com/stackery/gatsby-starter-ghost'

stackery settings will adjust the created stack to reference the appropriate template from the repository.

stackery settings -n jamstack-gatsby --key templatePath --value gatsbyTemplate.yaml

stackery deploy will deploy the newly created stack into your AWS account.

stackery deploy --stack-name 'jamstack-gatsby' \
--env-name 'development' \
--git-ref 'master'

The Website Builder resource in this stack will connect the Gatsby static site generator to the Ghost CMS, source content from it, and deliver that built content to an S3 bucket which serves as a CloudFront origin.

Next Steps

That's it! You're all done. At this point you can edit/add content in Ghost CMS, log into CodeBuild and re-run the stack-provisioned job to rebuild your site. Future revisions of this stack could include a webhook to automatically rebuild Gatsby when Ghost changes.

A future update of this guide will break down the template into step-by-step explanations but you can reach us via the in-app chat to learn more about this stack and get advice on how create your own serverless infrastructure.

← Serverless Webhooks TutorialEpsagon →