Gatsby.js — SASS, Plugins, Themes, and Data Sources

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Styling with Sass/SCSS

We can use SASS and SCSS to style our components in Gatsby projects.

We just have to create .sass and .scss files and they’ll be compiled to .css automatically.

Working with Plugins

We can add plugins by install the required packages and then add them to our config.

For instance, if we want to add the gatsby-source-filesystem plugin, we run:

npm install gatsby-source-filesystem

Then in gatsby-config.js , we add:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

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

to add the plugin.

Creating a New Plugin

We can create our own plugin by using the Gatsby plugin starter.

We run:

gatsby new my-plugin https://github.com/gatsbyjs/gatsby-starter-plugin

in our project folder to add the plugin.

Then in gatsby-config.js , we add our plugin by writing:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  plugins: [
    require.resolve(`../my-plugin`),
  ],
}

Themes

Gatsby lets us abstract Gatsby config with themes.

We run:

npm install gatsby-theme-blog

to install the gatsby-theme-blog into our project folder.

To add the theme, we add:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {
        /*
        - basePath defaults to `/`
        */
        basePath: `/blog`,
      },
    },
  ],
}

into gatsby-config.js .

Also, we can create a new project with the given theme by running:

gatsby new {your-project-name} https://github.com/gatsbyjs/gatsby-starter-blog-theme

to create our Gatsby project with the gatsby-starter-blog-theme .

Data Sourcing

We can add our own data sources into our Gatsby project.

To do this, we write:

gatsby-node.js

exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  const people = [
    { name: "james", age: 20 },
    { name: "mary", age: 23 },
  ]
  people.forEach(({ name, age }) => {
    const node = {
      name,
      age,
      id: createNodeId(`person-${name}`),
      internal: {
        type: "person",
        contentDigest: createContentDigest({ name, age }),
      },
    }
    actions.createNode(node)
  })
}

We add the people array entries as a data source so that they can be queries in the GraphQL API.

The actions.createNode method lets us create the data that we can query.

createNodeId creates the ID for the entry.

createContentDigest creates a stable content digest from a string or an object.

Now when we go to http://localhost:8000/__graphql, we can make the following query:

query MyQuery {
  allPerson {
    nodes {
      id
      name
      age
    }
  }
}

to get the data.

We should get something like:

{
  "data": {
    "allPerson": {
      "nodes": [
        {
          "id": "48340d0f-e756-5cc7-abb2-c6d83821835e",
          "name": "james",
          "age": 20
        },
        {
          "id": "d2eaea74-1415-52b0-b732-2ac106ec6f55",
          "name": "mary",
          "age": 23
        }
      ]
    }
  },
  "extensions": {}
}

returned as the response.

Conclusion

We can use SASS or SCSS, and add plugins, themes, data sources into our Gatsby project.