Gatsby JS: Build PWA Blog with GraphQL, React and WordPress

Gatsby JS: Build PWA Blog with GraphQL, React and WordPress

by Rangel Stoilov
Released November 2019
Publisher(s): Packt Publishing
ISBN: 9781839217593

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Gatsby JS is a free and open source framework based on React that helps developers build blazingly fast, static site generators which can create websites and apps. But what does this mean? Well, it combines the best parts of React, Webpack, React-router, GraphQL, and other front-end tools and creates one amazing tool that developers can enjoy using! With Gatsby.js, you can use modern web tech without the headaches. Everything will be set up, waiting for you to start building.

One of the best things about Gatsby is that you can bring in your own data from headless CMS, APIs, databases, or file systems. There is no limit. You can even source data from WordPress and this makes it very easy for clients to interact with the website you've built for them and add new content. They just need to update their posts on WordPress and that's it. Also, with Gatsby you will not build a website with last decade's tech.

The future of the web is mobile, JavaScript and APIs—the JAMstack. Every website is a web app and every web app is a website. With Gatsby, it is very easy to make your project a static Progressive Web App (PWA). 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. 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

  • How to create amazingly FAST websites with Gatsby.js
  • How to use Gatsby starters
  • How to use global CSS and Module CSS in Gatsby JS
  • How to use GraphQL
  • How to use layouts In Gatsby
  • How to use markdown remark as a source of data
  • How to use WordPress to source data
  • How To SEO-optimize your website
  • How to do a Lighthouse website audit and improve the score
  • How to deploy your website with Netlify
  • How to do Continuous Deployment with GitHub and Netlify
  • How to use webhooks with Netlify, WordPress, and GitHub

Audience

Beginner React JS developers who want to create FAST, SEO-optimized, static websites with Gatsby.js

About The Author

Rangel Stoilov: Rangel Stoilov - Web Developer and Entrepreneur

Rangel has been a web developer for 8 years now. First, he had started with Dreamweaver back in the days and went through Wordpress as a simple way to create websites. After that, he wanted to go further in web development so he started learning different programming languages such as C#, Java & JavaScript. He has a major in Java with Spring Framework and now he is pursuing to deepen his knowledge in different JavaScript frameworks. He also has a passion for Solidity and Smart Contracts as well as the Truffle Framework. He has also dived in the entrepreneurial spirit with Amazon publishing and trading on the Forex market as well as creating automated systems for trading.

Table of contents

  1. Chapter 1 : Environment Settings and First Steps
    1. Introduction
    2. Gatsby Environment Setup and First Project
    3. Setting VSCode To AutoSave
  2. Chapter 2 : Introduction to Gatsby JS
    1. Gatsby Starters
    2. Creating Pages in Gatsby
    3. Navigation
    4. Gatsby Components
  3. Chapter 3 : Advanced Concepts CSS Styles
    1. CSS Global Styles and Module CSS
    2. React-Bootstrap Components
    3. Add Posts to our Homepage
    4. Some Changes to Components
    5. Fixing NavLinks And Footer When Multiple Posts
    6. Adding About Us Page Contact Us Page
    7. Using Layouts in Gatsby
  4. Chapter 4 : GraphQL Markdown Remark Plugin as Source
    1. GraphQL Introduction
    2. Adding Source Plugins
    3. Markdown Transformer Remark Plugin
    4. GraphQL in Component
    5. Mapping GraphQL Posts and Rendering
    6. Creating Slugs for Our Posts
    7. Saving Slugs in Nodes
    8. Iteration Through Our Query
    9. Template Creation and Resolving
    10. Rendering Articles
    11. Fixing ReadMore Links and Logo Homepage
  5. Chapter 5 : WordPress Headless CMS Gatsby
    1. WordPress Source
    2. WordPress Blog Posts Listings
    3. WordPress Single Post Rendering
  6. Chapter 6 : SEO Optimizations
    1. SEO and Metatags
    2. Installing React Helmet
    3. Site Metadata (SEO)
    4. Building SEO Component
    5. SEO Component Finish
    6. SEO in Layouts
  7. Chapter 7 : Deploying Project Optimizing Lighthouse Score
    1. Deploy with Netlify GitHub
    2. Lighthouse Audit
    3. Github-Netlify Webhook Settings
    4. Optimize Accessibility Score
    5. Optimize Accessibility Score V2
    6. Perfect Score and FIX of Excerpts
  8. Chapter 8 : Progressive Web App (PWA) WordPress Webhooks
    1. (PWA) Progressive Web App Configuration
    2. WordPress Webhooks

Product information

  • Title: Gatsby JS: Build PWA Blog with GraphQL, React and WordPress
  • Author(s): Rangel Stoilov
  • Release date: November 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839217593