Gatsby JS 5 | Build a personal blog using gatsby.js 5

Name: Gatsby JS 5 | Build a personal blog using gatsby.js 5
Rating: 4.3 (380 reviews)

Learn Gatsby JS 5 and GraphQL to increase your knowledge in modern web development.

Created byTech Vista

Last updated 10/2025

English

What you'll learn

Gatsby Fundamentals
React Hooks API with functional components
GraphQL and the built in GraphQL editor
Components, props and state
JSX syntax and expressions
Markdown
Styled Components

Course content

7 sections • 50 lectures • 3h 56m total length

Introduction - What is Gatsby3:13

Create custom hook useSiteConfigQueryHook7:41
Create Header Component3:21
Styling Header Component4:35
Create Menu Component4:21
Styling Menu Component7:37
Style the menu component with styled components, defining nav and ul rules, hiding the menu on mobile, adding hover and active states, and applying a 768px media query for responsiveness.
Create Hamburger Component2:28
Styling Hamburger Component10:00
Style a responsive hamburger menu in a Gatsby JS 5 personal blog using styled components, building three lines with span and before/after, and a mobile toggle that becomes a cross.
Header - Mobile Menu3:13
Header - Mobile Menu - Styles8:42
Style the mobile menu with style components, override global styles to disable body scroll when the menu opens, and apply responsive, themed styles with transitions for navigation.
Creating Home Page3:09
Creating Page Query13:01
Discover using page queries with variables for pagination in Gatsby JS 5, test queries in the GraphQL playground, and build markdown posts with front matter and a reading time field.
Creating Image Query5:20
Learn how to optimize images in Gatsby by resizing to 200x200, using the built-in image optimization, querying image data with GraphQL, and using formats like WebP and Avif.
Home Banner Structure1:48
Creating custom hook for banner image1:48
Creating Component for Background Image1:20
Styling Background Image Component1:20
Styling Home Banner Component6:05
Style the home banner component of a Gatsby blog using styled-components, configuring banner and text wrappers with layouts, colors from global styles, and a read more button with hover effects.
Creating Blog Post Component5:12
Build a blog post card component in Gatsby 5 by importing link and image helpers, using calendar and clock icons, and rendering slug, title, date, reading time, and excerpt.
Styling Blog Post Card4:47
Finishing Home Page3:21
Finish home page by mapping posts from edges, destructuring node to pass slug, title, date, reading time, extra, and image to blog post card, and fix reading time prop capitalization.

ModeProvider and Context4:27
Gatsby Browser API2:48
Theme Button and Styles3:47
Implementing Theme Switch Button3:40
Creating Slugs for Posts and Pages2:01
Create slugs for posts and pages in a Gatsby blog by implementing slug code in gatsby-node.js, adjusting the base path to content for posts and pages.
Pages and Posts Graphql Query5:25
Creating Page and Post templates10:32
Dynamically create pages and posts8:09
Creating Pagination in Node3:02
Home page template3:45
Creating Page Navigation Component5:21
Styling Page Navigation3:31
Resources0:08

Requirements

Basic knowledge about React, Javascript and Web Development before enrolling this course

Description

Learn to build blazing fast apps and websites with React using Gatsby 5, a modern static PWA (Progressive Web App) generator! Starting from scratch, you’ll learn to build a full-featured blog application step by step.

Gatsby 5 is a React-based, GraphQL-powered static site framework. It combines the best of React, webpack, React Router, GraphQL, and other cutting-edge front-end tools to deliver an exceptional developer experience. Unlike traditional static site generators, Gatsby 5 goes beyond static — offering powerful features like SSR (Server-Side Rendering), DSG (Deferred Static Generation), and blazing-fast build performance.

In this course, you’ll explore how to:

Build pages, components, and layouts in Gatsby 5
Manage and optimize assets efficiently
Style your sites using Styled Components and other modern CSS techniques
Fetch and manage data using GraphQL
Create dynamic pages and posts from Markdown
Automatically optimize and load images using the updated gatsby-plugin-image
Deploy and configure your Gatsby 5 site as a progressive web app

By the end, you’ll be ready to use Gatsby 5 in real-world projects — whether for blogs, portfolios, or full-scale web apps.

If you:

Already know some React and want to take your skills to the next level
Enjoy project-based, fast-paced learning
Want to stay ahead in modern front-end development
Aim to become a top contender for high-demand developer roles

Then this Gatsby 5 Mastery Course is perfect for you!

Learn Gatsby 5 — the future-ready framework for modern web development.

Who this course is for:

Front End Developers
Anyone who wants to learn GatsbyJS

Gatsby JS 5 | Build a personal blog using gatsby.js 5

What you'll learn

Explore related topics

Course content

Introduction & Overview1 lecture • 3min

Project Setup5 lectures • 26min

Technology Stack (Optional)5 lectures • 15min

Defining Global Styles3 lectures • 19min

Building the Layout3 lectures • 16min

Navigation & Header20 lectures • 1hr 39min

Implementing Light & Dark Mode13 lectures • 57min

Requirements

Description

Who this course is for: