The Gatsby web site project has reached a milestone and is now published at Github Pages. The project is ongoing and more content as well as features will be added.

#Why Gatsby? I have thought about an own site for marketing & sales, personal branding etc and after I have focused on React based SPA clients and Rest API based Node.js at the backend for quite some time I realized that was not the architecture for my needs.

Gatsby powered blog's seemed popular and after playing with simple solutions I find Gatsby very powerful since it comes with lazy image loading, route prefetch, SEO, service workers, analytics and offline capabilities to name a few features that makes Gatsby easy to use.

Other pros that makes life as a developer easy using Gatsby are;

• Gatsby is build for React,
• Gatsby built-in router,
• Gatsby plugins and its ecosystem,
• GraphQL in Gatsby,
• etc.

##Gatsby is built for React I'm an intermediate to advanced JavaScript and React developer and feel comfortable with creating and composing components, handle states and behaviours. I have also used Material-UI as the UI framework for composing components and customize the styling for a long time and find it powerful and easy.

Hint. Do not learn Gatsby before you know and feel comfortable with React because when you wil start learning Gatsby, you will need to learn the plugin system, GraphQL and also some Node.js which can be daunting in the beginning.

##Gatsby built-in router Gatsby ships with a build in Router and you do not need to learn or evaluate which router package you are going to use and the built in router has support for SSR and many other feature such as providing state between pages if you want.

The built in router has two modes to create routes:

1. Static Routes: Every component in the src/pages folder becomes automatically a route.
2. Dynamic Routes: The createPage API allows you to create dynamic routes.

##Gatsby plugins and its ecosystem Gatsby Plugins make it possible to introduce pre-defined features on a fine-grained level to your project. As an example, I'm using gatsby-plugin-material-ui to add theme support once for all pages as described below.

//gatsby-config.js
 
module.export = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      // If you want to use styled components, in conjunction to Material-UI, you should:
      // - Change the injection order
      // - Add the plugin
      options: {
        // stylesProvider: {
        //   injectFirst: true,
        // },
      },   
    }  
  ] 
}

The plugin helps me create and use Material-UI's ThemeProvider and I inject the provider to the wrapRootElement, which is a special open Gatsby API to add a component that do not re-render on page routing.

The wrapRootElement API is exported in the gatsby-node.js file and hence picked up by Gatsby during the build process.

Gatsby.js presented itself with a well-structured plugin system and there is a huge ecosystem of Gatsby.js plugins to

choose from for your Gatsby.js site. Many of the following benefits (images, markdown, third-party integrations) of using Gatsby.js tie back to its powerful plugin ecosystem.

##GraphQL in Gatsby GraphQL is commonly seen as alternative to REST but it is imperative to remember that REST is mostly used for client-server communication via HTTP/HTTP(s) when GraphQL is just a query language independently of the communication protocol and data representation.

GraphQL can be used anywhere where a client requests data and in the case of Gatsby - GraphQL can be seen as the interface between Gatsby and all its data sources.

GraphQL is another aspect which makes it more complex to learn Gatsby.js as a beginner since it also comes with its own ecosystem, best practices, and libraries.

#Lessons learned There have been a lot of new tech stuffs to get my hands on, markdown for example, I have played with it before but it was long time ago, and my attempts to build a wrapper component for translating the HTML generated by the remark plugin into typographic React components was a setback even if I learned a lot.

GraphQL was something I have never tried before and I'm impressed of the Gatsby architecture and how it uses plugins as the workhorses to build and update schemas to query against when building the static pages.

React and Material-UI is something I have learned and know a lot about before this project but in the beginning of the project I had difficult to stop thinking in SPA architecture terms. It's imperative to understand that the build process in Gatsby creates static resources after loading in data from the sources.

#What's next I have more features to add to this project but most of all I will focus on adding content, however functions planned in the future are;

• a custom domain in Github Pages, henrikgronvall.com,

• fix the tre view component on the landing page,

• fix the social component on the landing page,

• implement an easy way to switch themes

• support for comments to articles, not sure which system to use though,

• support for mailing list,

• contact form,

• etc.