• Post category:StudyBullet-8
  • Reading time:5 mins read

Use Gatsby to create and publish a static web app.

What you will learn

Setup Gatsby Development Environment

Create a static website with Gatsby

Serve site on Gatsby development server

Build Gatsby Components and Sub components

Utilize props

Link pages of Gatsby site

Publish Static Web App


Static site generators can be defined as software applications that generates HTML pages from templates or components. Light-weight markup language such as markdown-formatted text files are used by most static site generators.ย  Static site generators are different from content management systems such as WordPress and Drupal that are powered by databases.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. Gatsbyโ€™s rich data plugin ecosystem lets you build sites with the data you want .

Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

Get Instant Notification of New Courses on our Telegram channel.

DealsCrown Telegram Banner

Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as โ€œstaticโ€ files which can be deployed easily on dozens of services.

Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers โ€” ready to be delivered instantly to your users wherever they are.

What you will learn includes:

  • Installing Gatsby
  • Creating a Gatsby site
  • Building components
  • Using sub components
  • Using props
  • Linking betweenย  pages
  • Deploying Gatsby Sites


Environment Setup

What is Gatsby
Required Software
What is Node.js
Installing Node
What is NPM
What is Git
Installing Git
Git Configuration
What is Github
Creating GitHub account
Installing Gatsby
Installing Visual Studio Code
Installing Prettier Plugin

Getting Started

Using Gatsby CLI
How Gatsby Works
Core technologies used with Gatsby
Creating a new Gatsby site
Starting Gatsby Server

Building and Publishing Gatsby Web App

Exploring Gatsby Starter Site
Modify the homepage
Building with components
Using Sub Components
Using Props
Linking between pages
Installing Surge
Deploying & Publish Gatsby Site