|
| 1 | +--- |
| 2 | +title: Ghost CMS with Gatsby JAMstack |
| 3 | +id: jamstack-ghostgatsby |
| 4 | +--- |
| 5 | + |
| 6 | +This tutorial will guide you through the process of deploying and hosting a [Ghost CMS](https://ghost.org/) with [Gatsby](https://www.gatsbyjs.org/) front-end using the serverless approach. |
| 7 | + |
| 8 | +## What We're Building |
| 9 | + |
| 10 | +By the end of the tutorial, you will have deployed into your AWS account: |
| 11 | +* An AWS Fargate ECS cluster, service, and [Docker Task](api/nodes/DockerTask.md) for the Ghost CMS |
| 12 | +* An AWS ELB application load balancer in front of the Ghost CMS service |
| 13 | +* An AWS Aurora MySql Serverless [Database](api/nodes/Database.md) behind the Ghost CMS service |
| 14 | +* An AWS CodeBuild Project for Gatsby as a [Website Builder](api/nodes/Website.md) |
| 15 | +* The Amazon S3 Bucket for Gatsby content to serve as a CDN origin [Object Store](api/nodes/ObjectStore.md) |
| 16 | +* An Amazon CloudFront distribution that delivers your static web content to users quickly and securely as a [CDN](api/nodes/CDN.md) |
| 17 | +* A Lambda [EdgeFunction](api/nodes/EdgeFunction.md) to assert secure headers in requests to CloudFront |
| 18 | + |
| 19 | +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 suitable for real workloads. |
| 20 | + |
| 21 | +> __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__ |
| 22 | +> |
| 23 | +> 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. |
| 24 | +
|
| 25 | +### Ghost CMS Architecture |
| 26 | + |
| 27 | +Feel free to play around: |
| 28 | + |
| 29 | +<iframe id='canvas' |
| 30 | + title='Stackery canvas of AWS SAM template' |
| 31 | + width='100%' |
| 32 | + height='500' |
| 33 | + frameBorder='0' |
| 34 | + src='https://app.stackery.io/editor/design?owner=ryanycoleman&repo=gatsby-starter-ghost&file=ghostTemplate.yaml'> |
| 35 | +</iframe> |
| 36 | + |
| 37 | +<br> |
| 38 | +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. |
| 39 | + |
| 40 | +### Gatsby Front-end Architecture |
| 41 | + |
| 42 | +<iframe id='canvas' |
| 43 | + title='Stackery canvas of SAM template' |
| 44 | + width='100%' |
| 45 | + height='500' |
| 46 | + frameBorder='0' |
| 47 | + src='https://app.stackery.io/editor/design?owner=ryanycoleman&repo=gatsby-starter-ghost&file=gatsbyTemplate.yaml'> |
| 48 | +</iframe> |
| 49 | + |
| 50 | + |
| 51 | +## Setup |
| 52 | + |
| 53 | +### Project Repository |
| 54 | + |
| 55 | +The following repository is referenced throughout this tutorial: |
| 56 | + |
| 57 | +- <a href="https://github.com/ryanycoleman/gatsby-starter-ghost" target="_blank" alt="GitHub repository">Gatsby Starter - Ghost, with AWS SAM templates</a> |
| 58 | + |
| 59 | +### Requirements and Assumptions |
| 60 | + |
| 61 | +The following software is used in this tutorial: |
| 62 | + |
| 63 | +- <a href="https://www.gatsbyjs.org/docs/quick-start#use-the-gatsby-cli" target="_blank" alt="Gatsby Docs">You'll want to consider installing the Gatsby CLI for local development</a> but you can deploy a functional blog without it |
| 64 | +- [Sign up](https://app.stackery.io/sign-up) for a Stackery account if you haven't already. This guide assumes an environment named 'development' linked to an AWS account of your choosing |
| 65 | +- This guide will create AWS infrastructure in your default VPC and default ECS Fargate cluster, etc. |
| 66 | + |
| 67 | +#### Deploy Quick Start |
| 68 | + |
| 69 | +You can deploy each example stack into your own AWS account using these three Stackery CLI commands: |
| 70 | + |
| 71 | +`stackery create` will initialize a new repo in your GitHub account, initializing it with the contents of the referenced blueprint repository. |
| 72 | + |
| 73 | +```text |
| 74 | +stackery create --stack-name 'jamstack-ghost' \ |
| 75 | +--git-provider 'github' \ |
| 76 | +--blueprint-git-url 'https://github.com/ryanycoleman/gatsby-starter-ghost' |
| 77 | +``` |
| 78 | + |
| 79 | +`stackery deploy` will deploy the newly created stack into your AWS account. |
| 80 | + |
| 81 | +```text |
| 82 | +stackery deploy --stack-name 'jamstack-ghost' \ |
| 83 | +--env-name 'development' \ |
| 84 | +--git-ref 'master' |
| 85 | +``` |
| 86 | + |
| 87 | +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](https://docs.stackery.io/docs/using-stackery/environments/) which will be used by the following Gatsby stack. |
| 88 | + |
| 89 | +First, identify the Elastic Load Balancer address in the AWS Console for EC2. It'll look like `http://ghostapilb-#number.#region.elb.amazonaws.com/`. |
| 90 | + |
| 91 | +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. |
| 92 | + |
| 93 | +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. |
| 94 | + |
| 95 | +```code |
| 96 | +{ |
| 97 | +"ghostApiUrl": "API URL Here", |
| 98 | +"ghostContentApiKey": "Content API Key Here" |
| 99 | +} |
| 100 | +``` |
| 101 | + |
| 102 | +Once saved into your Stackery environment, you can create and deploy the Gatsby stack. |
| 103 | + |
| 104 | +```text |
| 105 | +stackery create --stack-name 'jamstack-ghost' \ |
| 106 | +--git-provider 'github' \ |
| 107 | +--blueprint-git-url 'https://github.com/ryanycoleman/gatsby-starter-ghost' |
| 108 | +``` |
| 109 | + |
| 110 | +`stackery deploy` will deploy the newly created stack into your AWS account. |
| 111 | + |
| 112 | +```text |
| 113 | +stackery deploy --stack-name 'jamstack-ghost' \ |
| 114 | +--env-name 'development' \ |
| 115 | +--git-ref 'master' |
| 116 | +``` |
| 117 | + |
| 118 | +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. 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. |
0 commit comments