Going Serverless with Gatsby, Netlify and Contentful

I'm well beyond able to use the AWS free tier, so during my down time I went through porting my site from a traditional Wordpress setup to full Serverless.

So this is my first post on my new "serverless" site. The old one did me well for 5 years, but the world has moved on since Wordpress and I wanted something that didn't need patching and didn't have ongoing maintenance costs. So, during a bit of downtime from work I decided it was time to take a look at the site and see if it was worth updating it.

I've been using AWS pretty much since it was just SQS and nothing but a bunch of APIs. I worked with it as various new tools like S3 and EC2 got rolled out, and have witnessed the revolution in virtualisation that it kicked off.

While I've been working with it non-stop ever since, my personal website was running on a lonely little neglected EC2 instance running Wordpress for years. I'd patched the software every now and then, and the auto-updates for the OS were applied whenever possible. Every now and then though, the instance would need to reboot, or for whatever reason Apache or MySQL would crap out.

Frankly I couldn't be buggered figuring out what was going wrong and fixing it, as my day job is troubleshooting IT issues, and I really try to stay away from doing that I'm not getting paid. Plus, the server was costing me money. Only a few $ a month (it was just a t2.micro), but still I'd rather the money be in my bank account than Mr. Bezos's.

With the amount that I update the site, running a full LAMP stack seems like overkill, and I'd heard of static site generation frameworks like GatsbyJS a while ago, so I set about rebuilding the site using this tech. I had a couple of wants:

• I want to be able to publish blog articles using WYSIWYG or close to it (so not e.g. editing Markdown on Github)
• I want complete control to make any template or structural changes to the site without needing a full tool chain on any computer (so editing on Github is acceptable here)
• I want to work in Typescript rather than plain ol yucky Javascript
• I want a contact form in case anybody wants to reach me via the site
• I want the site to run on HTTPS under my domain name
• I don't want to worry about patching and security
• I don't want to worry about the site going down
• I don't want pay for hosting

So I discovered headless CMSs, which basically are hosted services that allow you to write content using their fancy tools and provide a REST API for your application (e.g. Gatsby) to pull the content down in a structured manner and manipulate it at will.

I found Contentful which has a free level for developers, which is perfect for me. I then discovered this article, which gave me a good starting template for Gatsby and a jumping off point for integrating with Contentful content types. It also introduced me to Netlify, which provides a CI/CD service that I can leverage to build my site without the need to fire up my own container or EC2 instance.

I set up my page structures and imported all of my old blog posts from WordPress into my space on Contentful. Then I changed the template component files into Typescript and cleaned up the types. Next, I pushed my site configuration up to a GitHub repo, set up my Netlify webhooks and let fly.

Netlify takes care of automatically running the Gatsby build process whenever I add content on Contentful or commit code changes to GitHub, and hosting the finished product. It even has built in LetsEncrypt support so with a little DNS configuration, I get the HTTPS support I need.

Contentful does a great job at providing a decent markdown editor and place to store the sources of my articles. Arengu hosts a form that sends me an email on submit, and there's an Arengu Gatsby plugin which displays the form within the context of my site.