Skip to content

Welcome to my blog

14/10/20172 min readCategory: General

Gatsby is a static site generator for React.js that allows the user to create fast and dynamic websites. Gatsby focuses on mobile device optimization and automatically creates a PWA (Progressive Web App). The website is populated from various sources: Markdown, CMSs, APIs, databases and many more.

Why Gatsby.js?

I postponed the relaunch of my site for a long time, also because I didn't find a suitable solution for a blog. Often the setup was too complicated, the possibilities too small; but I didn't want to write pure HTML for my blog posts either. With the increasing popularity of React.js I couldn't escape this hype and read myself in. Since I already think in terms of components in the design step, React.js was the next logical step.

At the beginning of 2017 I discovered Gatsby.js and was enthusiastic about the possibility to write my website with React as well as my blog posts with Markdown or a headless CMS (e.g. Contentful or Prismic). It takes a lot of work off your shoulders and offers an easy start (nobody should have to deal with Webpack!). Due to the active community around the founder Kyle Mathews there are already numerous plugins that deliver more functions.

Magic (GraphQL)

To get the data from the Markdown files, CMSs etc. in React and finally on the screen, Gatsby uses the query language GraphQL. The already mentioned community provides some plugins (e.g. Contentful, Drupal, Lever, Medium, Wordpress, MongoDB, Markdown, Prismic) to get the data. The subsequent use of GraphQL is child's play:

export const pageQuery = graphql`
  query ProjectsQuery {
    allMarkdownRemark(
      limit: 1000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { fields: { sourceInstanceName: { eq: "projects" } } }
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            customer
            cover {
              childImageSharp {
                fluid(maxWidth: 1200, quality: 95) {
                  base64
                  aspectRatio
                  src
                  srcSet
                  sizes
                  originalImg
                  originalName
                }
              }
            }
          }
        }
      }
    }
  }
`

With this query you get all projects (including the data from the Frontmatter) for project subpages, sorted by date (assuming an adequate configuration). In order to output the appropriate images for each screen size, a further plugin, which uses the Sharp library, takes the cover defined in the Markdown file and creates additional images from it. If you have problems with the query, you can use the interactive GraphiQL debugger to display suggestions and test the query yourself - the debugger automatically creates its own documentation.

This data can then be used in the React components like this:

<h1>{this.props.data.allMarkdownRemark.edges.node.frontmatter.title}</h1>

What else... ?

The creation of my website went super fast with React, I also learned a lot about PWAs and will continue to try to improve Google's own Lighthouse Score. The website is open source and can be viewed on GitHub for learning purposes.

Sparked your interest? Read all posts in the category General

More posts