Главная страницаКатегория gatsbyGatsby JS: Создание PWA Блога с GraphQL и React + WordPress

Gatsby JS: Создание PWA Блога с GraphQL и React + WordPress

Name: Gatsby JS: Создание PWA Блога с GraphQL и React + WordPress
Price: 13 USD
Rating: 5 (9 reviews)

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

udemy

★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:00
Gatsby Environment Setup And First Project
Урок 2. 00:01:24
Setting VSCode To AutoSave
Урок 3. 00:04:11
Gatsby Starters
Урок 4. 00:06:07
Creating Pages in Gatsby
Урок 5. 00:07:43
Navigation
Урок 6. 00:05:14
Gatsby Components
Урок 7. 00:06:41
CSS Global Styles And Module CSS
Урок 8. 00:11:33
React-Bootsrap Components
Урок 9. 00:05:00
Add Posts to our Homepage
Урок 10. 00:09:53
Some Changes to Components
Урок 11. 00:03:42
Fixing NavLinks And Footer When Multiple Posts
Урок 12. 00:07:51
Adding About Us Page & Contact Us Page
Урок 13. 00:09:03
Using Layouts in Gatsby
Урок 14. 00:04:54
GraphQL Introduction
Урок 15. 00:06:14
Adding Source Plugins
Урок 16. 00:07:49
Markdown Transformer Remark Plugin
Урок 17. 00:05:20
GraphQL in Component
Урок 18. 00:04:38
Mapping GraphQL Posts And Rendering
Урок 19. 00:07:34
Creating Slugs For Our Posts
Урок 20. 00:03:08
Saving Slugs In Nodes
Урок 21. 00:03:13
Iteration Through Our Query
Урок 22. 00:05:01
Template Creation And Resolving
Урок 23. 00:07:00
Rendering Articles
Урок 24. 00:02:26
Fixing ReadMore Links And Logo Homepage
Урок 25. 00:05:06
WordPress Source
Урок 26. 00:04:34
WordPress Blog Posts Listings
Урок 27. 00:05:25
WordPress Single Post Rendering
Урок 28. 00:02:30
SEO and Metatags
Урок 29. 00:07:05
Installing React Helmet
Урок 30. 00:03:12
Site Metadata (SEO)
Урок 31. 00:08:38
Building SEO Component
Урок 32. 00:05:17
SEO Component Finish
Урок 33. 00:10:46
SEO in Layouts
Урок 34. 00:07:21
Deploy with Netlify & GitHub
Урок 35. 00:03:17
Lighthouse Audit
Урок 36. 00:02:08
Github-Netlify Webhook Settings
Урок 37. 00:03:09
Optimize Accessibility Score
Урок 38. 00:07:00
Optimize Accessibility Score V2
Урок 39. 00:03:17
Perfect Score And FIX of Excerpts
Урок 40. 00:05:51
(PWA) Progressive Web App Configuration
Урок 41. 00:04:03
WordPress Webhooks

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198

Комментарии