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