Освойте современные инструменты веб‑разработки и создавайте быстрые, безопасные и масштабируемые статические сайты, сочетая мощь Gatsby.js, React, GraphQL и Wordpress. Этот курс поможет вам уверенно перейти от динамических CMS к гибридному JAMStack‑подходу, оптимизируя скорость и производительность ваших проектов.
Что вы изучите в этом курсе
Курс последовательно проведет вас через все этапы создания статического сайта на Gatsby JS с использованием Wordpress как headless‑CMS. Программа подходит тем, кто уже знаком с основами React и хочет перейти на новый уровень разработки.
Gatsby JS: основы и практическая работа
Установка и начальная настройка Gatsby.
Создание страниц, роутинг и работа с компонентами.
Оптимизация производительности и организация проекта.
Использование Wordpress как headless‑CMS
Развертывание Wordpress локально.
Настройка REST и GraphQL‑плагинов.
Работа с контентом: записи, страницы, меню, ACF‑поля и медиа.
GraphQL и запрос данных
Генерация статических страниц на основе данных из Wordpress.
Создание шаблонов, привязка к React‑компонентам.
Использование GraphiQL для формирования и тестирования запросов.
Практический проект: создание портфолио‑сайта
В рамках курса вы разработаете полноценный сайт‑портфолио, который будет полностью собран на Gatsby JS и генерироваться из данных Wordpress. Вы пройдете весь путь — от структуры контента до рендеринга страниц на стороне сервера.
Статическая генерация и оптимизация
Автоматическое создание страниц на основе GraphQL‑запросов.
Настройка изображений и работа с Gatsby Image.
Использование styled‑components для стилизации проекта.
Развертывание и публикация
Вы научитесь правильно развертывать статические сайты и связывать их с headless‑CMS для автоматического обновления контента.
Netlify и автоматические билды
Настройка окружения для продакшена.
Интеграция Netlify с Wordpress для автоперестроения сайта.
Контроль производительности и ошибок после развертывания.
Почему стоит пройти этот курс
Gatsby.js — это один из самых быстрых способов создать сайт, благодаря предварительной генерации страниц и их доставке через глобальное CDN. Вы научитесь работать с современными инструментами, которые востребованы в разработке коммерческих и корпоративных проектов.
Преимущества обучения
Глубокое понимание Gatsby, GraphQL и headless‑CMS.
Практическая разработка реального проекта.
Современный стек и навыки, актуальные на рынке.
Присоединяйтесь, чтобы вывести свои навыки React‑разработки на новый уровень и научиться создавать невероятно быстрые и гибкие сайты с помощью Gatsby JS и Wordpress!
Урок 1.00:00:43
Introduction
Урок 2.00:06:37
Overview of the project / website we'll be building
Урок 3.00:02:18
Setup WordPress with Local by Flywheel
Урок 4.00:09:48
[OLD] - MAMP and Wordpress setup, and introduction to the Wordpress API
Урок 5.00:07:34
Gatsby setup
Урок 6.00:06:01
Querying Wordpress data with the GraphiQL browser tool
Урок 7.00:07:39
Querying Wordpress data with GraphQL from within Gatsby
Урок 8.00:09:22
Generating Gatsby pages dynamically from Wordpress pages & posts
Урок 9.00:03:12
Fixing the 404 not-found on root URL
Урок 10.00:04:14
Recap of gatsby-node.js
Урок 11.00:07:23
Removing Wordpress frontend + create Wordpress menu
Урок 12.00:04:44
Recap gatsby-config.js + querying Wordpress menus with GraphiQL
Урок 13.00:07:40
Creating the Menu component in Gatsby
Урок 14.00:05:54
Refactoring the menus GraphQL query
Урок 15.00:09:57
Styling the Menu with React styled-components
Урок 16.00:07:06
Retrieving and rendering the Wordpress site title and tagline
Урок 17.00:06:01
Registering custom "portfolio" post type in Wordpress
Урок 18.00:03:00
Adding example Portfolio items
Урок 19.00:09:15
Query custom "portfolio" post type with GraphQL
Урок 20.00:04:02
Auto-generate portfolio pages in Gatsby
Урок 21.00:07:10
Fixing styling of portfolio items and portfolio pages
Урок 22.00:06:22
Create custom page template in Wordpress to render portfolio items
Урок 23.00:08:25
Set ACF and add some example data to a Portfolio post
Урок 24.00:04:06
Query ACF from within Gatsby and render ACF data
Урок 25.00:00:53
Course update message
Урок 26.00:03:00
UI fixes and cleanup (part 1)
Урок 27.00:05:50
UI fixes and cleanup (part 2)
Урок 28.00:01:22
Blog demo
Урок 29.00:05:41
Creating blog post data and building the graphql query
Урок 30.00:08:24
Calculating the number of pages
Урок 31.00:08:08
Creating and rendering the blog list & pagination
Урок 32.00:06:03
Add "Blog" to the main menu & improve pagination styling
Урок 33.00:09:03
Creating and linking to blog post pages
Урок 34.00:07:15
Creating a server on Digital Ocean & setting up subdomain
Урок 35.00:05:50
WordPress setup
Урок 36.00:06:20
Finishing WordPress migration
Урок 37.00:08:59
Automatically re-build Gatsby site whenever Wordpress content changes
Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф