Учебное пособие: создайте свой сайт с помощью WordPress и Gatsby

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

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

В этой статье мы рассмотрим, что такое Gatsby и почему вы можете захотеть использовать его с WordPress. Затем мы подробно расскажем, как использовать Gatsby и стоит ли вам это делать. Давайте начнем!

Что такое Гэтсби?

Проще говоря, Gatsby — это генератор статических сайтов. Это означает, что Gatsby генерирует статические HTML-файлы, которые загружаются на сервер вашего веб-сайта. Когда посетитель попадает на ваш сайт, эти статические файлы передаются в его браузер вместо динамического контента, который обычно предлагает WordPress.

Чтобы создать эти файлы, Gatsby извлекает данные для вашего веб-сайта из ряда источников. Сюда входят существующие веб-сайты, вызовы API и плоские файлы через GraphQL. Затем ваш статический веб-сайт создается на основе установленных вами конфигураций.

По сравнению с другими генераторами статических сайтов Gatsby является относительно новым. Однако это не помешало многим компаниям попробовать его. Одним из крупнейших примеров является блог Airbnb Engineering & Data Science, который поддерживается Гэтсби.

Зачем использовать Гэтсби с WordPress?

Поскольку с помощью WordPress можно создать статический веб-сайт, вы можете задаться вопросом, почему вы должны использовать WordPress и Gatsby вместе. В то время как WordPress является мощным сам по себе, Gatsby предлагает некоторые преимущества, которые могут вам понадобиться для вашего веб-сайта, включая более высокую скорость и более низкую стоимость сервера. Понимание преимуществ и недостатков Гэтсби может помочь вам принять обоснованное решение.

Плюсы использования Гэтсби

Gatsby предлагает ряд преимуществ, которыми может воспользоваться любой веб-сайт, в том числе:

• Более высокая скорость загрузки. Статические веб-сайты загружаются быстрее, чем динамические, и это может повлиять на вашу поисковую оптимизацию (SEO). Скорость загрузки страницы — это сигнал, используемый поисковыми системами, который влияет на показатель отказов вашего сайта.
• Снижение затрат на сервер. Для динамических веб-сайтов требуются совместимые технологические стеки и серверы. Статических веб-сайтов нет, и вы можете разместить их на любом сервере. Это может снизить затраты на сервер.
• Улучшенная безопасность. Статические веб-сайты обеспечивают повышенную безопасность. Обслуживаемые статические HTML-файлы мало что предлагают хакерам для работы. Если эти файлы по какой-либо причине потеряны, вы также можете восстановить их с помощью Gatsby.

Ваш веб-сайт может извлечь выгоду из всех этих преимуществ. Тем не менее, вы должны сопоставить их с недостатками использования Гэтсби.

Минусы использования Гэтсби

Ни одна программная система не идеальна, и у Gatsby есть несколько недостатков, о которых вам нужно знать:

• Необходимы технические знания. Gatsby построен на ReactJS и использует GraphQL. Чтобы использовать его, необходимо некоторое понимание JavaScript. Вам также понадобятся базовые знания GraphQL для создания веб-сайта.
• Нет динамического контента. Gatsby создает только статические веб-сайты. Если вам нужен динамический контент, такой как контактные формы, их необходимо перенаправить через стороннего поставщика.

Хотя многие разработчики считают, что плюсы Gatsby перевешивают минусы, оба важно понять заранее.

Как использовать Гэтсби с WordPress?

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

Шаг 1. Проверьте предварительные условия

Прежде чем вы сможете установить Gatsby, вам необходимо установить NodeJS и npm в среде вашего веб-сайта. Git также требуется для управления кодом. Действия по установке необходимых компонентов различаются в зависимости от используемой операционной системы.

Если у вас Windows, вы можете установить NodeJS и Git через установщик на странице загрузки. То же самое возможно с Mac. Однако, если вы используете Linux, требуется установщик пакета, такой как apt.

Шаг 2: Установите Гэтсби

После установки NodeJS и Git можно приступать к установке Gatsby. Самый простой способ сделать это — использовать следующую команду в программном терминале:

 npm install -g gatsby-cli

Эта команда автоматически запускает программу установки. Сначала он загрузит и установит все зависимости перед установкой Gatsby. Как только это будет завершено, вы можете приступить к созданию своего первого веб-сайта Gatsby.

Шаг 3: Создайте сайт Гэтсби

Чтобы создать свой веб-сайт Gatsby, вам нужно выполнить следующую команду:

 gatsby new gatsby-site

Эта команда клонирует начальный шаблон Gatsby и помещает его в каталог /gatsby-wordpress . После завершения клонирования и установки вы можете открыть разрабатываемую версию сайта. Это делается с помощью следующей команды:

 gatsby develop

Пока среда разработки работает, вы можете локально посетить свой новый веб-сайт. В веб-браузере введите http://localhost:8000 , и должен открыться шаблон по умолчанию.

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

 gatsby build

Эта команда также создает пакеты кода JavaScript перед маршрутом для вашего веб-сайта. Затем вы можете использовать команду serve для локального отображения вашего нового веб-сайта:

 gatsby serve

Эта команда будет работать только в том случае, если вы уже запустили команду сборки.

Шаг 4: Подключите Гэтсби к WordPress

Теперь у вас есть базовый статический веб-сайт, но вам необходимо интегрировать его с WordPress. Это направляет ваш сайт Gatsby на адрес вашего блога WordPress, что позволяет ему получать последние данные при запуске сервера разработки. После подключения Gatsby создаст статический веб-сайт на основе вашего текущего шаблона WordPress.

Чтобы соединить их, вам нужно установить плагин Gatsby для WordPress. Об этом позаботится следующая команда:

 npm install gatsby-source-wordpress

После установки плагина можно приступать к настройке Gatsby.

Шаг 5: Настройте Гэтсби

Для настройки Gatsby нужно работать с файлом gatsby-config.js . В этот файл добавьте следующий код:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Обновите этот код, чтобы он указывал на ваш сайт WordPress. Если ваш веб-сайт размещен локально, после baseUrl вы можете использовать localhost:8888/wordpress вместо URL-адреса вашего веб-сайта. После сохранения файла вам нужно будет создать шаблоны страниц.

Шаг 6: Создание шаблонов страниц

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

В файле gatsby-node.js добавьте следующий код:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

После вызова всех данных из WordPress Gatsby будет генерировать страницу для каждого поста. Используя команду разработки, вы можете переходить на каждую новую страницу, используя сгенерированный URL-адрес.

Стоит ли использовать Gatsby для WordPress?

Хотя Gatsby может повысить скорость и безопасность вашего веб-сайта, это не правильный выбор для всех. Если на вашем веб-сайте есть статический контент, который редко меняется, Gatsby может быть полезен. Однако, если вам нужен динамический контент на вашем веб-сайте, традиционный WordPress может быть лучшим выбором.

Делайте все возможное со своим сайтом на движке WP

Gatsby — эффективный генератор статических веб-сайтов, который можно легко интегрировать с WordPress. Для установки и настройки системы необходимо выполнить несколько шагов. Вам также необходимо иметь некоторые знания о Gatsby и GraphQL, прежде чем начать.

Статический контент может повысить скорость и безопасность вашего веб-сайта, но вам также нужен правильный хостинг. WP Engine предлагает лучшие ресурсы для вашего веб-сайта, чтобы создать отличный цифровой опыт. Это оставляет вам больше времени, чтобы сосредоточиться на разработке!