Как создать статический блог с помощью Gatsby, CosmicJS и React

Как создать статический блог с помощью Gatsby, CosmicJS и React

От автора: в этом руководстве мы расскажем, как создать простой статический блог с помощью React, Gatsby JS и Cosmic JS. Gatsby — это инструмент, который позволяет создавать статические HTML-страницы (рендеринг на стороне сервера), обеспечивающие огромный прирост производительности для веб-приложений..

TL;DR

Необходимые ресурсы

Перед запуском вам понадобятся NodeJS, npm и Gastby CLI. Убедитесь, что вы уже установили эти ресурсы.

Что такое Gatsby?

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

Поскольку Gatsby использует React и React Router, клиентская сторона после первоначального рендеринга становится одностраничным приложением. Он также создает статическую HTML-страницу для маршрута, начальная загрузка по ощущениям осуществляется буквально мгновенно.

Разработка блога

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

Установка Gatsby

Сначала установите Gatsby CLI:

Быстрая установка шаблона Gatsby

Войдите в папку проекта:

Запустите сервер:

На этот момент вы уже должны иметь возможность получить доступ к блогу на Gatsby JS по этому адресу: http://localhost:8000.

Установка плагина Cosmic JS Source

В статическом блоге ваши данные могут быть использованы из разных источников: файлы Markdown, файлы HTML, внешний API (WordPress, Cosmic JS и т. д.).

Поэтому Gatsby реализует независимый уровень: уровень данных. Который работает на GraphQL. Очень круто!

GraphQL — это современный язык запросов для API, созданный в Facebook. Он позволяет клиенту определить требуемый запрос с использованием объекта пары ключ / значение. Пользователь отправляет ключи на сервер, а сервер отвечает с соответствующими значениями.

Чтобы подключить этот уровень данных с различными провайдерами данных, вам необходимо интегрировать Source Plugin. К счастью, доступно множество плагинов Source для различных потребностей. В нашем случае мы используем Cosmic JS. Очевидно, нам нужно интегрировать Source Plugin для Cosmic JS. Хорошие новости: Cosmic JS внедрил свой Source Plugin! Давайте установим его:

Нам также нужно установить и некоторые другие плагины. Давайте сделаем это:

Эти плагины нужно дополнительно сконфигурировать. Итак, замените содержимое файла gatsby-config.js на:

Путь: gatsby-config.js

Затем перезапустите сервер, чтобы Gatsby увидел эти обновления.

Список постов и настройки

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

Путь: src/pages/index.js

Пояснение:

В конце файла index.js мы экспортировали pageQuery. Это запросы GraphQl, которые используются для получения важной информации о настройках и списке постов.

Затем мы передаем деструктурированный объект {data} как параметр IndexPage и перебираем через цикл его объекты allCosmicjsPosts и cosmicjsSettings для отображения данных.

Макет одиночной записи

На данный момент мы интегрировали плагин Cosmic JS source с Gatsby, и он выглядит как блог. Теперь мы будем работать со страницей поста. Давайте создадим шаблон:

Путь: src/templates/blog-post.js

Он выглядит прекрасно, но на данный момент Gatsby не знает, когда должен отображаться этот шаблон. Каждому посту нужен конкретный URL-адрес. Итак, мы сообщим Gatsby о новых URL-адресах, которые нам нужны, благодаря функции createPage.

Путь: gatsby-node.js

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

Дополнительные материалы!

В дополнение к этому мы также внедрили src/components/Bio.js для отображения информации об авторе и src / layouts / index.js, чтобы создать общий макет для блога.

Исходный код доступен на GitHub. Чтобы увидеть его онлайн, клонируйте репозиторий и запустите (cd gatsby-blog-cosmicjs && npm i && npm run develop).

В конце перезапустите сервер и зайдите на сайт. Он будет выглядеть потрясающе!

Статический веб-сайт, созданный Gatsby, может быть легко опубликован через провайдеров хранилищ: Netlify, S3 / Cloudfront, страницы GitHub, страницы GitLab, Heroku и т. д.

Примечание. Наша демо-версия развернута на Netlify.

Заключение

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

Вы можете добавить возможности Cosmic JS к любой новой или существующей базе кода, независимо от языка программирования. Ознакомьтесь с советами по интеграции приложений в нашей базе знаний.

Cosmic JS позволяет контент-менеджерам и разработчикам работать вместе, предоставляя интуитивно понятную панель администрирования, мощные API и гибкие роли пользователей. Приложения при этом создаются быстрее и проще, а вся ваша команда экономит время. Cosmic JS — это основанная на API платформа управления контентом, которая упрощает работу с приложениями и контентом.

Автор: Carson Gibbons

Источник: https://levelup.gitconnected.com/

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

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

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

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

Комментарии 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