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
- 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
1yarn add gatsby-plugin-prefetch-google-fonts
- Modify
gatsby-config.js
. Inside the plugins array, add
1{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 },15}
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';23class Question extends React.Component {4 render() {5 return <h3> Lets go for a <FaBeer />? </h3>6 }7}
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 },4}
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.