We may earn an affiliate commission when you visit our partners.
Course image
Rangel Stoilov

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.

Read more

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 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

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

What's inside

Learning objectives

  • 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
  • Show more
  • Show less

Syllabus

Here in this section we will set up our environment and we will install gatsbyJS on our system

In this lecture we will setup our environment and we will install gatsby on our machine. We will also create our first gatsby project

Read more

Here you will learn how to make VS Code auto-save your files in order to create a seamless development work-flow.

Here in this section we will learn about Gatsby starters and how to create our website pages, navigation and we will create our first components

In this lecture we will learn about how we can use Gatsby starters for our projects so we can build upon already provided projects by the community.

In this lecture we are going to learn how we can create pages in Gatsby.

In this lecture we are going to learn how we can use navigation links in Gatsby and how we can use a function to navigate the user as well as the Link component.

In this lecture we are going to learn how to create a react components in our Gatsby JS project.

In this section we are going to make our current project a little more attractive and we are going to learn how we can use CCS stylesheets globally and also for our components.

In this lecture we are going to learn about how we can use global CSS and module CSS in our components.

In this lecture we are going to learn about react components and how we can use them in our project.

In this lecture we are going to learn how we can create blog post to our posts.

In this lecture we are going to do some changes to our gatsbyjs components

In this lecture we are going fix some issues on our blog

In this lecture we are going to add an about us page and a contact us page

In this lecture we are going to learn how we can use layouts for our gatsby js projects

GraphQL & Markdown Remark Plugin As Source

In this lecture we are going to introduce how we can use GraphQL

In this lecture we are going to learn how to install Gatsby plugins

In this lecture we are going to talk about markdown remark in Gatsby JS

In this lecture we are going to learn how to use GraphQL in our gatsby components

In this lecture we are going to map our posts that we receive from GraphQL and we are going to render them

In this lecture we are going to create slugs for our blog posts

In this lecture we are going to learn how to save our slugs in our graphql node

In this lecture we are going to iterate through our graphql query and print the results

In this lecture we are going to create our BlogpostLayout template and we are going to resolve it in our gatsby-node.js file

In this lecture we are going to render our articles using the layout that we have created and the markdown files

In this lecture we are going to fix our Read More links in our gatsby js blog

In this section we are going to learn how we can use WordPress as to source our blog posts
Wordpress Sourse: IMPORTANT UPDATE!

In this lecture we are going to learn how we can use wordpress plugin in gatsby

In this lecture we are going to list our blog post on our home page

In this lecture we are going to render each and every post to a separate page

In this section we will learn how to improve our SEO and how to add metatags to our head section of our pages

In this lecture we are going to learn about metatags and how they affect SEO

In this lecture we are going to learn how to install react helmet so we can add metatags

In this lecture we are going to learn about siteMetadata that we can add to our gatsby-config.js file and how we can use it

In this lecture we are going to create and SEO component that we are going to use later on in our layouts

In this lecture we are going to finish our SEO component

In this lecture we are going to add our SEO component in our layouts

Deploying Project & Optimizing Lighthouse Score

In this lecture we are going to learn how we can deploy our project with Netlify and GitHub

In this lecture we are going to audit our website with the industry standard Lighthouse auditing tool from Google

In this lecture we are going to create a webhook that will tricker a Netlify rebuild when we push a new version of our app to GitHub

In this lecture we are going to optimize our accessibility score that was low in the audit

In this lecture we are going to continue improving our score so we can make it perfect

In this lecture we are going to check our perfect score and we are going to fix the excerpts for our posts that are not showing

Progressive Web App (PWA) & WordPress Webhooks

In this lecture we are going to make our website a progressive web application (PWA)

In this lecture we are going to create a webhook so whenever we create/edit or delete a post on our WordPress website, our application will be rebuilt automatically from Netlify

BONUS SECTION
BONUS LECTURE

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Emphasizes real world implementation of front-end technologies in building high-quality websites and apps
Provides hands-on experience with popular tools and frameworks such as Gatsby JS, React, GraphQL, and Markdown Remark
Covers advanced topics such as SEO optimization, Progressive Web App (PWA) development, and continuous deployment
Offers a comprehensive overview of the JAMstack architecture, ideal for building fast and secure websites
Guided learning experience with step-by-step instructions and video demonstrations
Suitable for intermediate-level developers with some experience in front-end development

Save this course

Save Gatsby JS: Build PWA Blog With GraphQL And React + WordPress to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Gatsby JS: Build PWA Blog With GraphQL And React + WordPress with these activities:
Review Markdown syntax
Markdown will be the main tool used to define and format content for websites you build with Gatsby. Take some time to refresh yourself on the basics of Markdown before diving into this course.
Browse courses on Markdown
Show steps
  • Review cheat sheet of Markdown syntax.
  • Read an article or blog post that uses Markdown formatting.
Follow a Gatsby tutorial to create a personal website
Building a personal website is a great way to showcase your skills and experience. Use this activity to follow a tutorial and create your own personal website.
Show steps
  • Find a Gatsby tutorial for creating a personal website.
  • Follow the tutorial step-by-step.
  • Add your own personal touches to the website.
  • Deploy your website to Netlify.
Connect with experienced Gatsby JS developers
Seek guidance and support from experts to enhance your learning and progress
Show steps
  • Identify potential mentors in the Gatsby JS community
  • Reach out to them and express your interest in learning from them
  • Establish regular communication and seek their advice
Ten other activities
Expand to see all activities and additional details
Show all 13 activities
Review course syllabus and materials
Familiarize yourself with the course structure, content, and requirements to understand expectations and plan accordingly.
Show steps
  • Obtain the course syllabus and any additional materials.
  • Review the syllabus thoroughly, noting key dates, assignments, and grading criteria.
  • Gather any recommended textbooks, readings, or online resources.
  • Set up a dedicated study space and organize your materials.
Create a Gatsby project using a starter
Using Gatsby starters can save you time and effort when creating new projects. Become comfortable using them by completing this drill.
Show steps
  • Open your terminal and install Gatsby CLI via npm.
  • Create a new Gatsby project using a starter.
  • Add some content to your project.
  • Run `gatsby develop` to start your project.
Explore online tutorials on Gatsby JS
Supplement your understanding of Gatsby JS by seeking out additional resources and tutorials that provide practical guidance and demonstrations.
Show steps
  • Search for online tutorials or courses on Gatsby JS.
  • Select reputable sources and platforms.
  • Follow along with the tutorials, taking notes and practicing the techniques shown.
  • Apply what you learn to your own projects or assignments.
  • Share your experiences and insights with classmates or in online forums.
Create a blog post using Gatsby and Markdown
Blogging is a great way to share your knowledge and insights with others. Use this activity to create a blog post about a topic you're passionate about.
Show steps
  • Choose a topic for your blog post.
  • Write your blog post using Markdown.
  • Add your blog post to your Gatsby project.
  • Deploy your blog post to Netlify.
Complete online coding exercises on Gatsby JS
Practice coding in Gatsby JS regularly to improve your proficiency and understanding of the concepts
Show steps
  • Find online coding exercises for Gatsby JS
  • Solve the exercises regularly
  • Review your solutions and learn from your mistakes
Join a study group
Collaborate with peers to discuss course material, share ideas, and enhance understanding through collective learning.
Show steps
  • Find a study group or create one with classmates.
  • Establish a regular meeting schedule and location.
  • Prepare for each session by reviewing the assigned material.
  • Actively participate in discussions, ask questions, and share insights.
  • Summarize key concepts and takeaways after each session.
Create a portfolio of projects
Building a portfolio of projects you create in Gatsby will provide you with a library of work to showcase your skill level and capabilities.
Browse courses on Portfolio
Show steps
  • Choose a theme for your portfolio
  • Create a GitHub account, if you don't have one already.
  • Install and configure Gatsby on your machine.
  • Create a repository for your portfolio.
  • Create a new Gatsby project for each project in your portfolio.
  • Deploy each project to Netlify.
  • Add a link to each project in your portfolio.
Build a portfolio website
Create a practical application of the skills learned in the course by building a website that showcases your abilities.
Browse courses on Website Development
Show steps
  • Choose a website builder or coding framework.
  • Design the layout and structure of your website.
  • Develop the website's functionality and content.
  • Test and refine the website.
  • Publish the website and share it with others.
Build a personal blog with Gatsby JS
Create a real-world project to apply the concepts of Gatsby JS and showcase your skills
Show steps
  • Plan your blog's content and structure
  • Set up Gatsby JS and build the blog
  • Create and publish blog posts
  • Deploy your blog and share it with others
Solve hands-on Gatsby JS exercises
Reinforce your understanding of Gatsby JS concepts by actively solving hands-on exercises and challenges.
Show steps
  • Find online coding challenges or exercises related to Gatsby JS.
  • Attempt to solve the exercises on your own.
  • Review solutions or ask for assistance if needed.
  • Reflect on the solutions and identify areas for improvement.
  • Repeat the process to enhance your problem-solving skills.

Career center

Learners who complete Gatsby JS: Build PWA Blog With GraphQL And React + WordPress will develop knowledge and skills that may be useful to these careers:
Front-End Engineer
Front-End Engineers are responsible for the design and implementation of the user interface (UI) of a website. The UI is what users see and interact with, so it's important that it's well-designed and easy to use. Gatsby.js is a popular framework for building fast and responsive websites, and this course will teach you how to use it to create your own websites and apps.
UI/UX Designer
UI/UX Designers are responsible for the overall user experience of a website or app. They work with Front-End Engineers to create UIs that are both visually appealing and easy to use. This course will teach you the basics of UI/UX design, as well as how to use Gatsby.js to implement your designs.
Web Developer
Web Developers are responsible for the development and maintenance of websites. They work with Front-End Engineers and UI/UX Designers to bring websites to life. This course will teach you the basics of web development, as well as how to use Gatsby.js to build your own websites.
Software Engineer
Software Engineers are responsible for the design, development, and maintenance of software applications. They work with Front-End Engineers, UI/UX Designers, and Web Developers to create software that meets the needs of users. This course will teach you the basics of software engineering, as well as how to use Gatsby.js to build your own software applications.
Data Analyst
Data Analysts are responsible for collecting, analyzing, and interpreting data. They use data to identify trends, patterns, and insights that can be used to improve decision-making. This course will teach you the basics of data analysis, as well as how to use GraphQL to query and manipulate data.
Business Analyst
Business Analysts are responsible for analyzing business processes and identifying opportunities for improvement. They work with stakeholders to gather requirements, define solutions, and implement changes. This course will teach you the basics of business analysis, as well as how to use GraphQL to query and manipulate data.
Project Manager
Project Managers are responsible for planning, executing, and controlling projects. They work with stakeholders to define project scope, develop project plans, and track project progress. This course will teach you the basics of project management, as well as how to use Gatsby.js to build project websites.
Technical Writer
Technical Writers are responsible for creating documentation for software and other technical products. They work with engineers and other stakeholders to gather information, write documentation, and maintain documentation. This course will teach you the basics of technical writing, as well as how to use Gatsby.js to build documentation websites.
Content Writer
Content Writers are responsible for creating written content for websites, blogs, and other marketing materials. They work with stakeholders to gather information, write content, and edit content. This course will teach you the basics of content writing, as well as how to use Gatsby.js to build content-driven websites.
SEO Specialist
SEO Specialists are responsible for optimizing websites for search engines. They work with stakeholders to identify keywords, create content, and build links to improve website visibility. This course will teach you the basics of SEO, as well as how to use Gatsby.js to build SEO-friendly websites.
Social Media Manager
Social Media Managers are responsible for managing social media accounts for businesses and organizations. They work with stakeholders to create content, engage with followers, and track social media performance. This course will teach you the basics of social media marketing, as well as how to use Gatsby.js to build social media-driven websites.
Email Marketer
Email Marketers are responsible for creating and sending email campaigns to promote products and services. They work with stakeholders to identify target audiences, create email content, and track email campaign performance. This course will teach you the basics of email marketing, as well as how to use Gatsby.js to build email-driven websites.
Marketing Manager
Marketing Managers are responsible for planning and executing marketing campaigns. They work with stakeholders to identify target audiences, develop marketing strategies, and track marketing campaign performance. This course may be useful for those who want to gain a better understanding of how to use Gatsby.js to build marketing websites.
Product Manager
Product Managers are responsible for planning and developing products. They work with stakeholders to identify customer needs, define product features, and track product performance. This course may be useful for those who want to gain a better understanding of how to use Gatsby.js to build product websites.
Sales Manager
Sales Managers are responsible for managing sales teams. They work with stakeholders to identify sales targets, develop sales strategies, and track sales performance. This course may be useful for those who want to gain a better understanding of how to use Gatsby.js to build sales websites.

Reading list

We've selected ten books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Gatsby JS: Build PWA Blog With GraphQL And React + WordPress.
Provides comprehensive coverage of Gatsby, from its basic concepts and installation process to advanced topics such as building and deploying PWA websites with Gatsby.
Teaches React from the ground up. It covers the core concepts, such as components, state, and props. The book also discusses advanced topics, such as Redux and React Router.
Teaches React Native, a framework for building native mobile apps with React. It covers the basics of React Native, as well as how to use it to build complex apps.
Teaches how to improve the performance of a website. It covers the basics of web performance, as well as how to use specific techniques to improve performance.
Teaches the basics of continuous delivery, a software development process that helps to deliver software faster and more reliably.
Provides a comprehensive guide to Search Engine Optimization (SEO), covering its principles, techniques, and best practices, offering valuable insights for optimizing Gatsby-built websites for improved search visibility and organic traffic.
Teaches the fundamentals of software development. It covers topics such as design, testing, and debugging.
Comprehensive guide to software development. It covers topics such as requirements gathering, design, coding, testing, and deployment.
Classic work of software development. It discusses the challenges of software development and offers advice on how to overcome them.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Gatsby JS: Build PWA Blog With GraphQL And React + WordPress.
Creating a Personal Site with Gatsby
Most relevant
Quasar V1: Cross-Platform Apps (with Vue 2, Vuex &...
Most relevant
Creating a Multi Page App using HTML & CSS
Most relevant
Testing and Deploying GatsbyJS Applications: Playbook
Most relevant
Creating Plugins, Themes, and Starters with GatsbyJS 3:...
Most relevant
Optimizing and Deploying a Website
Creating a Quiz Game using Vanilla JavaScript
Introduction To Website Development Technologies
Rapid Website Design with Bootstrap
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser