Gatsby is an incredible static site generator that allows for React to be used as the underlying rendering engine to scaffold out a static site that truly has all the benefits expected in a modern web application. It does this by rendering dynamic React components into static HTML content via server side rendering at build time. This means that your users get all the benefits of a static site such as the ability to work without JavaScript, search engine friendliness, speedy load times, etc. without losing the dynamism and interactivity that is expected of the modern web. Once rendered to static HTML, client-side React/JavaScript can take over (if creating stateful components or logic in componentDidMount ) and add dynamism to the statically generated content.

Gatsby recently released a v1.0.0 with a bunch of new features, including (but not limited to) the ability to create content queries with GraphQL, integration with various CMSs–including WordPress, Contentful, Drupal, etc., and route based code splitting to keep the end user experience as snappy as possible. In this post, we'll take a deep dive into Gatsby and some of these new features by creating a static blog. Let's get on it!

Getting started

Using the CLI

Gatsby ships with a great CLI (command line interface) that contains the functionality of scaffolding out a working site as well as commands to help develop the site once created.

gatsby new personal-blog && cd $_

This command will create the folder personal-blog and then change into that directory. A working gatsby statically generated application can now be developed upon. The CLI generates common development scripts to help you get started. For example you can run npm run build (build a production, statically generated version of the project) or npm run develop (launch a hot-reload enabled web development server), etc.

You can now begin the exciting task of actually developing on the site and creating a functional, modern blog. You'll generally want to use npm run develop to launch the local development server to validate functionality as you progress through the steps.

Adding necessary plugins

Gatsby supports a rich plugin interface, and many incredibly useful plugins have been authored to make accomplishing common tasks a breeze. Plugins can be broken up into three main categories: functional plugins, source plugins, and transformer plugins.

Functional plugins

Functional plugins either implement some functionality (e.g. offline support, generating a sitemap, etc.) or they extend Gatsby's webpack configuration adding support for TypeScript, Sass, etc.

For this particular blog post, you will make a single page app-like feel (without page reloads) as well as the ability to dynamically change the title tag within the head tags. As noted, the Gatsby plugin ecosystem is rich, vibrant, and growing, so oftentimes a plugin already exists that solves the particular problem you're trying to solve. To address the functionality you want for this blog, you can use the following plugins:

gatsby-plugin-catch-links implements the history pushState API and does not require a page reload on navigating to a different page in the blog

gatsby-plugin-react-helmet react-helmet is a tool that allows for modification of the head tags; Gatsby statically renders any of these head tag changes



with the following command: