loading...
Cover image for Getting Started with Gatsby

Getting Started with Gatsby

yayaritaa_56 profile image Aya Ayari ・2 min read

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 links on the page. Also uses code splitting during compilation in a way that WEBPACK imports the dependencies on separate bundles.

Gatsby vs NextJs vs create-react-app

The choice of the framework depends on the project itself.

  • Gatsby: Static HTML and can be used when you need good SEO and you don't have frequent data updates
  • NextJs: Server Side rendering if you need good SEO and data is updating frequently exp: facebook
  • CRA: Client side rendering when you don't need good SEO exp: private dashboards

Getting Started on Gatsby:

  1. Install Global CLI:
npm install -g gatsby-cli
Enter fullscreen mode Exit fullscreen mode
  1. Create new Site:
gatsby new my-gatsby-app
Enter fullscreen mode Exit fullscreen mode
  1. Start development server:
gatsby develop
Enter fullscreen mode Exit fullscreen mode

Gatsby project Structure

Once you create you Gatsby application you will find this structure of the project:

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
Enter fullscreen mode Exit fullscreen mode
  • 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 a page template. “Src” is a convention for “source code”.
    • pages: become pages automatically with paths based on their file name
    • templates: 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 the Gatsby node APIs (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 APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
  • gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

Gatsby’s data layer is powered by GraphQL and it allows you pull data into your components

Posted on by:

Discussion

pic
Editor guide