💻 Gatsbyjs Workshop

This repo is used to do code-lab for the Gatsbyjs for beginners to teach beginners what Gatsbyjs is and what it can do.

📅 Event Details:

• Name : Gatsbyjs for Beginners

• Date : 16th June 2019

• Event Link : DrupalCampDelhi 2019

• Venue : JNU, New Delhi

• Name : Gatsbyjs for beginners

• Date : 19th May 2019

• Event Link : JSLovers

• Venue : Microsoft, Bangalore

About me

My Name is Neha Sharma. I have more than 8 years of experience in UI. Currently I am working as Technical lead. I am the organizer of JSLovers community.

• Twitter
• Linkedin
• Email

📋 Agenda

• 0️⃣ What is Gatsbyjs
• 1️⃣ Project walkthough
• 2️⃣ Installation and preparing your system
• 3️⃣ Folder walkthrough
• 4️⃣ Codelab Kickoff
• 5️⃣ Data Creation
• 6️⃣ Read Data from APIGraphQL
• 7️⃣ Read Data from Markdown
• 8️⃣ Deploy - Firebase , Netlify or any your favourite cloud. [optional]

Session-:zero: : Introduction to Gatsbyjs [Theory]

In this part we will go through the theory part of Gatsbyjs. We are going to understand what Gatsbyjs is, features, usecases, under the hood, what SSG is and yes we are going to also talk about - Gatsbyjs VS Nextjs.

• What is Gatsbyjs
• Features of Gatsbyjs
• Where to use Gatsbyjs
• Where not to use Gatsbyjs
• Gatsbyjs vs Nextjs
• Plguins ecosystem

Session-:one: : Project Walkthrough [Theory]

We will build a fictional project based on the ISRO's Projects. We will try to build an application which have information about the launches and projects

• Homepage
• About Us
• Contact Us
• Services
• Other Pages

Session-:two: : Installation and preparing your system [Hands-on]

This will be the first step towards the Gatsbyjs coding world. We are going to install the Gatsbyjs CLI.

Pre-requsists

• Github Account
• Azure Account or any prefer cloud account
• Any IDE

Install the following

• nodejs
• Gatsbyjs

Create the folder and install in that

• Gatsbyjs CLI

Session-:three: : Folder walkthrough [Theory]

We will cover the folder structure of the CLI.

• package.json
• config
• src
• pages
• components

Session-:four: : Code-Time [hands-on]

We will create the components and pages

Session-:five: : Read the content by API [hands-on]

Gatsbyjs is all about the content. We will look into first way of handling the data through the API or stub data

Session-:six: : Preapre the content - markdown [hands-on]

The other way of getting the data in Gatsbyjs is by Markdown files (MDX). We will go through, how you can create the MDX and read the data from them.

Session-:seven: : Read the content by GraphQL [hands-on]

How to read the content by GraphQL?

Session-:eight: : Deploy [hands-on]

This step is optional.

What's Next:question:

How to create Gatsbyjs plugins?

♥️ Contribution and Collabration

To build great things we need help. If you see any issue please open an issue. If you want to add any new feature please raise PR. Thank you for reading so far. I appreciate your time.

Thank you for Coming!! Follow @ twitter.com/hellonehha