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

Gatsby WordPress

Обзор

Gatsbyjs-это бесплатный и с открытым исходным отрезом, на основе GraphQL Static Generator. Он использует мощную предварительную конфигурацию для создания веб-сайта, который использует только статические файлы для невероятно быстрой загрузки страниц. WordPress - отличная платформа для блога с открытым исходным кодом. В результате есть много людей, которые знают, как выяснить, является ли сайт сайтом WordPress, чтобы они могли взломать его и украсть информацию. Использование Gatsby WordPress вместе даст вам ту же силу управления контентом WordPress и скорость Gatsby. В этой статье мы рассмотрим, что такое Gatsby и почему вам нужно использовать его с помощью программного обеспечения CMS. Затем мы подробно расскажем о том, как использовать WordPress и Gatsby, чтобы создать удивительный опыт на веб -сайте. Давайте начнем!

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

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

Плюсы и минусы использования WordPress и Gatsby

Согласно официальным [документам] Гэтсби 5, они собрали таблицу, для которой сочетание Gatsby WordPress великолепно, а для которой это не так. Ради легкого, я перечисляю их здесь. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress и Gatsby отлично подходят для {{LINE_27}} {{LINE_28}} {{LINE_29}} Контент -команды, которые чувствуют себя комфортно с опытом редактирования контента WordPress {{LINE_31}} {{LINE_32}} Команды разработчиков, которые ценят использование популярных технологий с открытым исходным кодом {{LINE_34}} {{LINE_35}} Редизайны сайтов с контентом, уже хранящимся в WordPress {{LINE_37}} {{LINE_38}} Команды, которые хотят владеть своими данными и техническим стеком {{LINE_40}} {{LINE_41}} Сложные рабочие процессы управления доступом или ограничения моделирования контента {{LINE_43}} {{LINE_44}} Проекты, где безопасность важна {{LINE_46}} {{LINE_47}} Проекты с высоким спросом, где производительность имеет первостепенное значение {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress и Gatsby не подходят для {{LINE_55}} {{LINE_56}} {{LINE_57}} Команды, требующие использования тем WordPress UI {{LINE_59}} {{LINE_60}} Те, кто ищет полностью управляемый облачный CMS {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Помимо этих официальных моментов, я хотел бы перечислить некоторые плюсы и минусы использования Gatsby WordPress вместе {{LINE_67}} {{LINE_68}} {{LINE_69}} Плюс {{LINE_71}} {{LINE_72}} {{LINE_73}} Более быстрая скорость нагрузки - статические веб -сайты загружаются быстрее, чем динамика. В результате это влияет на скорость нагрузки на вашу страницу и рейтинг SEO. {{LINE_75}} {{LINE_76}} Меньшее количество затрат на сервер - поскольку статические файлы не требуют специальных программ, следовательно, статические HTML -страницы также могут быть поданы с более дешевых серверов. {{LINE_78}} {{LINE_79}} Более безопасное - для статических сайтов нет никаких движущихся компонентов частей, поэтому нет шансов для хакеров использовать ваше программное обеспечение. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Минусы {{LINE_89}} {{LINE_90}} {{LINE_91}} Кривая обучения - это требует дополнительных навыков для разработчиков. Как обучение ReactJs и GraphQL {{LINE_93}} {{LINE_94}} Только статический контент - если вам нужно обслуживать какой -либо динамический контент. Тогда Гэтсби не для тебя. Это может только сервер статических файлов. Следовательно, у вас не может быть никакой системы комментариев, которая получает данные из базы данных. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

Как использовать Gatsby с WordPress

Прежде чем вы сможете установить Gatsby, вам нужно установить Nodejs и NPM в среде вашего сайта.

Шаг 1 - Установите Gatsby

npm install -g gatsby-cli

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

gatsby new gatsby-site

Это загрузит стартовый шаблон Гэтсби и поместит его в каталог/Gatsby-Wordpress. После завершения установки вы можете открыть версию разработки сайта

gatsby develop

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

Шаблон стартера Гэтсби

Шаг 2 - Подключите Gatsby к WordPress

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

npm install gatsby-source-wordpress

Шаг 3 - Настройте Gatsby

Поместите следующий код в свой файл gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `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 вашего веб -сайта. После сохранения файла вам нужно будет создать шаблоны страниц.

Шаг 4 - Шаблоны страницы сборки

Шаблоны страниц построения позволяют этому генератору сайта создать сообщение для каждой страницы на вашем веб -сайте WordPress. Плагин Source будет извлекать необходимые вам данные от 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,
      },
    })
  })
}

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

Заключение

В этом учебном пособии Gatsby WordPress мы рассмотрели, как генерировать веб -сайт Gatsby от WordPress. Мы узнали, каковы плюсы и минусы этих двух программ с открытым исходным кодом. Мы также рассмотрели, как установить и начать с среды разработки Gatsby. Наконец, Containerize.com пишет статьи на дополнительных продуктах с открытым исходным кодом. Поэтому, пожалуйста, оставайтесь на связи с категорией платформы с открытым исходным кодом 9 для регулярных новостей и обновлений.