Migrating my Static Site to the JAMStack

MacBook Pro computer on a wooden desk

Back in 2013, my interest in having a personal website was renewed with the goal of occasionally writing along with having a home for my portfolio, side projects, and resume. I’d hosted numerous sites in a variety of ways over the years and this time around I wanted it to be simpler and free, if possible.

This is where I fell in ❤️ with the simplicity of leveraging Jekyll to build a site on GitHub Pages. My content was authored in markdown, leveraged a developer-friendly git workflow, and cost $0. This setup worked well for several years and offered decent performance.

Over time, I began to find the overall workflow less convenient. Image assets were a bit cumbersome to include in content because they often required manual cropping and optimization. I eventually became less interested in creating new content because of the decisions I had made with this design and architecture.

Fast forward to 2016 and I knew I had to get serious about rebuilding this site. My first priority was to resolve the issues I had with content creation and administration. This is where Contentful really shines. They offer a CMS-as-a-service where you define your content model and consume your content as JSON from their API. Contentful also offers an image API which supports basic transformations when querying your content and media.

Once I had Contentful configured and my content migrated, my primary goal was to get this online as quickly as possible so I reached for some tooling that I had already been using for years. I paired Middleman, a Ruby-based static site generator with a first-party integration for Contentful. I moved the deployment and delivery duties over to Netlify who serve static sites across their CDN.

Key Improvements

  • Content and media created and managed in a real CMS
  • Continuous deployment with Netlify
  • Leverage webhooks to trigger a new build on content updates

A More Modern Architecture

As stated on their site, the JAMStack is a modern web development architecture based on JavaScript, APIs, and prebuilt Markup. Sites built and delivered this way are inherently performant, easily scalable, and offer a fantastic developer experience.

The following diagram shows how I was able to take the previous architecture paired with Netlify and Contentful and take it to the next level by replacing Middleman with GatsbyJS. Static builds function nearly the same, the only difference being the build command.

JAMStack architecture diagram

GatsbyJS is an incredible project that makes setting up a statically generated site built with ReactJS a breeze. With Gatsby’s rich plugin ecosystem, you can query your Contentful data with GraphQL since their 1.0 release. This is another wonderful developer experience that is very welcomed.

With a seamless content creation and build system, I feel I have reduced the overhead I once had with my previous site architecture. I’m also excited about this development environment in general and the possibilities that come with the JAMStack!

Most importantly, I’d like to thank Contentful, Netlify, and GatsbyJS for helping make all of this possible.