99
Lectures
12
Hours

What is Gatsby JS?

GatsbyJS is a React-based, GraphQL powered static site generator. It uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.

Are there any requirements?

Basic React JS knowledge.

What this course cover?

This course is covering all you need to start working on your own Gatsby JS projects. Students of this course will be learning everything by working on real features building their own Blogging application.

Gatsby JS has a rich ecosystem and requires an initial time investment. That’s why I created this guide where you can find everything in one place.

Short Curriculum

  • Basics of Gatsby JS and initialization of the project. Explanation of folder structure and instruction on how to create new pages.

  • Templating system, Different types of stylings, and ways how to pass data to the pages.

  • Basics of GraphQL, construction of custom queries, resolvers, arguments, and custom types.

  • Node architecture and creation of new nodes.

  • Plugin system. Explanation of source and transformer plugins. Sourcing data from a local filesystem and rendering markdown files into actual HTML pages.

  • Filesystem route API

  • Pagination feature. Construction of queries to get pagination data to render static pagination pages.

  • Search feature. Explanation on why do you need a search index and what is a search engine?

  • SEO search engine optimization improvements. Use of different meta tags and data to get the best search results. Usage of Open graph tags.

  • RSS feature. Explanation of really simple syndication and creation of XML file. Subscribing to the blog page through RSS aggregators.

  • Deployment to Gatsby cloud. Pushing the code to Github repo. Previewing the application on the internet.

  • PWA features. Explanation of progressive web application, offline support, and installation of the app like a native one.

  • Context theme provider. How to use context providers and what is the best spot to implement them.


Requirements

  • Minimal Javascript or other programming language knowledge

  • React JS Basics

Course curriculum

  • 1

    Introduction

  • 2

    Project Initialization

  • 3

    Styles & Templates

    • Section Intro

      FREE PREVIEW
    • Build Gatsby

    • About Stylings

    • Module stylings

    • Page from template

    • Pass data to page

    • Iterate posts

    • Post detail page

  • 4

    GraphQL & Gatsby

    • Section Intro

      FREE PREVIEW
    • GraphQL

    • Gatsby custom types & queries

    • More Types

    • Non nullable and array

    • Nested fields

    • Args and filter

    • Complex filter

    • Fetch posts in resolve

    • Get posts through GraphQL

    • Create node

    • Get node to page

  • 5

    Data sources

    • Section Intro

      FREE PREVIEW
    • Source plugin

    • Source data to blogs page

    • Trasnformer plugin

    • Markdown page

    • Construct slug

    • Create blog pages

    • Single Query

    • Display html in blog detail

    • Changes Slug

    • Removes obsolete files

  • 6

    Application revamp

    • Section Intro

      FREE PREVIEW
    • Adding bulma

    • Header and Footer

    • Featured Blog

    • Blog Listing

    • Sorting parameters

    • Markdown stylings

    • Blog styling fix

  • 7

    Filesystem route API

    • Fillesystem route api

    • Filesystem aditional explanations

  • 8

    Pagination

  • 9

    Search Feature

    • Section Intro

      FREE PREVIEW
    • Search Implementation

    • Search index

    • Search Engine

    • Search engine additional info

    • Get value from input

    • Search Improvements

    • Performing Search

    • Navigate to searched page

    • Search Finished

    • Add search index dep

  • 10

    Search engine optimization

  • 11

    Rss

  • 12

    Deployment

    • Pushing to Github

    • Deployment

    • Fixing ENV variables

  • 13

    PWA Features

  • 14

    Theming

  • 15

    Bonus Features

    • Maskable icon

    • Sitemap

    • Twitter Message

    • Rss Feature Improvement

  • 16

    Finishing the app

    • Course End

Instructor(s)

Software Engineer

Filip Jerga

Hey, I'm Filip Jerga! I've been deep in the software engineering world for over 10 years, building all sorts of cool stuff—from software for ultrasound devices with C++ to modern apps with React and Angular. I even grabbed a Master's in AI along the way. What really drives me now isn't just coding; it's making complex programming simple and fun for you. I've poured all my real-world experience and a passion for teaching into these courses. My goal is to help you think like a pro, tackle tough problems, and build practical skills you'll truly use to create amazing things.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture, just download the correct version of the project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Gatsby JS Developer's Guide - Important Parts & Blog App"

    €19,00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    €19,00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    €190,00 / year

    Cancel Anytime!

    Get started now