Gatsby - Cookbook

I 💟 Gatsby. This article contains some recipes which will be useful if you are into Gatsby for your next static site. Recipes are,

• Using Google fonts in Gatsby
• Using icons like Font Awesome in Gatsby
• Disqus integration in a Gatsby website

Using Google fonts in Gatsby#

Import the font css on your site main css file.

Using gatsby-plugin-prefetch-google-fonts.

• Install the plugin gatsby-plugin-prefetch-google-fonts

yarn add gatsby-plugin-prefetch-google-fonts

• Modify gatsby-config.js. Inside the plugins array, add

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: `Oswald`,
        subsets: [`latin`],
      },
      {
        family: `Open Sans`,
        variants: [`400`, `700`]
      },
    ],
  },
}

You can change the font family and variants or number of fonts in the above configuration according to your website needs.

Using icons like Font Awesome in Gatsby#

Using react-icons.

Add it to your packages.

npm install react-icons --save

And in your react component

import { FaBeer } from "react-icons/fa";

class Question extends React.Component {
  render() {
    return (
      <h3>
        {" "}
        Lets go for a <FaBeer />?{" "}
      </h3>
    );
  }
}

Disqus integration in a Gatsby website#

Since Gatsby is built on top of React, we can use the React package for Disqus.

yarn add disqus-react

And in your post component

import { DiscussionEmbed } from "disqus-react";

Define the Disqus configuration like

const disqusConfig = {
  shortname: `yourDisqusShortName`,
  config: { identifier: slug, title },
};

Here identifier is the unique id for your post, it can be anything.

And now you can render the Disqus section by adding

<DiscussionEmbed {...disqusConfig} />

More recipes will be added as I explore Gatsby.