Как создать блог React на основе Gatsby за 10 минут

Как создать блог React на основе Gatsby за 10 минут

От автора: сегодня мы поговорим о том, как можно быстро создать сайт на Gatsby React. Gatsby — это быстрый статический генератор сайтов, основанный на ReactJS. Статический генератор сайта (SSG) представляет собой компромисс между жестко закодированным HTML статического сайта и полномасштабной CMS (Content Management System), как WordPress. SSG можно использовать для создания HTML-страниц для веб-сайтов, ориентированных на контент (таких как блоги). Все это требует заполнения страницы контентом.

Этот пост будет разделен на пять разделов:

Начало работы.

Создание компонентов макета.

Создание записей в блогах.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Создание новых страниц из данных блога.

Создание список файлов разметки сайта на основной странице.

Мы тщательно изучим Gatsby и некоторые его особенности, создав воображаемый статический блог под названием CodeStack. Макет показан ниже. Поехали!

Как создать блог React на основе Gatsby за 10 минут

1. Начало работы

Предпосылки

Во-первых, убедитесь, что в вашей системе установлен Node.js. Если нет, перейдите на nodejs.org и установите последнюю версию для вашей операционной системы. Кроме того, в этой статье предполагается, что вы знаете, что такое ReactJS.

Установка CLI

У Gatsby есть инструмент командной строки, который предоставляет такие полезные команды, как:

gatsby new: строительные леса для нового проекта Gatsby.

gatsby develop: для запуска сервера веб-разработки с поддержкой горячей перезагрузки.

gatsby build: для создания готовой версии проекта.

Для установки введите следующее на своем терминале и нажмите enter:

Создадим папку проекта codestack-blog и перейдем к ней.

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

Как создать блог React на основе Gatsby за 10 минут

Добавление плагинов

У Gatsby есть большой и растущий набор плагинов. Это, по сути, пакеты Node.js, которые взаимодействуют с API Gatsby.

Они могут быть установлены через NPM (диспетчер пакетов узлов) на терминале и, как правило, имеют три категории: функциональные, исходные и трансформаторные плагины.

Функциональные плагины

Эти плагины обеспечивают дополнительную функциональность на сайте Gatsby или в его среде разработки. Для нашего приложения нам понадобятся:

gatsby-plugin-react-helmet: позволяет изменять head теги. Обратите внимание, что он уже установлен в нашем проекте.

gatsby-plugin-catch-links: перехватывает локальные ссылки из уценки и других нереактивных страниц и делает pushState на стороне клиента, чтобы браузер не обновлял страницу.

Установите плагины или только второй плагин.

Каждый раз, когда мы добавляем новый плагин, нужно обновлять файл gatsby-config.js с новым плагином, чтобы Gatsby узнавал и использовал его. Мы используем back-ticks.

Исходные плагины

Эти плагины «исходных» данных из удаленных или локальных мест — то, что Гэтсби называет nodes. Чтобы написать посты в Markdown на локальном диске, необходимо:

gatsby-source-filesystem: источники данных о файлах из файловой системы компьютера.

Обновите gatsby-config.js файл:

Что тут происходит? Объект Options может быть передан плагину для получения дополнительной конфигурации. Мы передаем файловую систему path (то есть, место, где находятся наши файлы разметки), а затем name для исходных файлов, чтобы Gatsby знал о наших исходных файлах и, где применять трансформаторные плагины.

Трансформаторные плагины

Эти плагины преобразуют необработанные данные из nodes в используемые форматы данных. Например, нам понадобится:

gatsby-transformer-remark: он преобразовывает записи блога, написанные в .md файлах, размещённых на локальном диске, в HTML для рендеринга.

Обновите gatsby-config.jsфайл еще раз.

2. Создание компонентов компоновки

Gatsby позволяет легко создавать «компоненты макета». Компоненты макета — это разделы сайта, которые вы хотите разделить на несколько страниц. Для блога, который мы создаем, это заголовок и боковые панели.

Посмотрите в корневой папке src/layouts. Вы найдете index.js файл, в котором мы определяем компоненты макета. Index.css уже пришел со стилями.

После изучения index.js файла вы увидите, что уже созданы два компонента: Header и TemplateWrapper. В TemplateWrapper мы заворачиваем содержимое нашего сайта и компонентами макета, которые хотим, чтобы присутствовали на нескольких страницах.

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

Прежде всего, создайте новую папку и файл CSS src/styles/layout-overide.css. Добавьте к списку импорта в index.js файле. Нам нужно импортировать его после index.css переопределения некоторых существующих правил стиля.

Откройте layout-overide.cssи вставьте следующие правила стилей. Не нужно это понимать.

Обновите макет заголовка.

Также создайте Sidebar макет.

Нам нужно, чтобы компоненты Sidebar и обработанные {children()}элементы реагировали следующим образом:

Как создать блог React на основе Gatsby за 10 минут

Поскольку не существует простого способа определить медиазапросы в React, я нашел библиотеку под названием react-media, макет запроса CSS медиа для React. Установите его.

Он предоставляет Media компонент, который ищет совпадения с запросом на мультимедиа CSS и отображает материал в зависимости от того, совпадает ли запрос или нет.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Добавьте его в список импорта в нашем файле.

Давайте расставим все компоненты ( Header, Sidebarи children()), как мы хотим в TemplateWrapper . Внесите следующие изменения (простите за бесстыдную вставку моего имени):

Что происходит в этом монолитном блоке кода? React media использует операцию Ternary для определения того, что делать на основе maxWidth 848px. Когда экран соответствует ширине, отображаются только компоненты Header и children().

Ternary переподготовка. Если condition являетсяесть, оператор возвращает значение expr1; в противном случае он возвращает значение expr2. Если вы заметили, мы также использовали Flexbox для компоновки позиций children() и Sidebar компонентов. Запустите gatsby develop на терминале, наш статический блог должен выглядеть так:

Как создать блог React на основе Gatsby за 10 минут

3. Создание записей в блогах

Теперь давайте займемся созданием реальных постов в блоге. Gatsby использует GraphQL для извлечения данных из одного или нескольких источников, таких как локальный диск, WordPress API и т. д.

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

В этом посте мы будем загружать данные из файлов разметки, которые создадим на локальном диске. Плагин gatsby-source-filesystem, который мы настраивали ранее, ожидает наш контент в src/pages, так что именно туда, мы его и поместим!

Типичная практика для сообщений в блогах — это называть папку, как-то вроде MM-DD-YYYY-title. Вы можете называть его любым названием, которое вам нравится, или просто поместить файл markdown внутрь папки /pages.

Давайте создадим папку src/pages/12–22–2017-first-post и поместим внутрь index.md. Напишем:

Блок, окруженный тире, называется frontmatter. Данные, которые мы здесь укажем, а также другие файлы разметки, будут распознаваться gatsby-transformer-remark плагином.

Плагин преобразует часть метаданных основной части файла разметки frontmatter и часть контента (Yippeeee, my first blog post!) В HTML.

Когда мы начнем создавать страницы блога непосредственно из файлов разметки в разделе 4 (следующий раздел), path будет использоваться для указания пути URL для визуализации файла. Например, файл разметки выше будет отображаться localhost:8000/hello-world.

Сначала давайте создадим шаблон, который будет отображать любой файл разметки на собственной странице блога. Создайте файл src/templates/blog-post.js (создайте src/templatesпапку).

Мы создали Template компонент для получения data объекта, который будет получен из запроса GraphQL, который мы собираемся написать.

Еще раз, запрос GraphQL необходим для извлечения данных в компонент. Результат запроса вводится Gatsby в компонент Template как data и markdown Remark.

Мы обнаружим, что свойство markdownRemark содержит все детали файла разметки. Теперь давайте сделаем запрос. Он должен располагаться ниже Template компонента:

Если вы не знакомы с GraphQL, я попытаюсь объяснить то, что здесь происходит. Чтобы узнать больше о GraphQL, рассмотрите этот отличный ресурс.

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

В приведенном выше коде BlogPostByPath находится основной запрос, который приведет к возврату постав блоге. Он будет возвращен как data для инъекции в Template компонент.

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

Кроме того, напомним, markdownRemark перегрузил наши файлы разметки. Они будут рассматриваться как свойство, содержимое которого будет доступно через data.markdownRemark.

Мы могли бы получить доступ к HTML через data.markdownRemark.html. Кроме того, доступ к frontmatter контенту, который мы создали с блоком, можно получить через data.markdownRemark.title и т.д. Полный blog-template.js должен выглядеть так:

С этой точки зрения:

У нас есть куча плагинов, установленных для выполнения некоторых утилит, а также загрузки файлов с диска и преобразования Markdown в HTML.

У нас есть одиночный файл Markdown, который будет отображаться как пост в блоге.

У нас есть шаблон React для рендеринга постов в блоге в макете, а также подключенный GraphQL для запроса данных для публикации в блоге и ввода шаблона React с запрошенными данными.

Отлично!

4. Создание новых страниц из данных блога

Gatsby предоставляет API-интерфейс Node, который обеспечивает функциональность для создания динамических страниц из постов в блогах. Этот API открыт в файле gatsby-node.js в корневой папке проекта. Этот файл может экспортировать несколько Node API, но нас интересует API-интерфейс createPages.

Используйте следующий блок фрагмента кода, как указано в официальных документах (обратите внимание, что путь blogPostTemplate был настроен так, чтобы отражать наши):

Проверьте, работает ли он. Я рекомендую закрыть окно вашего браузера, прекратив работу gatsby develop сервера с помощью ctrl c. Теперь запустите gatsby develop again и запустите http://localhost:8000/hello-world.

Как создать блог React на основе Gatsby за 10 минут

Создайте еще один файл src/pages/24–12–2017-learning-grid/index.md

Снова закройте окно gatsby develop, остановите gatsby develop сервер. Запустите gatsby develop again и откройте http://localhost:8000/another- one. Как это выглядит:

Как создать блог React на основе Gatsby за 10 минут

Продолжайте, если хотите, и создавайте свои собственные страницы.

5. Создание списка файлов разметки сайта на целевой странице

Основная страница по умолчанию, которая поставляется с сайтом Gatsby, находится по адресу src/pages/index.js. Здесь мы должны определить шаблон и сделать запрос, чтобы ввести его в список файлов .md. Сделайте это:

Как создать блог React на основе Gatsby за 10 минут

Надеюсь, вы уже знакомы с тем, что происходит. Обратите внимание, что мы написали вышеприведенный import, который не существует. Теперь создайте файл /styles/blog-listing.css:

Перезагрузите сервер, зайдите на основную страницу, и вы увидите работающий список:

Как создать блог React на основе Gatsby за 10 минут

Вывод

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

Функциональность поиска

Использование тегов для категоризации сообщений в блогах

Развертывание сайта Gatsby

Здесь вы можете получить конечный исходный код.

Автор: Emmanuel Yusufu

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по React JS Material UI

Прямо сейчас посмотрите курс по React JS Material UI

Смотреть курс

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree