От автора: в этом руководстве мы расскажем, как создать простой статический блог с помощью 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:
npm install --global gatsby-cli
Быстрая установка шаблона Gatsby
gatsby new gatsby-blog-cosmicjs
Войдите в папку проекта:
cd gatsby-blog-cosmicjs
Запустите сервер:
gatsby develop
На этот момент вы уже должны иметь возможность получить доступ к блогу на 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! Давайте установим его:
npm install --save gatsby-source-cosmicjs
Нам также нужно установить и некоторые другие плагины. Давайте сделаем это:
npm install --save gatsby-plugin-offline gatsby-source-filesystem
Эти плагины нужно дополнительно сконфигурировать. Итак, замените содержимое файла gatsby-config.js на:
Путь: gatsby-config.js
module.exports = { plugins: [ `gatsby-plugin-offline`, `gatsby-plugin-react-helmet`, { resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/pages`, name: 'pages', }, }, { resolve: 'gatsby-source-cosmicjs', options: { bucketSlug: 'gatsby-blog-cosmic-js', // Bucket Slug objectTypes: ['posts','settings'], // List of the Object Types you want to be able to request from Gatsby. apiAccess: { read_key: '', } } }, ], }
Затем перезапустите сервер, чтобы Gatsby увидел эти обновления.
Список постов и настройки
Сначала мы отобразим список постов на главной странице. Для этого добавьте следующий контент в существующий файл главной страницы:
Путь: src/pages/index.js
import React from 'react' import Link from 'gatsby-link' import get from 'lodash/get' import Helmet from 'react-helmet' import Bio from '../components/Bio' import { rhythm } from '../utils/typography' class BlogIndex extends React.Component { render() { const siteTitle = get(this, 'props.data.cosmicjsSettings.metadata.site_title') const posts = get(this, 'props.data.allCosmicjsPosts.edges') const author = get(this, 'props.data.cosmicjsSettings.metadata') return ( <div> <Helmet title={siteTitle} /> <Bio settings={author}/> {posts.map(({ node }) => { const title = get(node, 'title') || node.slug return ( <div key={node.slug}> <h3 style={{ marginBottom: rhythm(1 / 4), }} > <Link style={{ boxShadow: 'none' }} to={`posts/${node.slug}`}> {title} </Link> </h3> <small>{node.created}</small> <p dangerouslySetInnerHTML={{ __html: node.metadata.description }} /> </div> ) })} </div> ) } } export default BlogIndex export const pageQuery = graphql` query IndexQuery { allCosmicjsPosts(sort: { fields: [created], order: DESC }, limit: 1000) { edges { node { metadata{ description } slug title created(formatString: "DD MMMM, YYYY") } } } cosmicjsSettings(slug: {eq: "general"}){ metadata{ site_title author_name author_bio author_avatar { imgix_url } } } } `
Пояснение:
В конце файла index.js мы экспортировали pageQuery. Это запросы GraphQl, которые используются для получения важной информации о настройках и списке постов.
Затем мы передаем деструктурированный объект {data} как параметр IndexPage и перебираем через цикл его объекты allCosmicjsPosts и cosmicjsSettings для отображения данных.
Макет одиночной записи
На данный момент мы интегрировали плагин Cosmic JS source с Gatsby, и он выглядит как блог. Теперь мы будем работать со страницей поста. Давайте создадим шаблон:
Путь: src/templates/blog-post.js
const _ = require('lodash') const Promise = require('bluebird') const path = require('path') exports.createPages = ({ graphql, boundActionCreators }) => { const { createPage } = boundActionCreators const indexPage = path.resolve('./src/pages/index.js') createPage({ path: `posts`, component: indexPage, }) return new Promise((resolve, reject) => { const blogPost = path.resolve('./src/templates/blog-post.js') resolve( graphql( ` { allCosmicjsPosts(sort: { fields: [created], order: DESC }, limit: 1000) { edges { node { slug, title } } } } ` ).then(result => { if (result.errors) { console.log(result.errors) reject(result.errors) } // Create blog posts pages. const posts = result.data.allCosmicjsPosts.edges; _.each(posts, (post, index) => { const next = index === posts.length - 1 ? null : posts[index + 1].node; const previous = index === 0 ? null : posts[index - 1].node; createPage({ path: `posts/${post.node.slug}`, component: blogPost, context: { slug: post.node.slug, previous, next, }, }) }) }) ) }) }
Он выглядит прекрасно, но на данный момент Gatsby не знает, когда должен отображаться этот шаблон. Каждому посту нужен конкретный URL-адрес. Итак, мы сообщим Gatsby о новых URL-адресах, которые нам нужны, благодаря функции createPage.
Путь: gatsby-node.js
const _ = require('lodash') const Promise = require('bluebird') const path = require('path') exports.createPages = ({ graphql, boundActionCreators }) => { const { createPage } = boundActionCreators const indexPage = path.resolve('./src/pages/index.js') createPage({ path: `posts`, component: indexPage, }) return new Promise((resolve, reject) => { const blogPost = path.resolve('./src/templates/blog-post.js') resolve( graphql( ` { allCosmicjsPosts(sort: { fields: [created], order: DESC }, limit: 1000) { edges { node { slug, title } } } } ` ).then(result => { if (result.errors) { console.log(result.errors) reject(result.errors) } // Создание страниц постов в блоге. const posts = result.data.allCosmicjsPosts.edges; _.each(posts, (post, index) => { const next = index === posts.length - 1 ? null : posts[index + 1].node; const previous = index === 0 ? null : posts[index - 1].node; createPage({ path: `posts/${post.node.slug}`, component: blogPost, context: { slug: post.node.slug, previous, next, }, }) }) }) ) }) }
Перезапустите сервер 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.