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

Часть 1 - Основа

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

Предположения

Вы приобрели доменное имя (мне нравится использовать NameCheap)

У вас есть место для размещения сайта WordPress (в идеале, там, где вы приобрели доменное имя), и оно уже установлено.

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

Сайт WordPress

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

Установить плагины

Wp-trigger-netlify-build

Wp-graphql

Wp-gatsby

Установите эти три плагина, и вы можете активировать их.

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

Get Gatsby Up & Running (локально)

А теперь давайте переключим передачи и запустим Гэтсби! У Gatsby есть отличные документы, и если вы еще не проверяли их, откройте новую вкладку и взгляните на их страницу Step 0, чтобы убедиться, что ваша среда готова к работе. Как только вы дойдете до Использование Gatsby CLI, вернитесь сюда.

Давайте создадим наш сайт о Гэтсби! Есть много вариантов для начала, но давайте выберем gatsby-starter-default. Я собираюсь назвать свое репо kaleigh-tech-tutorial, но вы можете называть свое как хотите!

gatsby new kaleigh-tech-tutorial https://github.com/gatsbyjs/gatsby-starter-default

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

cd kaleigh-tech-tutorial

gatsby develop

Если все в порядке, вы должны увидеть следующее:

У-у, ваш локальный сайт запущен и работает!

Давайте сделаем это ЖИВОЙ! Мне лично нравится использовать GitHub Desktop для локального управления своими репозиториями, так как я легко все вижу.

Вы также можете перейти на GitHub и создать новое репо и выполнить там шаги. Мое репо сейчас здесь.

Давайте посмотрим, насколько хорош Netlify!

Настроить Netlify

Перейдите на Netlify и, если у вас нет учетной записи, зарегистрируйтесь (это бесплатно). Если вы это сделаете, войдите в систему и убедитесь, что GitHub подключен.

Поскольку мы используем репозиторий GitHub, нажмите GitHub:

Найдите только что созданное репо и щелкните по нему:

Мы просто оставим значения по умолчанию:

Сейчас мой сайт строится!

Как вы увидите, у вас будет другое именованное репо. Не волнуйтесь, вы можете изменить его (если хотите) позже. Иногда имена смешные!

Создание вашего сайта не займет много времени. Теперь вы можете это проверить. Мой сайт находится здесь: https://loving-ride-e53f6d.netlify.app/

Давайте изменим некоторые вещи в Netlify. Во-первых, я изменю имя своего приложения на то же, что и мое репозиторий GitHub, чтобы все было единообразно.

Сборка Netlify

Вверху страницы на Netlify нажмите «Настройки», а затем «Изменить имя сайта».

Теперь мой сайт работает по адресу https://kaleigh-tech-tutorial.netlify.app/

Отличная особенность Netlify в том, что вы можете добавить значок в свой README, чтобы отображать статус вашего сайта. Мы также можем добавить это на наш сайт WordPress. Помните плагин Netlify, который мы установили?

На той же странице настроек прокрутите вниз до раздела «Значок статуса»:

Нажмите «скопировать в буфер обмена» и перейдите в текстовый редактор, чтобы мы могли отредактировать ваш README.

Я вставил его в строку 11 моего README:

Теперь перейдем к нашей панели управления WordPress. Слева нажмите «Netlify Build», он будет в нижней части пунктов меню.

Вы увидите, что нам нужно добавить 3 ссылки.

Первый - это наш хук сборки. Вернувшись в Netlify, перейдите в настройки, затем щелкните левой кнопкой мыши «Build & Deploy» и найдите Build Hooks. Создайте новый хук и используйте ссылку из него, чтобы вставить его в WordPress.

Второй - статусный образ. Эта ссылка должна быть зеленым текстом с моего скриншота выше: https://api.netlify.com/api/v1/badges/0149b059-a599-4da2-b595-acc319446746/deploy-status

Третий - статусная ссылка. Эта ссылка будет красным текстом со скриншота выше: https://app.netlify.com/sites/kaleigh-tech-tutorial/deploys

Теперь у вас должны быть все 3 ссылки

Нажмите "Сохранить изменения". Это позволит вам создать новое развертывание при обновлении контента в WordPress.

Когда будете готовы, можете посмотреть Часть 2 - Связь!