Java, UX, HTML, CSS, WEB-design

Создание безголового веб-сайта WordPress с помощью GatsbyJS

Краткое описание по статье Создание безголового веб-сайта WordPress с помощью GatsbyJS

Название: Создание безголового веб-сайта WordPress с помощью GatsbyJS . Краткое описание: [ad_1] ⭐ Недавно мы рассмотрели растущую тенденцию . Дата публикации: 23.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

Недавно мы рассмотрели растущую тенденцию «безголовых» конфигураций WordPress. Этот термин описывает процесс создания контента в WordPress, а затем выталкивания его для использования в другом приложении. По сути, это работает для разделения (или разделения) передней и задней частей.

Одной из наиболее захватывающих функций этой установки является возможность создавать контент в привычных рамках CMS и использовать его для подачи практически всего, что вы хотите. Среди наиболее распространенных направлений для этого контента будут мобильные приложения, прогрессивные веб-приложения и статические веб-сайты.

Сегодня основное внимание будет уделено последнему. Мы проведем вас через процесс использования безголовой установки WordPress для создания статического веб-сайта. Для этого мы будем использовать GatsbyJS, платформу на основе React, которая может работать в тандеме с WordPress.

Результатом будет базовый статический веб-сайт, который будет работать невероятно быстро, позволяя нам сохранить возможности WordPress по управлению контентом. Давайте начнем!

НЕОГРАНИЧЕННЫЕ ЗАГРУЗКИ: более 500 000 ресурсов WordPress и дизайна

Подпишитесь на Envato Elements и получите неограниченное количество загрузок, начиная всего с $16,50 в месяц!

Беглый взгляд на GatsbyJS

GatsbyJS стал популярным инструментом для создания статических веб-сайтов. Он предлагает большую гибкость, а также ряд плагинов и стартеров, которые помогут вашему проекту работать довольно быстро. Это выходит далеко за рамки WordPress, с возможностью работы с рядом различных CMS и других источников данных.

Но для наших целей совместимость с WordPress — это именно то, что нам нужно. И хотя есть некоторые стартовые приложения для WordPress, мы используем очень простой подход. Стартеры выдающиеся, но есть некоторые зависимости, которые могут сбить с толку новичков.

Домашняя страница GatsbyJS.

Требования

Чтобы использовать GatsbyJS, вам необходимо ознакомиться с командной строкой. И вам потребуется, среди прочего, установить Node.js, Git и инструмент CLI Gatsby на вашем веб-сервере или локальном компьютере (именно там мы создаем нашу демонстрацию).

Вам может быть интересно: как настроить локальную машину? Хотя мы не будем вдаваться в подробности здесь, есть несколько способов сделать это. Например, XAMMP (который мы используем) — отличный вариант, который будет работать в Mac OS, Windows и Linux. По сути, это вопрос загрузки нужного сервера, его установки, а затем нажатия командной строки.

Доступно руководство, которое проведет вас через различные программные пакеты, необходимые для вашей конкретной среды.

Другим важным требованием является, конечно же, установка WordPress. Чтобы передать данные из WordPress на ваш статический веб-сайт GatsbyJS, вы можете использовать REST API по умолчанию, встроенный в CMS.

Внутри WordPress

На нашем сайте WordPress мы создали несколько тестовых страниц вместе с тестовой записью в блоге. Вам не нужно делать ничего больше, чем это при первом эксперименте.

Кроме того, мы поместили наши страницы в меню под названием «Главное меню».

По умолчанию меню WordPress недоступны в REST-API. Установка плагина WP REST API Menus сделает свое дело. Мы также будем использовать это для автоматического создания меню на нашем статическом сайте.

Наш безголовый сайт WordPress.

Создание нового веб-сайта GatsbyJS

Итак, мы установили необходимое программное обеспечение командной строки на наш локальный компьютер и создали новую установку WordPress (с установленным и активированным плагином WP REST API Menus) на удаленном веб-хосте.

Согласно документации GatsbyJS, нам нужно запустить команду, чтобы создать новый веб-сайт. Сначала перейдите в каталог, в котором вы хотите построить (мы используем C:gatsby на машине с Windows 10). Мы немного отклонимся от их заметок, так как будем использовать собственное название сайта. “1wd-static” (что создаст папку с тем же именем).

Вот команда для создания этого нового веб-сайта:

gatsby new 1wd-static

Выполнение команды занимает немного времени, так как она устанавливает пакет. Когда процесс завершится, мы сможем перейти на этот новый сайт через командную строку. В нашем случае это:

cd 1wd-static

Хорошо. Мы находимся в каталоге, где был создан наш статический веб-сайт.

Далее мы установим плагин gatsby-source-wordpress. Это позволяет нам получать данные из WordPress:

npm install gatsby-source-wordpress

Кроме того, будут установлены gatsby-plugin-sitemap и gatsby-plugin-sass, поскольку они являются зависимостями для демо-кода, который мы будем использовать позже:

npm install gatsby-plugin-sitemap gatsby-plugin-sass

Теперь пришло время перевести GatsbyJS в режим разработки:

gatsby develop

Если все прошло гладко, теперь вы сможете просматривать сайт в своем веб-браузере, посетив http://localhost:8000

Пока что на сайте нет ничего особенного, просто базовая страница с контентом по умолчанию. Нам все еще нужно настроить некоторые файлы, чтобы заставить GatsbyJS общаться с нашим сайтом WordPress.

Начальная домашняя страница GatsbyJS.

Совет: если вам нужно разъяснение процесса, ознакомьтесь с этим полезным руководством в официальном блоге GatsbyJS.

Перемещение содержимого сайта из WordPress в GatsbyJS

Следующий шаг в нашем путешествии включает в себя получение контента из нашей установки WordPress и передачу его на наш новый статический веб-сайт GatsbyJS.

Первая часть процесса заключается в настройке некоторых файлов GatsbyJS.

Загрузите и замените файлы

Прежде чем двигаться дальше, вам нужно загрузить копию примера сайта GatsbyJS и заменить существующие файлы. Некоторые файлы были изменены по сравнению со стандартными, чтобы получать страницы и записи из установки WordPress. Существует также репозиторий файлов GitHub, если вы хотите осмотреться.

Исходный код любезно предоставлен Тимом Смитом, который написал руководство для блога GatsbyJS, на которое мы ссылались выше.

Варианты изменения:

Предполагая, что вы загрузили необходимые файлы выше, есть только одно место, где вам нужно внести изменения. Открыть gatsby-config.js, расположенный в корневой папке статического веб-сайта.

Перейдите в раздел, который гласит: resolve: "gatsby-source-wordpress" и взгляните на следующее:

baseUrl: "gatsbypress.iamtimsmith.com", // Change to your WordPress URL, without the ‘http://’.
protocol: "https", // Use https if you have SSL installed on your WordPress website. Otherwise, use http.
hostingWPCOM: false, // Keep as ‘false’ UNLESS you are hosting with WordPress.com.

Чуть ниже ищите:

searchAndReplaceContentUrls: {
sourceUrl: "http://gatsbypress.iamtimsmith.com", // Replace with the full URL of your WordPress website.
replacementUrl: "https://localhost:8000", // The local URL of your GatsbyJS website – this should be fine as-is.
},

Тестирование

Теперь, когда мы настроили gatsby-config.js, пора тестировать! Чтобы GatsbyJS распознал обновленные файлы, которые мы установили, нам необходимо:

  1. Перезапустите локальный сервер;
  2. В командной строке перейдите в папку, в которой находится наш статический веб-сайт, /1wd-static/

Затем введите следующую команду:

gatsby develop

После запуска GatsbyJS тестовый сайт снова будет доступен по адресу: http://localhost:8000

Результаты

Оно работает! Статический веб-сайт теперь отображает наши сообщения в блоге на главной странице, а верхнее меню навигации направляет посетителей на наши второстепенные страницы. Обратите внимание, что название сайта также отражает то, что мы установили в WordPress.

Сайт еще не готов для публичного использования, но у нас есть отличная основа для дальнейшего развития.

Веб-сайт GatsbyJS с использованием контента из WordPress.

Движение вперед

Теперь, когда у нас есть основы безголовой конфигурации, можно добавить много вкусностей. Самый очевидный из них — дизайн. Ознакомьтесь с документацией, чтобы узнать, как оформить веб-сайт GatsbyJS и использовать тему.

Еще одна вещь, отсутствующая в нашей демонстрации, — это изображения, которые рассматриваются в разделе «Добавление изображений на сайт WordPress».

Наконец, если вы ищете полное и подробное руководство по процессу создания сайта, ознакомьтесь с этим пошаговым руководством. Он проведет вас через настройку, разработку и запуск сайта.

Последние мысли

Опыт создания безголовой конфигурации WordPress был полон взлетов и падений, иногда даже немного обескураживающих. Этого следовало ожидать, так как почти всегда есть кривая обучения при экспериментировании с новыми инструментами. Однако, как только вы упростите процесс и лучше поймете, что делает GatsbyJS, все улучшится.

При этом стоит потратить время на чтение документации. Настройка GatsbyJS намного сложнее, чем установка одного WordPress. Казалось, что одно неверное движение привело к большому количеству сообщений об ошибках. Каждый раз требовалось какое-то исследование, чтобы разобраться во всем.

Однако, как только вы запустите его, вы поймете, почему разработчики используют этот подход. Мы только в начальной стадии, но будущее выглядит ужасно ярким.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Создание безголового веб-сайта WordPress с помощью GatsbyJS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»