Долгое время мой личный веб-сайт был построен на WordPress. Я работал с WordPress куча в моей карьере и чувствовал, что это был хороший баланс функциональности и гибкости. Но в последнее время я подумал о раскручении всего и переключаться на статический сайт. Я лично люблю писать в Markdown, и новый редактор WordPress отказался от Markdown со стороны сочинения второго класса. Поэтому я полагал, что сейчас было время переключиться на что-то другое, совершенно другое, что-то вроде GATSBY Отказ
GATSBY – это статический генератор сайта, если вы не знакомы, что позволяет вам писать шаблоны в React и используемым Nodejs под капотом для компиляции вашего сайта. Мне понравилось создать свой новый сайт: создание шаблонов, настраивая запросы GraphQL и возвращение в традиционную веб-разработку.
На работе я написал об использовании WordPress в качестве источника данных на Блог SPINUPWP И я хотел узнать, что было бы хотелось переключаться с WordPress в блог на основе Markdown.
Далее следует шаги, которые я следовал, чтобы перенести свой сайт с самого размещенного сайта WordPress на сайт GATSBY, размещенным на Нечто . Это может быть не точный процесс, который вам нужно будет следовать, чтобы перенести свой собственный сайт WordPress, но я думаю, что он охватывает наиболее распространенные шаги.
Извлечение контента от WordPress
Первый шаг к получению контента из WordPress схватил экспорт XML. Это может быть сделано с использованием серверу WordPress Core Exporter. Вы можете запустить создание экспорта, войдя в свой WP-Admin и собираюсь в Tools> Export.
После того, как у вас есть файл экспорта XML, вам понадобится преобразователь Markdown. Есть несколько доступных онлайн, я использовал WordPress-Export-to-markdown Сценарий, но есть плагины и скрипты, такие как EXITWP Доступно в Интернете, которые делают то же самое.
Это довольно просто для преобразования экспорта XML в Markdown. С WordPress-Export-to-markdown Сценарий Это действительно просто эта команда:
npx wordpress-export-to-markdown --save-attached-images true
После скрипта RAN у меня была папка с кучей новых файлов Markdown и папка с моими загрузочными материалами. Я просто бросил файлы Markdown в папку «Blog» и все средства массовой информации в папку «Blog-Post-images». Вы можете группировать каждый пост в папке с его носителями, но я выбрал эту установку для старых постов, чтобы держать их отдельными.
Данные в файлах Markdown были немного потрясены, но не так уж плохо. «Frontmatter» (метаданные для каждого поста) был забит в заголовок файла Markdown, поэтому многие форматирование работы файлов удаляли этот мусор.
По большей части, посты наткнулись в порядке. Был немного форматирования и стайлинга, необходимые с точки зрения <Код> и Теги, а также исправляя пути изображения. Кроме того, большинство форматирования были в довольно хорошей форме!
через гипю
Получение GATSBY UP и работает
Хорошо, так что теперь мы получили контент WordPress, теперь что? Welp, первое, что нам нужно сделать, это получить GATSBY UP и бежать. К счастью, это довольно легко и GATSBY DOCS очень полезны.
// Install the gatsby cli tool globally npm install -g gatsby-cli // Create a new Gatsby site in a 'gatsby-starter-blog' folder gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
Я решил использовать GATSBY BARTER BLOG стартер Поскольку у него уже есть много плагинов Markdack, а также некоторые довольно приличные значения по умолчанию и структуру приложения.
На земле Гэтсби, начала как предварительно построенные котельные, и это действительно круто, как далеко они могут вывести вас прямо из коробки. Есть куча вариантов для значимости любого стиля дизайна, о котором вы можете попросить. Подумайте о началах как тема WordPress и Набор плагинов.
GATSBY имеет Концепция темы Также, но для большинства меньших сайтов стартер просто отлично. Единственное, что вы проигрываете, используя стартер над темой, заключается в том, что если стартер обновляется по дороге, у вас не будет никакого способа тянуть в любые изменения в потоке.
Для меня это твердое “Мех”.
Как только вы запустите GATSBY новый У вас будет довольно хорошее приложение GATSBY, готовое к работе. Если вы CD в «Гэтсби-стартер-блог» и бегите GATSBY Развивается Вы должны увидеть ваш новый блог, работающий в http://localhost: 8000 Отказ И на данный момент, если вы переместили файлы разметки в папку «Content/Blog», они должны были быть созданы как сообщения GATSBY.
Как это случилось?
Как работает Гэтсби
Если вы приедете с земли WordPress, концепция сайта «скомпилированного» может показаться немного странно. Это то, что делает GATSBY, он компилирует динамический сайт (реагировать компоненты и источник контента) в (в основном) статический веб-сайт. Из-за этого шага компиляции большая часть магии происходит во время шага сборки.
Прежде чем мы попадем в сборку вещей, полезно увидеть, как создается контент и структура сайта.
Первое, что узнать о том, что gatsby-config.js файл . Это где мы загружаем в наши плагины и настройки GATSBY. Для наших файлов Markdown мы используем GATSBY-Source-filesystem Плагин для их загрузки, указав путь в конфигурации:
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
У GATSBY Starter будет иметь этот файл, в основном заселенный из ворот, но приятно знать, что это цель и местоположение.
Apis узел gatsby
Следующая вещь, чтобы узнать о том, что Apis узел gatsby . Они управляются gatsby-node.js файл. Здесь мы определяем, как создаются страницы и как они взаимодействуют с Graphql слой.
Основная функция для создания страниц – это называется, безрезультатно, Createpages () Отказ Здесь мы определяем запрос, чтобы получить наши посты, и любые дополнительные данные, которые мы хотим добавить к нашим сообщениям/страницам. Затем мы называем CreatePage () Функция для каждого «пост» мы хотим создавать.
Важно отметить, что gatsby-node.js Файл по существу, просто сценарий узла с доступом к APIS GATSBY. Это полезная информация, если вы отладки во время процесса сборки, вы можете Отладка сайта сборки GATSBY Так же, как вы будете любым другим скриптом узла.
В этом файле мы импортируем шаблон для использования, когда CreatePage () Функция называется немного позже.
const blogPost = path.resolve(`./src/templates/blog-post.js`)
Затем у нас есть наш запрос GraphQL, который сохраняется в Совместные Переменная. Мы используем graphql функция, которая является частью пакета GATSBY;
const postsResult = await graphql(
`
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
type
}
}
}
}
}
`
)
AllmarkDownRemark это функция, которая является частью GATSBY-трансформатор-замечание плагин И порт Гэтсби Примечание Максимальный партер. В gatsby-config.js Файл, который мы уже настроили этот плагин, чтобы он знал, где найти наши файлы Markdown.
GATSBY также имеет Отличный обзор Объясняя, что такое graphql и почему это так круто.
Все, что нам нужно знать о приведенном выше запросе, заключается в том, что он получает весь наш контент из наших файлов Markdown, отсортирован по дате и ограничен 1000.
Аккуратная вещь о graphql заключается в том, что он возвращает данные в тот же формат Как мы его просим. Таким образом, мы можем получить доступ к данным в Совместные Переменная, как мы бы любой другой объект JS.
Так что в нашем запросе мы просим:
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
...
}
}
И в Совместные var:
// Create blog posts pages. const posts = postsResult.data.allMarkdownRemark.edges
Вы можете подумать о запросах GraphQL как похожие на WordPress Custom Wg_query () звонки Отказ Мы указываем то, что мы хотим, и он возвращает данные.
'future',
'meta_query' => array(
array(
'key' => '_thumbnail_id',
'value' => ',
'compare' => '!='
)
)
);
$slider_posts = new WP_Query($args);
?>
have_posts()) : ?>
?>
Пример получения постов для ‘слайдера’
Как и в WordPress, последнее, что нужно сделать, это петлю по всем постам и применить наш HTML:
const posts = postsResult.data.allMarkdownRemark.edges
posts.forEach((post, index) => {
let previous, next
const { node } = post
// Figure out links for previous and next post
if (node.frontmatter.type === "post") {
previous = index === posts.length - 1 ? null : posts[index + 1].node
}
if (node.frontmatter.type === "post") {
next = index === 0 ? null : posts[index - 1].node
}
//Actually create the page
createPage({
path: post.node.fields.slug, //Post 'slug'
component: blogPost, // Template to render
context: { //Context date for this post/page
slug: post.node.fields.slug,
previous,
next,
},
})
})
В теме WordPress вы, вероятно, просто выводят некоторые HTML внутри цикла. В GATSBY, поскольку это на этапе сборки, вам нужно явно позвонить в CreatePage () Функция для создания страницы на нашем сайте.
CreatePage () Функция использует наш комбинационный компонент ( blogpost.js ) как шаблон. Как и WordPress использует отдельные тематические компонентные файлы для выходных частей нашей темы, CreatePage () Функция захватывает наш шаблон и вводит данные, необходимые для того, чтобы вырезать все.
blogpost.js Шаблон Разве Super Complex это просто реактивный компонент с передачи динамических данных.
Я отложу на GATSBY DOCS Для объяснения, как работают шаблоны.
Вещи также отличаются от традиционного рабочего процесса разработки WordPress, когда дело доходит до изображений.
Обработка изображений
Мы видели до сих пор, что GATSBY использует GraphQL для запроса на наши сообщения, но как обрабатываются изображения? Изображения в GATSBY требуют GATSBY-Image плагин.
GATSBY-Image довольно сладкий маленький пакет. Это займет ваши большие изображения, разместит их, полосу метаданных, ленивая нагрузка и используйте «SVG размытым заполнителем» все в одном.
Ага.
На документы С Это в основном просто устанавливает пару пакетов NPM и добавление некоторой базовой конфигурации на ваш gatsby-config.js файл.
Затем у вас есть несколько вариантов для использования изображения в шаблоне и ваши сообщения.
Для Markdown вы просто используете синтаксис Markdown для изображений и используете относительный путь к изображению:
В компоненте вы можете запросить изображение с помощью GraphQL, так как:
query BioQuery {
avatar: file(absolutePath: { regex: "/profile-pic.png/" }) {
childImageSharp {
fixed(width: 50, height: 50) {
...GatsbyImageSharpFixed
}
}
}
`)
Тогда в другом месте используйте GATSBY-Image Изображение компонент, чтобы сделать это.
Кажется, гораздо сложнее, чем то, что вам нужно будет делать в теме WordPress, но я нахожу его только чуть более многословным, чем это:
Я бы утвердовал, что самое большое улучшение по сравнению с WordPress – обращение с изображением GATSBY. Наличие правильных размеров создается автоматически и наличие их ленивозагрузки – это чейнджер игры. Это требует дальше никаких усилий, и все супер-исполнителю из коробки.
через гипю
Хорошо, так что давайте рассмотрим:
- ✅ Мы экспортировали наше содержание сайта WordPress в Markdown
- ✅ Мы экспортировали наши СМИ
- ✅ Мы создали новый сайт GATSBY, который загружает наши файлы Markdown
- ✅ Мы загружаем наши изображения в сообщениях и наших шаблонах
Все, что осталось, это развертывание и хостинг!
Развертывание и хостинг
Один из точек прилипания с WordPress находит достойный хост. Большинство управляемых хостов могут быть дорогими довольно быстро, и общий хостинг – это неисправность, если вы хотите приличную производительность. Вы можете себе хостить на виртуальном сервере, так как я делал годами, но вы должны сохранить базовые ОС в современную и исправлять вещи, изменить брандмауэр и т. Д. И т. Д. (Plug: SpinUpwp от вкусных мозгов смягчает все эти проблемы 🤩).
Есть ли хостинг GATSBY одинаковые проблемы? Одним словом нет.
Потому что GATSBY компилирует до по существу Статический сайт HTML, вы можете провести практически где угодно. Там нет динамического контента, поэтому он довольно быстрый прямо из коробки. Еще больше, NetLify предлагает бесплатный хостинг сайтов GATSBY, в том числе Давайте шифровать SSL-сертификаты и пользовательские домены. Вот где я принимаю этот сайт, и это колени Bee.
Я также настроил развертывание GIT, поэтому нажав на мастер развертывает сайт.
Где WordPress является лучшим вариантом
Хорошо, так что все это звучит довольно здорово, не так ли? Ну, это и Гэтсби это классно, Но это не без проблем.
GATSBY не CMS, поэтому ни один из CMS хороших вещей не доступен. Хотите обрабатывать контактную форму? Это внешняя служба. Хотите комментарии к вашему блогу? Это внешняя служба. Хотите продать вещи или иметь пользовательские сеансы? Это внешнее …
Вы получаете точку зрения.
Это статический сайт, так что это статический сайт. На сайте нет динамического аспекта, все построено в компиляционном времени. Это, вероятно, самый большой недостаток GATSBY, нет «динамической» функциональности на вашем сайте по умолчанию.
Конечно, есть обходные пути и услуги, которые приведут вам эту интерактивность, но это включает в себя ткачество вместе сторонних услуг, таких как Disqus для комментариев или покупки для электронной коммерции.
У меня есть комментарии Disqus (оставьте комментарий!) И используйте обработку формы NetLify для моей контактной формы. Но если у вас есть очень динамичный сайт с динамическим контентом, GATSBY, вероятно, не работает.
WordPress С другой стороны, по умолчанию динамичен, поэтому вы можете получить довольно далеко с плагинами и пользовательским кодом.
В конце концов
Для моих собственных целей, как разработчик, GATSBY – отличное решение. Я могу написать в Markdown, разверните свой сайт с Git Push Origin Main и напишите React Code для моих шаблонов.
Еще раз.
через гипю
Что вы думаете о GATSBY над WordPress?
Вы можете проверить источник для этого сайта на Github
Оригинал: “https://dev.to/ptasker/an-introduction-to-gatsby-for-wordpress-developers-3a4e”