How Gatsby works?

Introduction

Gatsby is a static site generator and web apps. It is a react-based open-source framework. As we must know about how Gatsby Works? It is quite appropriate if;

  • We are building portfolio sites
  • Blogs
  • Company home pages.

Below are two modes in Gatsby which are being used for compiling a site.

  1. Develop: In develop mode, we run with the gatsby develop command
  2. Build: In build mode, we run with gatsby build

Gatsby enables developers to speedy fetch and renders content from nearly any content or data source. We can build sites with Gatsby;

  • A single stack
  • No matter where our content lives.
  • This allows us to take advantage of the rich content workflows of our CMS.
  • Therefore, it would not be locked into a CMS-specific development ecosystem.
  • Fail to remember code freezes
  • Gatsby decouples content and data alteration from the development workflow.

In this post, we’ll explain how Gatsby’s lifecycle works and what the Gatsby particular files are for.

Description

Gatsby pulls data from sources we give and generates a website or app for us. It needs Node to be installed to run the Bootstrap and Build sequences. Gatsby utilizes Webpack to build and start a development server amongst other things under the hood. Gatsby has three phases

  1. Gathering data sources
  2. Building
  3. Deploying

Gathering phase

Building phase

  • Once data is gathered then we may access it from source code with the help of graphql.
  • We  may not mutate the existing data

Deploying phase

  • We can build the app after the development.
  • We may host that build files in any static web host sites like;
  • Amazon S3
  • Netlify
  • Github pages
  • now. sh and many more.

Gatsby’s lifecycle

Main features

  • Supports Reactjs: Gatsby supports Reactjs the would help us to build reusable components and make things easier to control.
  • Webpack: This will help to create minified and optimized bundles.
  • SCSS and CSS-in-JS:  Gatsby has support for SCSS, CSS-in-JavaScript libraries, allowing us to manage styles better.
  • Responsive images: Resizing images consisted of devices.
  • More than 600 Gatsby plugins: There are many gatsby plugins available for data sources/responsive-images/offline support/Mdx and analytics etc.
  • Supports react and npm packages: We may install any npm package and can use it in the app.
  • GraphQL: Gatsby gathers data from data sources and makes it available through GraphQL. The data sources could be anything databases/json/XML/wordpress or text files etc.
  • Gives a Smoother experience to the user:  It would add smoothness to the app with its features and aims at full app-like experience borrowing from PWA.

Gatsby specific files

gatsby-config.js

gatsby-node.js

gatsby-ssr.js

gatsby-browser.js

Getting started with gatsby

Pre-requisites

Installing gatsby cli

npm i -g gatsby-cli
  • We should understand about Gatsby starters before creating a site.
  • Starters are just boilerplates.
  • There are hundreds of boilerplates or starters available from gatsby’s official site.
  • We can select Gatsby starter as;

Creating a new gatsby site from starter

gatsby new {name_of_your_site} {starter-repo-link}
  • When gatsby new is completed then run the below commands
cd {name_of_your_site}
gatsby develop
  • The project structure would be like this:
/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-browser.js
  • At last, now we may check our site at localhost:8000.

For more details visit:  https://www.technologiesinindustry4.com