4th Jun 2021

How Can a Designer Start a Project in Gatsby ?

Web

Written By, Prachi Prajapati

Overview

A Modern frontend framework used for creating static sites and applications. Gatsby is widely known as a static site generator.It generates static HTML pages using a combo of templates, components & data.

In this blog article we will learn how to create and set up a project in gatsby.

What is Gatsby ? How it will Work

As I mentioned earlier Gatsby is a static site generator. Now, if you have a question about what a static site generator is? and how it will work? so, a static site generator is an application that creates HTML pages from templates or components and a given content source.

Gatsby works as an alternative to database-driven content management systems, such as WordPress, contentful and Drupal.

Generally, content is managed and stored in a database.
You can see the workflow :

gatsby-workflow
Source

What is GraphQL?

Gatsby uses a combination of React and GraphQL.

Now, if you are not familiar with GraphQL, It is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.

It provides a complete and understandable description of the data in your API, It also gives clients the power to ask for exactly what they need and nothing more, enables powerful developer tools.

It uses many different data sources for the website like WordPress, Shopify, contentful, firebase, file system.
gatsby-graphQL-layer
Gatsby Combines all sources into a unified GraphQL layer, for this you need to do a couple of things :

Install and Setup

First of all, we need to install gatsby cli (you will need to have Node 8.16.0 or Node 10.16.0 or the latest version on your local system)

If you get a permission error you have to include sudo as a prefix

To create a Project called Gatsby-Demo, run the following command on your terminal

To run your website

Add custom style in Gatsby

To add custom style in our Gatsby project for that, you need to create your stylesheet as below folder structure
gatsby-css
Now include this custom style.css in pages/index.js

Add Reactstrap and Bootstrap

To add an external CSS framework like bootstrap you need to install it first through npm

After installing bootstrap include reactstrap
Now we will install reactstrap from NPM. For this use the following command.

To include Bootstrap CSS in our project write the following code in a gatsby-browser.js file.

gatsby-bootstrap
Now we can use all components of reactstrap from https://reactstrap.github.io/components/alerts/
To get more idea of reactstrap you can also refer this blog https://blog.yudiz.com/how-a-designer-can-start-react-js/

Add sass in Gatsby project

Create a style.scss file in src > scss folder, you can refer below screenshot
gatsby-scss
Sass will compile .sass and .scss files to .css files for you, so you can write your stylesheets with more advanced features.
To Add sass into gatsby project First, include the sass gatsby plugin called “gatsby-plugin-sass” from npm.

After that include the plugin in your “gatsby-config.js” file.

You can refer below screenshot,
gatsby-package-add
Write your stylesheets as .sass or .scss files and import them as we include custom style.css.

or

Gatsby Js and React Js

Create React App and Gatsby site uses React and allows clients to make apps more quickly and efficiently. Apart from that, there are some important differences.
Gatsby is a framework of React so there are some functionalities and file structures like node-modules, public, src are the same as react folder structure. The difference is that Gatsby adds some more configuration files that makes it easy to use.

You can see the folder structure of react and Gatsby
React Js Folder structure
react-folder-structure
Gatsby Js Folder structure
gatsby-folder-structure
Routing
Gatsby provides a component and a navigate function to help you direct users through pages on your site.
Create React App will require you to eject on another workaround to edit the webpack configuration. Gatsby allows custom configuration of webpack from the gatsby-node.js file.
For More Information you can refer official website of gatsby https://www.gatsbyjs.com/docs/

Conclusion

Hoping that this blog article will help you to start a project in Gatsby. You can also use styling in Scss or sass also. We will learn how to make components , link it with it’s internal page and connect WordPress with Gatsby.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd