udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Gatsby JS: Создание PWA Блога с GraphQL и React + WordPress
Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
★5 (всего оценок - 9)
Продолжительность
3 ч 44 мин
Категория
GatsbyКоличество уроков
41 Видео
Дата добавления
10 янв. 2021 г., 13:40
Язык
Английский
Дата выхода
9 апр. 2020 г., 03:00
Дата обновления
29 апр. 2026 г., 09:16
Этот курс — ваш практический проводник в создание современного, сверхбыстрого PWA‑блога на основе Gatsby JS, React, GraphQL и WordPress. Вы узнаете, как объединить лучшие инструменты фронтенда в единую оптимизированную JAMstack‑архитектуру и создавать сайты, которые работают быстрее, чем традиционные веб‑проекты.
Что такое Gatsby JS и почему он так популярен
Gatsby JS — это мощный React‑фреймворк для генерации статических сайтов, способный создавать молниеносные, безопасные и SEO‑оптимизированные веб‑проекты. Он объединяет React, Webpack, GraphQL и другие технологии, предлагая идеальную среду для быстрой разработки.
Преимущества использования Gatsby
- Молниеносная скорость загрузки благодаря предгенерации страниц.
- Готовая оптимизация под SEO и Lighthouse.
- Гибкая работа с данными — от API до WordPress как Headless CMS.
- Полная интеграция с React для построения компонентов.
- Идеальная основа для PWA — ваш сайт работает как приложение.
Почему Gatsby идеально подходит для Headless WordPress
Gatsby позволяет использовать WordPress только как инструмент управления контентом, а фронтенд создавать на современном стеке. Клиентам достаточно обновлять записи в WordPress — Gatsby автоматически пересоберёт сайт и загрузит новые данные.
Преимущества Headless WordPress + Gatsby
- Максимальная производительность благодаря JAMstack.
- Лучшая безопасность — WordPress скрыт от прямого доступа.
- Автоматические обновления контента через Webhooks.
- Глобальное CDN‑размещение через Netlify.
Что вы изучите в этом курсе
Обучение построено на практике: шаг за шагом вы создадите собственный полноценный PWA‑блог с поиском, SEO‑оптимизацией, динамическими страницами и интеграцией с WordPress.
Основы Gatsby и создание проекта
- Установка Gatsby и создание первого проекта.
- Использование Gatsby Starters.
- Создание страниц и маршрутизация.
- Работа с компонентами и реиспользуемыми макетами.
Работа с данными через GraphQL
- Запросы GraphQL внутри Gatsby.
- Использование Markdown Remark.
- Создание блога на основе Markdown (JAMstack).
Интеграция WordPress как Headless CMS
- Подключение WordPress API.
- Получение записей и динамическая генерация страниц.
- Автоматизация пересборки через Webhooks.
SEO и оптимизация
- Создание собственного SEO‑компонента.
- Добавление метатегов и оптимизация структуры страниц.
- Тестирование и улучшение через Google Lighthouse.
- Как добиться идеального Lighthouse Score.
Деплой и автоматизация
- Развертывание проекта на Netlify и GitHub.
- Настройка Continuous Deployment.
- Создание PWA и оптимизация Service Worker.
Кому подойдёт этот курс
- Фронтенд‑разработчикам, которые хотят изучить Gatsby и JAMstack.
- Тем, кто работает с WordPress и хочет перейти на современные технологии.
- Разработчикам, стремящимся создавать быстрые SEO‑оптимизированные сайты.
- Тем, кто хочет освоить PWA и ускорить свои проекты.
Итог
Курс даст вам полное понимание, как создавать быстрые, безопасные и современные веб‑проекты на Gatsby JS — от структуры компонентов до полной автоматизации обновлений через WordPress и Netlify. После прохождения вы сможете разрабатывать производительные PWA‑сайты, которые будут выделяться качеством и скоростью.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:00:00Gatsby Environment Setup And First Project
- Урок 2. 00:01:24Setting VSCode To AutoSave
- Урок 3. 00:04:11Gatsby Starters
- Урок 4. 00:06:07Creating Pages in Gatsby
- Урок 5. 00:07:43Navigation
- Урок 6. 00:05:14Gatsby Components
- Урок 7. 00:06:41CSS Global Styles And Module CSS
- Урок 8. 00:11:33React-Bootsrap Components
- Урок 9. 00:05:00Add Posts to our Homepage
- Урок 10. 00:09:53Some Changes to Components
- Урок 11. 00:03:42Fixing NavLinks And Footer When Multiple Posts
- Урок 12. 00:07:51Adding About Us Page & Contact Us Page
- Урок 13. 00:09:03Using Layouts in Gatsby
- Урок 14. 00:04:54GraphQL Introduction
- Урок 15. 00:06:14Adding Source Plugins
- Урок 16. 00:07:49Markdown Transformer Remark Plugin
- Урок 17. 00:05:20GraphQL in Component
- Урок 18. 00:04:38Mapping GraphQL Posts And Rendering
- Урок 19. 00:07:34Creating Slugs For Our Posts
- Урок 20. 00:03:08Saving Slugs In Nodes
- Урок 21. 00:03:13Iteration Through Our Query
- Урок 22. 00:05:01Template Creation And Resolving
- Урок 23. 00:07:00Rendering Articles
- Урок 24. 00:02:26Fixing ReadMore Links And Logo Homepage
- Урок 25. 00:05:06WordPress Source
- Урок 26. 00:04:34WordPress Blog Posts Listings
- Урок 27. 00:05:25WordPress Single Post Rendering
- Урок 28. 00:02:30SEO and Metatags
- Урок 29. 00:07:05Installing React Helmet
- Урок 30. 00:03:12Site Metadata (SEO)
- Урок 31. 00:08:38Building SEO Component
- Урок 32. 00:05:17SEO Component Finish
- Урок 33. 00:10:46SEO in Layouts
- Урок 34. 00:07:21Deploy with Netlify & GitHub
- Урок 35. 00:03:17Lighthouse Audit
- Урок 36. 00:02:08Github-Netlify Webhook Settings
- Урок 37. 00:03:09Optimize Accessibility Score
- Урок 38. 00:07:00Optimize Accessibility Score V2
- Урок 39. 00:03:17Perfect Score And FIX of Excerpts
- Урок 40. 00:05:51(PWA) Progressive Web App Configuration
- Урок 41. 00:04:03WordPress Webhooks
Автор - udemy
Комментарии