gatsby | cookbook | react

Gatsby - Cookbook

This cookbook contains recipes that demonstrate how to solve common problems while working with Gatsby.

Edson Frainlar
Edson FrainlarApril 26, 2019 · 2 min read · Last Updated:

I <3 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

Import the font css on your site main css file.

Using gatsby-plugin-prefetch-google-fonts.

  • Install the plugin gatsby-plugin-prefetch-google-fonts
1yarn add gatsby-plugin-prefetch-google-fonts
  • Modify gatsby-config.js. Inside the plugins array, add
2 resolve: `gatsby-plugin-prefetch-google-fonts`,
3 options: {
4 fonts: [
5 {
6 family: `Oswald`,
7 subsets: [`latin`],
8 },
9 {
10 family: `Open Sans`,
11 variants: [`400`, `700`]
12 },
13 ],
14 },

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.

1npm install react-icons --save

And in your react component

1import { FaBeer } from 'react-icons/fa';
3class Question extends React.Component {
4 render() {
5 return <h3> Lets go for a <FaBeer />? </h3>
6 }

Disqus integration in a Gatsby website

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

1yarn add disqus-react

And in your post component

1import { DiscussionEmbed } from 'disqus-react'

Define the Disqus configuration like

1const disqusConfig = {
2 shortname: `yourDisqusShortName`,
3 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

1<DiscussionEmbed {...disqusConfig} />

More recipes will be added as I explore Gatsby.

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Edson Frainlar

Written byEdson Frainlar
Mission-driven Full-stack Developer with a passion for developing KTern, Dev Collaboration, and teaching. Curious to explore Quantum Information and Computing.

Is this page helpful?

Related ArticlesView All

Related VideosView All

GatsbyJS & Analytics: How to Add Google Analytics 4.0 To a Gatsby Site Using Gtag