djmetzle.io

The Great Gatsby

After much todo and from-scratch blog building, we've got something that looks like a blog!

But how does it work? Let us investigate...

Gatsby as a framework is designed to handle traversing a graph of pages. That is a non-trivial abstraction! It means that the Gatsby framework is transparently handling routing and rendering for us.

Firstly, it means that Gatsby wants to render all .js files it finds in our src/pages directory as pages. These pages get their names set transparent, and we can cross link between these pages with the Link component.

Neat!

But what else can we do? The next basic plugin we can use is gatsby-source-filesystem. This exposes files in the src directory as "nodes" internal to Gatsby.

We can use a graphql query to find and reference file nodes:

{
  allFile {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}

These are called "source plugins" that provide data to Gatsby about what objects are availble to it. There are other source plugins, such as gatsby-source-custom-api that alow exposing all kinds of objects to the framework.

Once these sources objects are nodes, we can "transform" them with "transformers". These are special plugins to convert from one node type to another. The best example would be gatsby-transformer-remark. This plugin will automatically convert Markdwon files into html. We can then access and embed this formatted html into our pages.

Neat!

This combination lets us automagically convert Markdown into pages on our site. The entire seventh step of the tutorial goes into detail about implementing this.

With this powerful source+transformer idea, as well as the power of the Gatsby framework itself, we can build a static site, writen in Markdwon. Easy peasy, lemon squeezy.