Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Gatsby.js

Gatsby JS: Build PWA Blog With GraphQL And React + WordPress

Create Gatsby JS Progressive Web App With GraphQL And React + WordPress & Add Jam Stack To Your Skills
Rating: 3.2 out of 53.2 (210 ratings)
8,566 students
Created by Rangel Stoilov
Last updated 4/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How To Create Amazingly FAST Websites With Gatsby JS
  • How To Use Gatsby Starters
  • How To Use Global CSS & 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 Score
  • How To Deploy Your Website With Netlify
  • Howe To Do Continuous Deployment With GitHub + Netlify
  • How To Use Webhooks With Netlify, WordPress And GitHub

Course content

9 sections • 43 lectures • 3h 50m total length

  • Preview05:37
  • Preview01:23

  • Gatsby Starters
    04:10
  • Creating Pages in Gatsby
    06:06
  • Navigation
    07:42
  • Preview05:13

  • CSS Global Styles And Module CSS
    06:40
  • React-Bootsrap Components
    11:32
  • Add Posts to our Homepage
    04:59
  • Some Changes to Components
    09:52
  • Fixing NavLinks And Footer When Multiple Posts
    03:41
  • Adding About Us Page & Contact Us Page
    07:50
  • Using Layouts in Gatsby
    09:02

  • GraphQL Introduction
    04:53
  • Adding Source Plugins
    06:13
  • Markdown Transformer Remark Plugin
    07:48
  • GraphQL in Component
    05:19
  • Mapping GraphQL Posts And Rendering
    04:37
  • Creating Slugs For Our Posts
    07:33
  • Saving Slugs In Nodes
    03:07
  • Iteration Through Our Query
    03:12
  • Template Creation And Resolving
    05:00
  • Rendering Articles
    06:59
  • Fixing ReadMore Links And Logo Homepage
    02:25

  • Wordpress Sourse: IMPORTANT UPDATE!
    00:21
  • Preview05:05
  • WordPress Blog Posts Listings
    04:33
  • WordPress Single Post Rendering
    05:24

  • SEO and Metatags
    02:29
  • Installing React Helmet
    07:04
  • Site Metadata (SEO)
    03:11
  • Building SEO Component
    08:37
  • SEO Component Finish
    05:16
  • SEO in Layouts
    10:45

  • Deploy with Netlify & GitHub
    07:20
  • Preview03:16
  • Github-Netlify Webhook Settings
    02:07
  • Optimize Accessibility Score
    03:08
  • Optimize Accessibility Score V2
    06:59
  • Preview03:16

  • (PWA) Progressive Web App Configuration
    05:50
  • WordPress Webhooks
    04:02

  • BONUS LECTURE
    00:26

Requirements

  • Knowledge in ReactJS
  • Knowledge in JavasScript ES6

Description

Gatsby JS is a free and open source framework based on React that helps developers build blazing fast static site generator which can create websites and apps.

But what does this even mean?

Well... it combines together the best parts of React, Webpack, React-router, GraphQL, and other front-end tools in to one and creates an amazing tool enjoyable for developers!

With Gatsby JS you can use modern web tech without the headache. Everything will be setup and will be waiting for you to start building.

One of the best things about Gatsby is that you can bring your own data from headless CMS, APIs, Databases or the file system.

There is no limit there.

You can source data even from WordPress

And this makes it very easy for clients to interact with the website that you have 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.

So if you are wondering what you will learn in this course here is the list below

In this course you will learn the following:

  • The Essentials Of Gatsby JS & How To Install It and Create First Project

  • How To Use Gatsby Starters To Create Your Project

  • How to Create Pages In Gatsby And How to Link Them Correctly

  • How To Separate Elements Into Components And How To Use Them

  • How To Create Page Layouts Which Can Be Used As Templates

  • How To Use GraphQL

  • How To Add Sourcing Plugins

  • How To Use Markdown Remark For Creating You Pages/Posts

  • How To Create A Blog Using Gatsby & Markdown Remark (JAM Stack)

  • How To Use WordPresss As Headless CMS

  • How To Add Metatags And Improve SEO Of Website

  • How To Create SEO Component And Use It In Layouts

  • How To Deploy Your Project To Netlify And Github

  • How To Make Continuous Deployment With Netlify Webhooks

  • How To Audit Your Website With The Lighthouse (Industry Standard by Google)

  • How To Create Lighthouse Perfect Score

  • How To Convert Your Website To A Progressive Web App (PWA)

  • How To Create WordPress Webhooks To Redeploy Your Project On Netlify When You Create/Update/Delete A Post

You would also be able to ask questions inside the course if you get stuck somewhere.

I will be there to help you out whenever you need.

Now, I want my students to always feel comfortable when they make a purchase, that is why I have uploaded multiple free videos for you to view at any time.

Also I offer you a 30 day money back guarantee, no questions asked!
So you have nothing to risk and everything to gain from this course!

It’s time to take action. This offer won’t last forever

Who this course is for:

  • Beginner React JS Developers Who Want To Create FAST, SEO Optimized, Static Websites With Gatsby JS

Featured review

Slavoljub Popovic
Slavoljub Popovic
113 courses
79 reviews
Rating: 5.0 out of 5a year ago
Great Course ... if you are intermedia developer in couple hours you can learn a lot about gatsby... saves you weeks and if you are new you everything is explained well ... in short time you can start building your own apps

Instructor

Rangel Stoilov
Web Developer & Entrepreneur
Rangel Stoilov
  • 4.0 Instructor Rating
  • 1,419 Reviews
  • 57,502 Students
  • 6 Courses

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

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.