Сышышь ты, выходи сюда,
поговорим !

Как создать статический блог: использование инструментов Gatsby, CosmicJS и React

Опубликовано: 23.08.2018

От автора: в этом руководстве мы расскажем, как создать простой статический блог с помощью 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.

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

Научиться
rss