dennis sänger

personal blog

I'm a fullstack developer from germany, particular interesset in functional programming, clean code and all things javascript & software development in general.

The great Gatsby

March 17, 2018

This blog now runs with gatsby.js I mainly worked with angular 1 & 2 in the frontend over the last years, but I'm keen to use more react. I love the simplicity and freedom of react and if I could, I would totally rewrite our whole app@work with react .. since I can't do that at the moment without getting into trouble with my super, I revived this blog using gatsby which uses react under the hood. I hope I find the time to write some posts about javascript, functional programming, our smarthome and the control panel I'm developing for it using react.

The blog uses uses the following gatsby plugins:

They all were easy to setup according to their READMEs.

A small change I added in this first version of the blog is the published attribute of blog posts. I want to posts only to be visible if they have a published: true metadata entry. In the local development version of the blog, I want to see all posts - no matter if they are published or not.

To achieve this, I added the published-tag to one of my two test posts like this:

path: "/blog/the-great-gatsby"
date: "2018-03-15"
title: "The great Gatsby"
published: true

This blog now runs ...

Now I have to tell gatsby to show draft posts in development mode. To achieve this, I added a file .env.development in the root of the project (this is described in the docs as well). gatsby makes these environment variables available automagically. My .env.development looks like this:


To fetch and display the blog posts I used the exact code from the gatsby docs. To enable the use of the published tag, I modified it just a litte and added another filter:

IndexPage = ({ data: { allMarkdownRemark: { edges } } }) => {
  const Posts = edges
    .filter(edge => !!
      edge =>
        process.env.GATSBY_SHOW_DRAFTS || !!edge.node.frontmatter.published
    .map(edge => <Post key={} post={edge.node} />);

  return <div>{Posts}</div>;

If the environment variable GATSBY_SHOW_DRAFTS=true is set to true, this filter rejects no posts all posts are shown in dev mode. If the variable is not set, it only returns posts where published is true.

Lastly, we have to change the graphql query to fetch the published tag:

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          excerpt(pruneLength: 250)
          frontmatter {
            date(formatString: "MMMM DD, YYYY")