Porting a Ghost Blog to Gatsby

Over the last week I ported my Ghost website to Gatsby. I haven't worked with Gatsby or React before, and I must say that I am in love with how everything works. The only thing There are some tutorials out, which cover the certain aspects on how to setup a Gatsby site, integrate Ghost, or implement certain things, but there is not really content which covers the process from start to finish. I want to provide more posts that cover the process of porting an existing blog with a theme to Gatsby, including how to setup everything server side.

Let's start by breaking down the process even further.

About Ghost and Gatsby

Ghost is a publishing plattform built on a modern Node.js technology stack. It is open source and has a minimalistic feature set focused on blogging and publishing. Ghost itself is a headless CMS, which means that there are plenty of options for the frontend, as long as you query the JSON endpoints. The automatic default frontend is handlebars.js. The backend uses a slick Markup editor.

Gatsby is a static site generator, built on a JAM Stack using modern web technologies. It generates a static site at build time, which can be served to users as a Progressive Web App (PWA). Some cool features include pre fetching of linked sites and efficient loading of resources.

So these two plattforms can be combined to write your blog in ghost, which is used as a headless CMS and Gatsby to generate your static site for your users.

Setting up Ghost and Gatsby

Here you will have several options on how to setup your publishing pipeline. I decided to host the Ghost platform as a Headless CMS on Amazon EC2 and host the built Gatsby site on Amazon S3, with CloudFront as a provider of a https encryption and as CDN.

If you want to keep costs low, you can also host your blog local and push the built website to S3. There are also other options than using AWS, but this decision is up to you.

Check out this post on how to setup Ghost and Gatsby.