Getting Started With Gatsby

Getting Started With Gatsby.

What is Gatsby?

Gatsby is react-based open source framework and fast static websites generator. It allows to create static HTML at build time and gives the browser a complete page.

Gatsby uses preload to speed up loading of resources required by the page: all the necessary CSS, data and its core JavaScript needed to run the page and starts prefetching all the links on the page. Also uses code splitting during compilation in a way that WEBPACK imports the dependencies on separate bundles.

1. Getting Started on Gatsby:

Install Global CLI:

npm install -g gatsby-cli

Create new Site:

gatsby new my-gatsby-app

Start development server:

gatsby develop

2. Gatsby Project Structure

Once you create you Gatsby application you will find this structure of the project: (see images below)

src folder:

This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or page template. "src" is a convention for "source code".

pages: become pages automatically with paths based on their file name

template: contains templates for programmatically creating pages.

html: need to be modified if you want to insert custom HTML into the or of each page on your site

static: It will not be processed by webpack.

gatsby-config.js:

This is the main configuration file for a Gatsby site.

This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you'd like to include, etc.

gatsby-node.js:

This file is where Gatsby expects to find any usage of Gatsby expects to find any usage of the Gatsby node API's (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

gatsby-ssr.js:

This file is where Gatsby expects to find any usage of the Gatsby server-side rendering API's (if any). These allow customization/extension of default Gatsby settings affecting the browser.

gatsby-browser.js:

This file is where Gatsby expects to find any usage of the Gatsby browser API's (if any). These allow customization/extension of default Gatsby settings affecting the browser.

Visit psdwizard.com for

more Frontend Development

tutorials and services.