A comprehensive guide to build your personal website using GatsbyJS and Ghost deployed on AWS

As a web developer, I like to be in full control of how my website looks and acts. And with the growing popularity of ReactJS, I decided to use GatsbyJS which is a framework to build static sites using React.

However...

While GatsbyJS was a perfect solution for my website's frontend, it lacked a CMS (Content Management System) for my blog posts and an online editor. I knew I could use Ghost is my blogging setup but I didn't want to use its EmberJS based frontend and wanted to stick to Gatsby.

I started searching online about how I can connect Ghost to my Gatsby site, and luckily Ghost had just released its content API V2, i.e. an API to use Ghost as a CMS with any frontend layer.

So that's exactly what the setup for my personal website looks like. Its a Gatsby based site which pulls the data for the blog pages from a Ghost server that I am hosting on AWS. I use the Ghost editor to write my posts which means that I don't have to git push any markdown files every time I have to post something.

I am using AWS Route53 to host my domain, an AWS S3 bucket to serve all the static files generated by Ghost, an AWS Cloudfront instance which is a CDN service by Amazon that also provides free SSL for my S3 bucket, an AWS EC2 instance that runs my Ghost server and on top of all this, I use AWS CodeBuild to allow me to auto deploy my site in just one-click.

"Woah, that a lot of stuff for running a website dude !"

I know. But its worth it. I can now write in the Ghost editor and publish my content in a click on-the-go while still maintaining full control of how my website looks.

In the series of blog posts that follow this article, I'll go through the entire setup process. I hope you learn something new along the way and would love to know if you managed to setup your site using this approach. For any questions around this topic, please post them to the Ghost Gatsby Spectrum channel.

Get yourself a cup of coffee, play some good music and lets get started.

1. Ghost & Gatsby Part 1 - Setting up AWS S3, Cloudfront and Route53 to host the project
2. Ghost & Gatsby Part 2 - Setting up a Ghost blog on AWS EC2
3. Ghost & Gatsby Part 3 - Setting up a Gatsby site with gatsby-source-ghost plugin
4. Ghost & Gatsby Part 4 - Setting up AWS CodeBuild for auto deploying the site