Udemy

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

立即報名
  • 8,767 名學生
  • 更新於 4/2020
4.1
(236 個評分)
CTgoodjobs 嚴選優質課程,為職場人士提升競爭力。透過本站連結購買Udemy課程,本站將獲得推廣佣金,有助未來提供更多實用進修課程資訊給讀者。

課程資料

報名日期
全年招生
課程級別
學習模式
修業期
3 小時 50 分鐘
教學語言
英語
授課導師
Rangel Stoilov
評分
4.1
(236 個評分)
2次瀏覽

課程簡介

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

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

課程章節

  • 9 個章節
  • 43 堂課
  • 第 1 章 Environment Settings And First Steps
  • 第 2 章 Introduction To Gatsby JS
  • 第 3 章 Advanced Concepts & CSS Styles
  • 第 4 章 GraphQL & Markdown Remark Plugin As Source
  • 第 5 章 WordPress Headless CMS & Gatsby
  • 第 6 章 SEO Optimizations
  • 第 7 章 Deploying Project & Optimizing Lighthouse Score
  • 第 8 章 Progressive Web App (PWA) & WordPress Webhooks
  • 第 9 章 BONUS SECTION

課程內容

  • 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

評價

  • J
    James
    4.0

    I learned a lot about what to do, but don't understand all of why we do things. I will have to do further research and learning on my own time to understand the material well enough to create things on my own.

  • A
    Accelerone Accelerone
    3.5

    The overall experience was good. But the course content can be improved by adding more real projects and scenarios.

  • J
    Jean Wang
    4.5

    Very good structured material! Well explanation! Valuable information! I start the course with little basic knowledge of React and medium knowledge of WordPress, learn a lot about the key info to turn a WordPress site into JAMStack site.

  • F
    Fabio Callegari
    4.0

    Rangel is very practical and direct. It's a quick course that covers most things you need to know to get started with Gatsby, GraphQL and Wordpress.

立即關注瀏覽更多

本網站使用Cookies來改善您的瀏覽體驗,請確定您同意及接受我們的私隱政策使用條款才繼續瀏覽。

我已閱讀及同意