Table of Contents

Elevating React Web Development with Gatsby

Contributors

About the author

About the reviewer

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Part 1: Getting Started

Chapter 1: An Overview of Gatsby.js for the Uninitiated

Technical requirements

A brief history of the static web

What is Gatsby?

Community

Sourcing content from anywhere

Building tooling you already know

Supercharging web performance

Gatsby use cases

Documentation sites

Online courses

SaaS products

Design agencies and photo-heavy sites

Gatsby's competitors

Setting up a project

Node.js version 14.15.0+

Gatsby command-line interface

Directory and package setup

Framework files and folders

Creating your first few pages

Summary

Chapter 2: Styling Choices and Creating Reusable Layouts

Technical requirements

Styling in Gatsby

Vanilla CSS

Sass

Tailwind (utility-first CSS framework)

CSS in JS

Picking a styling tool

Styling with CSS

Creating a wrapper component

Using gatsby-browser.js

Verifying our implementation

Styling with Sass

Styling with Tailwind.css

Styling with styled-components

Creating a reusable layout

Site header

Site footer

Layout component

Organization with atomic design

Summary

Chapter 3: Sourcing and Querying Data (from Anywhere!)

Technical requirements

Data in Gatsby

Introducing GraphQL

GraphQL for Gatsby

Using GraphiQL

Using constructed GraphQL queries

Sourcing data from local files

Site metadata

Markdown

MDX

Sourcing data from a Headless CMS

GraphCMS

Prismic

Summary

Chapter 4: Creating Reusable Templates

Technical requirements

Creating templates and programmatic page generation

Blog post template

Blog preview template

Tag page template

Search functionality

Summary

Chapter 5: Working with Images

Technical requirements

Images on the web

Images in Gatsby

The StaticImage component

The GatsbyImage component

Overriding the gatsby-plugin-image defaults

Sourcing images from CMS

Sourcing images from GraphCMS

Sourcing images from Prismic

Summary

Part 2: Going Live

Chapter 6: Improving Your Site's Search Engine Optimization

Technical requirements

Introducing SEO

On-page search engine optimization

Creating an SEO component

Exploring meta previews

Open Graph metadata

Twitter metadata

Merging tags

Validating tags

Learning about XML sitemaps

Hiding your site from search engines

Summary

Chapter 7: Testing and Auditing Your Site

Technical requirements

Exploring unit testing

Testing simple components

Testing the SEO component

Testing Gatsby page components

Adding Git hooks for tests

Auditing core web vitals

Using Chrome's lighthouse tool

Using the web-vitals JavaScript package

Summary

Chapter 8: Web Analytics and Performance Monitoring

Technical requirements

Introducing website analytics

Privacy

Implementing page analytics

Adding Google Analytics

Using Fathom Analytics

Monitoring the performance of your site

Using Sentry.io analytics

Summary

Chapter 9: Deployment and Hosting

Technical requirements

Understanding build types

Common build errors

Your pre-deployment checklist

Platforms for deploying hybrid builds

Deploying to Gatsby Cloud Hosting

Platforms for deploying static builds

Deploying to Netlify

Deploying to Render

Deploying to Firebase

Serving a Gatsby site with reduced user access

Summary

Part 3: Advanced Concepts

Chapter 10: Creating Gatsby Plugins

Technical requirements

Understanding Gatsby plugins

Introducing local plugin development

Debugging local plugins

Creating source plugins

Creating theme plugins

Contributing to the plugin ecosystem

Pre-publish checklist

Publishing a plugin

Summary

Chapter 11: Creating Authenticated Experiences

Technical requirements

Routing and authentication in React applications

Private routes

Authentication using client-only routes within Gatsby

Site-wide authentication using context within Gatsby

Summary

Chapter 12: Using Real-Time Data

Technical requirements

Introduction to web sockets

Socket.io in action

Live site visitor count

Gaining further insights with rooms

Summary

Chapter 13: Internationalization and Localization

Technical requirements

Understanding localization and internationalization

Implementing routes for internationalization

Page translations for programmatic pages

Providing locale translations for single-instance pages

Summary

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you