Building a blog site with Gatsby

It's been several years since I last touched this website, and there have been a couple reasons for that. Mostly, I felt as though the previous stack this site was deployed on was a little too cumbersome. I didn't spend much time creating an automated build pipeline, so any time I wanted to publish a new entry, I was doing it manually.

Another thing that's been on my mind lately is the idea that you should use tools you enjoy, and that they should get out of your way. I use VS Code because I don't have to think about configuration and navigation is intuitive. I just bought another model of the same mouse I used for years because I like the numpad on its side and I don't have to think about how to use it for different macros. In the same way, I wanted to build a site with tools that allowed me to achieve my end goal of writing easily. With that, the stack I've chosen to go with is: Gatsby, Sanity, and Netlify. In this post, I'll walk through how each technology is used. The goal of this post isn't necessarily a tutorial of how to do a thing, but more so a survey of tools you may consider and some of the strengths they offer.

Gatsby

You can learn more about Gatsby here

I chose Gatsby for its ease of use. In maintaining the theme that tools should get out of the way, Gatsby does an exceptional job of allowing you to stand up sites really fast. They have an excellent showcase of what the framework has been used for on their website, and the examples span everything from personal blogs to full-blown e-commerce sites.

Gatsby boils down to several pieces: components, pages, posts, and plugins. Being React based, you'd typically put reusable components in the components directory. The pages directory is where Gatsby looks to generate each page of the website at build time. Routing is handled by the framework and so all you need to do is create pages in the /pages directory and the rest is bootstrapped. A huge advantage Gatsby provides in its API is the ability to "slugify" collection routes. You can take advantage of this in GraphQL by leverage query variables. The end result is dynamically generated routes and pages. This was key for me when building this site because I wanted to store all my content posts in Sanity instead of Github.

You can read more about query variables and dynamic routing here.

Sanity

Read more about Sanity here

Sanity is a headless CMS. It allows you to create content and expose an API to whatever frontend you wish. Where in the past you might have used something like Wordpress where CMS and frontend are married, having a headless CMS allows you the flexibility of choosing the frontend technologies you wish to build with.

I'll be honest, I chose Sanity because it was recommended by a workshop I took. However, once I started using it a little more, I was struck by how easy it was to set up. In fact, all I needed to do was run through the getting started with sanity cli tutorial to get a project up and running that suited my needs. I'm writing this post in a sanity studio where all I added was one plugin to support markdown. When you've finished configuring your sanity studio locally, all you need to do is run sanity deploy to get your studio online. On the Gatsby side of things, you'll need to add gatsby-source-sanity to your package.json and then configure the plugin in gatsby-config.js. It'll most likely look something like this:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: '<your project id>',
        dataset: '<dataset name>',
      },
    },
  ]
}

Once this is set up, you're ready to grab data from Sanity in GraphiQL. This data is hydrated at build time.

Netlify

You can learn more about Netlify here

Netlify is a platform that easily allows people to deploy projects by handling a lot of the configuration needed to set up a CI/CD pipeline. Before this I had never used it before, and it took all of 5 minutes to set up a project and deploy this site to the internet.

I used the netlify cli getting started guide to configure my project, link my github repository, and complete my first deploy. Once Netlify has been installed globally, running ntl init will walk you through the process of creating your first project. Aside from specifying the url name, I found all the defaults to work just fine. Deploys are triggered off of commits to your repository's main branch so all that needs to be done to kick off a new deploy is a fresh commit. Alternatively, deploys can be manually run through the Netlify dashboard, or via the command line with ntl deploy.

Closing thoughts

I mentioned at the beginning of this post that I was previously doing everything manually. Once I had finished writing a post in markdown, I'd make a commit to github to check it in. Then, I'd build locally and upload my built files to an AWS S3 bucket. I had Cloudfront set up, so each time I wanted to update my site I'd manually go through the process of flushing the cdn cache and letting the new changes propagate to the various Cloudfront edge servers. It was cool, and I definitely learned a bunch about configuring AWS services, but it wasn't any way to live. I imagine I could have spent some time setting up some sort of automation, but for this sort of project, that'd probably be a little overkill.

Now, when I'm done writing a post in Sanity, I can log into Netlify and click a button to deploy my site. That's it. In the spirit of using tools that get out of the way and let you achieve your objective, I feel as though Gatsby, Sanity, and Netlify afford this exceptionally well.

Cheers,

Micah