import React from "react";
import { Link } from "gatsby";

export default () => (
  <div>
    <ul>
      <li>
        <Link to="/about">about</Link>
      </li>
      <li>
        <Link to="/tutorial/part-zero">Part #0</Link>
      </li>
      <li>
        <Link to="/tutorial/part-one">Part #1</Link>
      </li>
      <li>
        <Link to="/tutorial/part-two">Part #2</Link>
      </li>
      <li>
        <Link to="/tutorial/part-three">Part #3</Link>
      </li>
      <li>
        <Link to="/tutorial/part-four">Part #4</Link>
      </li>
    </ul>
  </div>
);

/src/pages/index.js

Components, templates, and their interaction

As you know, in any project there are always repetitive elements. For websites, it is a header, footer, navigation bar. Also, pages regardless of content are built on a given structure. Since Gatsby is a compiler for React, the same component approach is used to solve these problems. Let’s create components for the header and the navigation panel.

Please note that the image for the logo is imported in the same way as in a regular React project. This is a temporary and not optimal solution because the picture comes “as is”. A little further we will consider how to do it “correctly” using GraphQL and gatsby-plug-ins:

import React from "react";
import { Link } from "gatsby";

import logoSrc from "../images/logo.png";

export default () => (
  <header>
    <Link to="/">
      <img src={logoSrc} alt="logo" width="60px" height="60px" />
    </Link>
    That is header
  </header>
);

/src/components/header.js

import React from "react";
import { Link } from "gatsby";

export default () => (
  <div>
    <ul>
      <li>
        <Link to="/about">about</Link>
      </li>
      <li>
        <Link to="/tutorial/part-zero">Part #0</Link>
      </li>
      <li>
        <Link to="/tutorial/part-one">Part #1</Link>
      </li>
      <li>
        <Link to="/tutorial/part-two">Part #2</Link>
      </li>
      <li>
        <Link to="/tutorial/part-three">Part #3</Link>
      </li>
      <li>
        <Link to="/tutorial/part-four">Part #4</Link>
      </li>
    </ul>
  </div>
);

/src/components/sidebar.js

And add them to /src/pages/index.js:

import React from "react";

import Header from "../components/header";
import Sidebar from "../components/sidebar";

export default () => (
  <div>
    <Header />
    <Sidebar />
    <h1>Index page</h1>
  </div>
);

Everything works fine but we need to import Header and Sidebar on each page separately which is not very convenient. To solve this problem just create a layout component and wrap it around each page.

import React from "react";

import Header from "./header";
import Sidebar from "./sidebar";

export default ({ children }) => (
  <>
    <Header />
    <div style={{ margin: `0 auto`, maxWidth: 650, backgroundColor: `#eeeeee` }}>
      <Sidebar />
      {children}
    </div>
  </>
);

/src/components/layout.js

Working with data

Now that the site structure is ready you can move on to filling it with content. The classic “hardcode” approach did not suit the creators of the JAM-stack as well as “render content from AJAX-queries.” So they suggested filling the sites with content at compile time. In the case of Gatsby GraphQL is responsible for this which allows you to work conveniently with data streams from any source.

To work with GraphQL from the second version the gatsby package has a StaticQuery component which can be used both on pages and in simple components and this is the main difference from its predecessor — page query. Our site is not yet connected to any data sources so let’s try to output page metadata for example and then move on to more complex things. To build a query you need to open localhost:8000/___ graphql and use the sidebar with the documentation to find available data about the site. And don’t forget about autocomplete.

import React from "react";
import { Link, StaticQuery, graphql } from "gatsby";

export default () => (
  <StaticQuery
    query={graphql`
      {
        allSitePage {
          edges {
            node {
              id
              path
            }
          }
        }
      }
    `}
    render={({ allSitePage: { edges } }) => (
      <ul>
        {edges.map(({ node: { id, path } }) => (
          <li key={id}>
            <Link to={path}>{id}</Link>
          </li>
        ))}
      </ul>
    )}
  />
);

/src/components/sidebar.js

Now using query we get data about the pages we render in the navigation bar. No need to worry about the link not matching the name because all data is collected automatically.

In fact, this is all the data that can be on our site without the use of third-party plugins or without the good old “hardcode” so we move smoothly to the next topic of our article — plugins.

Plugins

In essence, Gatsby is a compiler with a bunch of bonuses which are just plugins. They can be used to configure the processing of certain files, data types, and various formats.Let’s create a file /gatsby-config.js<|em> at the root level of the application which is responsible for the configuration of the compiler and try to configure the first plugin to work with files.Plugin installation:

yarn add gatsby-source-filesystem

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`
      }
    }
  ]
};

Configuration in file /gatsby-config.js

Remember we talked about “correct” importing pictures into Gatsby?

import React from "react";
import { Link, StaticQuery, graphql } from "gatsby";

export default () => (
  <StaticQuery
    query={graphql`
      {
        allFile(filter: { name: { eq: "logo" } }) {
          edges {
            node {
              publicURL
            }
          }
        }
      }
    `}
    render={({
      allFile: {
        edges: [
          {
            node: { publicURL }
          }
        ]
      }
    }) => (
      <header>
        <Link to="/">
          <img src={publicURL} alt="logo" width="60px" height="60px" />
        </Link>
        That is header
      </header>
    )}
  />
);

Nothing has changed on the site but now the image is substituted using GraphQL instead of a simple webpack-import. At first glance, it may seem that the design is too complex and this only adds problems but let’s not jump to conclusions. For example, if we decided to post thousands of photos on the site we would in any case have to think about optimizing the download of all content. In order not to build your lazy-load process from scratch we would simply add a gatsby-image plugin that would optimize the loading of all images imported using a query.

SEO-optimization using react-helmet

Let’s work with website metadata and to do this we need the following plugins:

yarn add gatsby-plugin-react-helmet react-helmet

react-helmet generates … for HTML pages and in conjunction with Gatsby rendering is a powerful and convenient tool for working with SEO.

import React from "react";
import { graphql } from "gatsby";
import { Helmet } from "react-helmet";

import Layout from "../components/layout";

export default ({
  data: {
    allContentfulArticle: {
      edges: [
        {
          node: {
            title,
            content: {
              childMarkdownRemark: { html }
            }
          }
        }
      ]
    }
  }
}) => {
  return (
    <Layout>
      <Helmet>
        <meta charSet="utf-8" />
        <title>{title}</title>
      </Helmet>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </Layout>
  );
};

export const query = graphql`
  query($slug: String!) {
    allContentfulArticle(filter: { link: { eq: $slug } }) {
      edges {
        node {
          title
          link
          content {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
  }
`;

/src/templates/index.js

Now the site title will always match the name of the article that will significantly affect the issuance of a site in search results. Here you can easily add <meta name=“description” content=“Article description”> with a description of each article separately, allowing the user to understand what the article is about even on the search page. In general, all SEO features are now available and can be managed from one place.

PWA settings

Gatsby is designed to provide first-class performance “out of the box”. It takes care of code splitting and minimization as well as optimization in the form of preloading in the background, image processing, etc. Therefore, the site you create has high performance without any additional settings. These performance features are an important part of supporting a progressive approach to web applications.But in addition to all of the above there are three basic criteria for a site that define it as PWA:

— HTTPS protocol; — presence of manifest.json; — offline access to the site through service workers.

The first point cannot be solved by Gatsby because the domain, hosting, and protocol are a matter of deployment and not development. But I can advise Netlify which easily solves the problem with HTTPS.Let’s move on to other points. To do this install two plugins:

yarn add gatsby-plugin-manifest gatsby-plugin-offline

if (process.env.NODE_ENV === "development") {
  require("dotenv").config();
}

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS translated tutorial`,
        short_name: `GatsbyJS tutorial`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
        icon: `public/favicon.ico`,
        include_favicon: true
      }
    },
    `gatsby-plugin-offline`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`
      }
    },
    `gatsby-plugin-react-helmet`
  ]
};

plugin settings in /src/gatsby-config.js