Импортируйте компонент `` из пакета Gatsby:

```js
import { Link } from 'gatsby'
```

Путь ссылки указывается в ~~атрибуте~~ свойстве `to=""`

```js
Обо мне
```

## Общие компоненты страницы

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

Повторно используемые компоненты позволяют один раз определить структуру блока интерфейса и не дублировать код каждый раз. Поскольку такие компоненты не являются компонентами определяющие саму страницу, а лишь её частью, их создают в отельной папке `/src/components`. Название папки и компонентов может быть любым.

Создадим компонент верхней (header) и нижней (footer) части страницы.

`/src/components/header.js`:

```js
import React from 'react'

const Header = () => {
return (

Добро пожаловать на сайт!

• Главная


• Обо мне

export default Header
```

`/src/components/footer.js`:

```js
import React from 'react'

const Footer = () => {
return (

© 2025 | Создано мной на Gatsby

export default Footer
```

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

```js
import React from 'react'

import Header from '../components/header'
import Footer from '../components/footer'

const IndexPage = () => {
return (

export default IndexPage
```

## Создание макета страниц. Шаблон <Layout>

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

Создадим такой компонент в `/src/components/layout.js`. Все общие компоненты, такие как `Header` и `Footer` теперь находятся в этом макете, а уникальные данные каждой страницы передаются посредством React свойства `children`.

```js
import React from 'react'

import Header from '../components/header'
import Footer from '../components/footer'

const Layout = ({ children }) => {
return (

export default Layout
```

Применение шаблона для главной страницы.

```js
import React from 'react'

import Layout from '../components/layout'

const IndexPage = () => {
return (

Привет, мир!

Добро пожаловать в мой первый сайт на Gatsby!

export default IndexPage
```

## Стилизация компонентов

Для стилизации страницы достаточно импортировать файл стилей на страницу.

`/src/styles/index.css`

```css
p {
color: #333;
font-size: 18px;
}
```

Импортируем стили для страницы «Обо мне» `/src/pages/about.js`

```js
import '../styles/index.css'
```

Стили применятся, но минус такого подхода в том, что правила распространятся не только к данному компоненту, но и абсолютно на все страницы сайта. Даже если придерживаться определённого соглашения по именованию классов, который бы разделял назначение стилей для определённых блоков интерфейса, например, правила в `.header-link` строго для ссылок в блоке `header`, такой подход всё ещё остаётся не идеальным.

## Стилизация с помощью CSS модулей

Gatsby не строго следит за тем, какой подход в стилизации вы используете. Gatsby по умолчанию поддерживает _CSS модули_ – это когда стили разбиты на модули (файлы) и привязаны к определённым компонентам во избежание конфликтов имён классов.

В папке `/src/styles/` создадим первый CSS модуль для стилизации главной страницы. Расширение `.module.css` говорит Gatsby о том, что файл должен обрабатываться как модуль CSS, а не как обычный CSS.

`/src/styles/layout.module.css`

```css
h1 {
color: darkblue;
font-size: 28px;
text-align: center;
}

p {
color: cornflowerblue;
}
```

После, импортируем его в файл шаблона `Layout` и назначим необходимым элементам через свойство `className`.

```js
import * as styles from '../styles/layout.module.css'

...

Привет, мир!

Добро пожаловать в мой сайт на Gatsby!

```

CSS-модули сгенерирует уникальные имена классов с привязкой к именам компонентов `название-файла--селектор-класса--случайные-символы`. Это гарантирует нам, что элементы из разных компонентов будут иметь разные названия классов несмотря на то, что используют один и тот же селектор класса.

### Добавление поддержки Sass/SCSS

Плагин `gatsby-plugin-sass` обеспечивает встраиваемую поддержку Sass/SCSS.

_Установка плагина_

```console
npm install sass gatsby-plugin-sass
```

_Подключение и настройка_

Для того чтобы Gatsby смог использовать этот плагин его нужно подключить и при необходимости настроить в файле конфигурации `gatsby-config.js`, который находится в корне сайта. Описание дополнительных опций настроек в [документации плагина](https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/).

```js
module.exports = {
plugins: [
'gatsby-plugin-sass'
]
}
```

После перезапуска сборки сайта `npm run develop` Gatsby начнёт поддержку плагина.

_Использование_

В файле `/src/styles/layout.scss` опишем наши стили.

```scss
$color: crimson

h1 {
color: $color;
}
```

На главной странице `/src/pages/index.js` импортируем и применим стили к элементам.

```js
import * as styles from './layout.module.scss'

...

Привет, мир!

## Работа с GraphQL

Gatsby может получать данные из одного или нескольких источников, среди которых может быть папка в файловой системе, CMS (WordPress, Drupal, Shopify, ...) или база данных.

Gatsby имеет свой собственный слой данных GraphQL где хранит все данные сайта. Посредством специальных плагинов `gatsby-source-...` добавляется возможность связи с определённым источником. Плагин извлекает данные источника и добавляет их в слой данных GraphQL вашего сайта.


### Использование инструмента GraphiQL

При запуске локального сервера разработки `gatsby develop` Gatsby позволяет использовать встроенную IDE _GraphiQL_ для исследования данных сайта и создания GraphQL-запросов. Инструмент доступен по адресу `http://localhost:8000/___graphql`.

В файле `gatsby-config.js` доступна информация о сайте в объекте `siteMetadata`. Для её получения не требуется никакого `gatsby-source-*` плагина, данные доступны в собственном слое данных GraphQL.

`gatsby-config.js`

```js
module.exports = {
siteMetadata: {
title: 'The Great Gatsby Site',
description: 'My very first Gatsby site',
author: 'Me',
}
}
```

_GraphQL-запрос_

```graphql
{
site {
siteMetadata {
author
description
title
}
}
}
```

_Ответ_

```json
{
"data": {
"site": {
"siteMetadata": {
"author": "Me",
"description": "My very first Gatsby site",
"title": "The Great Gatsby Site"
}
}
}
}
```

### Подключение GraphQL Playground

_GraphQL Playground_ – альтернативный интерфейс IDE для создания, редактирования и тестирования GraphQL-запросов. Чтобы переключить стандартную IDE _GraphiQL_ на _GraphQL Playground_, нужно назначить специальное значение для переменной окружения. Создадим в корне проекта файл `.env.development` в котором укажем следующее значение в формате `KEY=value`:

```ini
GATSBY_GRAPHQL_IDE=playground
```

Для чтения и выполнения команд из `.env` файла установим программу `env-cmd`.

```console
npm install env-cmd --save-dev
```

Для загрузки файла с переменными окружения непосредственно перед запуском сервера разработки изменим скрипт `develop` в `package.json`.

```json
{
"scripts": {
"develop": "env-cmd -f .env.development gatsby develop"
}
}
```

После перезапуска сервера `npm run develop` интерфейс IDE изменится после обновления страницы `http://localhost:8000/___graphql`.

### Запросы в базовый компонент-конструктор. Использование useStaticQuery

Базовые компоненты-конструкторы (building-block components) используются для создания более сложных компонентов и интерфейсов страниц. Запрос данных для такого компонента осуществляется через предопределённую функцию-хук `useStaticQuery` куда передаётся теговый шаблон `graphql` со строкой запроса GraphQL.

`/components/header.js`

```js
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

const Header = () => {
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
title
}
}
}
`)

return (

{data.site.siteMetadata.title}

export default Header
```

`useStaticQuery` можно вызывать один раз для каждого файла. Для выборки данных из нескольких полей следует объединить их в один запрос.

```js
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
title
}
}
siteBuildMetadata {
buildTime
}
}
`)
```

### Запросы в компонентах страницы. Работа с файловой системой

Компоненты страницы (page components) отвечают за структуру и внешний вид всей страницы, навигацию между страницами, а также обработку событий, которые связаны с пользовательским интерфейсом.

Создадим такой компонент страницы в файле `/src/pages/blog.js`, куда выведем список всех опубликованных постов.

```js
import React from 'react'
import Layout from '../components/layout'

const BlogPage = () => {
return (

Blog

List of posts will go in here

export default BlogPage
```

Сами файлы постов в формате MDX создадим в папке `/src/posts/` с произвольным названием.

```text
.
└─ src
└─ posts
├─ blog-post-1.mdx
├─ blog-post-2.mdx
└─ blog-post-3.mdx
```

### Составление запроса и выборка данных. Плагин gatsby-source-filesystem

Для получения данных из файловой системы в фреймворке Gatsby используется плагин `gatsby-source-filesystem`. Для его установки и настройки необходимо добавить его в конфигурацию проекта, а затем использовать GraphQL для запроса контента. Первым шагом будет указание плагина в объекте `plugins` в файле `gatsby-config.js`:

```js
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'posts',
path: `${__dirname}/src/posts/`,
},
},
]
```

Затем можно использовать GraphQL для запроса информации из файловой системы. Например, для получения списка всех файлов в папке `/src/posts/` можно воспользоваться следующим запросом:

```graphql
{
allFile {
edges {
node {
dir
extension
name
publicURL
}
}
}
}
```

## Создание страниц сайта

Описанный ранее плагин `gatsby-source-filesystem` позволял получать данные о файлах, но не о самом содержимом этих файлов. Чтобы добраться до контента этих файлов, используются трансформирующие плагины (transformer plugin). Один из

`gatsby-node.js` конфигурационный файл Node.js позволяющий нам подключится ко всевозможным API Node.js, которые предоставляет Gatsby.

### Генерация ссылок на публикации. API onCreateNode

Термин _«слаг»_ (англ. _"slug"_) относится к последней части URL и определяет уникальную строку, как правило, понятную для человека и служит для обращения к какому-либо ресурсу.

Для его динамической генерации воспользуемся конфигурационным файлом `gatsby-node.js` позволяющий нам подключится ко [всевозможным API Node.js](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/), что предоставляет Gatsby. В нём опишем поведение для API `onCreateNode`, в котором назначим _slug_ для всех создаваемых страниц.

```js
module.exports.onCreateNode = ({ node, actions }) => {
const { createNodeField } = actions
if (node.internal.type === 'MarkdownRemark') {
const slug = path.basename(node.fileAbsolutePath, '.md')
createNodeField({
node,
name: 'slug',
value: slug
})
}
}
```

В скрипте выше мы фильтруем только те узлы, тип которых `MarkdownRemark`, затем через встроенный модуль Node.js `path` разбираем значение поля `fileAbsolutePath`, содержащий абсолютный путь к файлу поста и получаем через `path.basename()` только имя, обрезав расширение `.md`.

Благодаря `createNodeField` _slug_ для нашей публикации будет доступен в слое данных GraphQL.

### Генерация новой страницы для каждой публикации. API createPages

Для этой задачи нам понадобится воспользоваться Gatsby Node API `createPages`, который предоставляет всё необходимое для динамической генерации новых страниц сайта.

`gatsby-node.js`

```js
module.exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// Получение пути к шаблону
const blogTemplate = path.resolve('./src/templates/blog.js')
// Запрос полей slug публикаций
const response = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)

// Добавление данных в контекст при создании каждой новой страницы
response.data.allMarkdownRemark.edges.forEach((edge) => {
createPage({
component: blogTemplate,
path: `/blog/${edge.node.fields.slug}`,
context: {
slug: edge.node.fields.slug
}
})
})
}
```

Переданные данные отобразятся в шаблоне который мы создадим далее. Доступ к этим дополнительным данным будет осуществлён по запросу из страницы публикации.

### Трансформация данных. Плагин gatsby-transformer-remark

Плагин `gatsby-transformer-remark` используется для преобразования Markdown-файлов в структурированные данные, которые затем могут быть использованы для динамического построения страниц в Gatsby. Плагин не требует дополнительных настроек конфигурации в `gatsby-config.js`.

После установки и перезапуске сборки проекта в слое данных GraphQL появятся запросы `MarkdownRemark` (для отдельного файла) и `allMarkdownRemark` (дя списка файлов). Готовая страница со всеми необходимыми запросами может выглядеть так:

```js
import React from 'react'
import { Link, graphql, useStaticQuery } from 'gatsby'

import Layout from '../components/layout'
import * as styles from './blog.module.scss'

const BlogPage = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
title
date
}
fields {
slug
}
}
}
}
}
`)

const li = data.allMarkdownRemark.edges.map((item, k) => {
return (

return (

Blog

{li}

)
}

export default BlogPage
```

### Создание шаблона страницы публикации

Создадим отдельный шаблон для будущих страниц, а чтобы компонент шаблона не путать с другими стандартными компонентами, заведём его в папке `/src/templates/`.

Поскольку мы запрашиваем данные поста ориентируясь по его _slug_, мы заводим переменную запроса (Query Variable), которая указывается сразу после ключевого слова `query`.

```graphql
query ($slug: String!) {
...
}
```

Gatsby сам подставит значение _slug_ в качестве аргумента в GraphQL-запросе `( fields: { slug: { eq: $slug } })`.

`/src/templates/blog.js`

```js
import React from 'react'
import { graphql } from 'gatsby'

import Layout from '../components/layout'

export const query = graphql`
query ($slug: String!) {
markdownRemark ( fields: { slug: { eq: $slug } }) {
frontmatter {
title
date
}
html
fields {
slug
}
}
}
`

const Blog = ({ data }) => {
return (

{data.markdownRemark.frontmatter.title}

{data.markdownRemark.frontmatter.date}

export default Blog
```

Далее, мы экспортируем GraphQL-запрос, чтобы получить доступ к его результатам в свойстве компонента шаблона `Blog`. Этот компонент отобразит нам готовую страницу публикации.

### Добавление изображений к постам

Для добавления возможности использования изображений в наших постах понадобиться установить и настроить три новых Gatsby плагинов.

Сохраним перед этим необходимые изображения в той же папке, где и будут находиться наши файлы постов, например, в папке `/src/posts/`. Подключим изображения в тексте публикации.

```markdown
---
title: "My 1st post"
date: 2025-01-15
---

Welcome to the first posts of this blog.


## Topics Covered

1. Components
2. GraphQL
3. Images
4. Plugins, Themes, & Starters
5. Data Fetching
```

По умолчанию Gatsby не знает откуда вы пытаетесь извлечь файлы картинок. Для этого понадобиться установить и настроить плагин, который бы смог обрабатывать Markdown-синтаксис вставки изображений в наших постах.

* `gatsby-plugin-sharp` – этот плагин позволяет обрабатывать изображения на базе библиотеки Sharp. Как правило, не используется напрямую, а выступает вспомогательным плагином для других плагинов;

* `gatsby-remark-images` – позволяет обрабатывать Markdown-синтаксис, где были вставлены изображения;

* `gatsby-remark-relative-images` – преобразует источники (src) изображений в `markdown/html/frontmatter` так, чтобы они были относительными к родительскому каталогу узла. Это поможет `gatsby-remark-images` находить изображения вне папки узла.

Окончательные настройки плагинов для картинок в `gatsby-config.js` могут выглядеть так:

```js
module.exports = {
siteMetadata: {
title: 'The Great Gatsby Site',
description: 'My very first Gatsby site',
author: 'Me',
},
plugins: [
'gatsby-plugin-image',
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'src',
path: `${__dirname}/src/`
}
},
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-relative-images',
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 750,
linkImagesToOriginal: false
}
}
]
}
}
],
}
```

Параметр `maxWidth` плагина `gatsby-remark-relative-images` отвечает за максимальную ширину контейнера, в котором будет помещено изображение;

`linkImagesToOriginal` добавит ссылку на исходное изображение, когда по клику отобразится полноразмерная картинка.

### Страница 404

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

Для создания страницы 404 всё что необходимо сделать – это создать страницу с одноимённым названием в `/src/pages/404.js`. В этой странице мы экспортируем React-компонент, что отобразит необходимые данные, когда пользователь посетит не существующую страницу.

В шаблоне мы по прежнему хотим оставить навигацию по сайту, по этой причине импортируем шаблон `Layout`, а уже внутри него отобразим необходимую информацию о странице.

`404.js`

```js
import React from 'react'

import { Link } from 'gatsby'
import Layout from '../components/layout'
import Head from '../components/head'

const NotFound = () => {
return (

Page Not Found

Head Home

export default NotFound
```

В _production_ версии сборки сайта, если пользователь зайдёт на страницу, которая не была найдена, ему немедленно отобразится данный шаблон `404.js`.

## Gatsby + Contentful

_Contentful_ – это облачная, безголовая (headless) система управления контентом (CMS). Contentful + Gatsby одна из популярных связок в построении сайтов с задействованием этих двух инструментов и рассматриваемый здесь способ их использования применим с теми же принципами и к другим CMS.

В бесплатной версии аккаунта пользователю доступен лимит в 25 000 записей для публикаций (файлы изображений считаются отдельно, 1 файл = 1 запись), две локали для мультиязычного сайта, 48 видов типа контента, 2 роли прав пользователей (администратор и редактор).

После регистрации аккаунта в системе Contentful, создания там рабочего пространства (Space), нам откроется рабочий интерфейс CMS. Основные вкладки системы всего три:

* Content model – описывает модель (структуру) будущего элемента контента, определяет поля, которые будут задействованы при создании записи (заголовок, дата, тело текста, ...);
* Content – список экземпляров этого контента;
* Media – медиафайлы.

После оформления модели для публикаций, а также добавления самих записей публикаций, всё что остаётся сделать – получить доступ к этим данным через Gatsby GraphQL API.

### Установка и настройка окружения. Плагин gatsby-source-contentful

Плагин `gatsby-source-contentful` позволяет Contentful стать источником данных для Gatsby проекта.

**Установка плагина**

```shell
npm install gatsby-source-contentful gatsby-plugin-image
```

**Настройка плагина**

Всё, что необходимо сделать это указать в конфигурационном файле `gatsby-config.js` такие поля как `spaceId` и `accessToken`, который предоставляет Contentful, если в интерфейсе программы пройти в `Settings` => `API keys`.

Воспользуемся переменными окружения, чтобы скрыть чувствительные данные из исходного кода. В корне проекта в файле `*.env` создадим [переменные окружения](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/) для описанных выше полей с произвольным названием, чтобы затем указать их в конфигурационном файле.

```js
module.exports = {
plugins: [
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
},
},
`gatsby-plugin-image`,
],
}
```

### Запрос данных из источника Contentful

После перезапуска сборки в слое данных GraphQL появятся новые запросы для Contentful. Если название модели контента вы дали, например `BlogPost`, то названия запросов для данного типа контента будут соответственно `contentfulBlogPost` – для запроса данных одного отдельного поста и `allContentfulBlogPost` – для получения списка постов.

Пример запроса на извлечения списка публикаций из CMS Contentful:

```graphql
query {
allContentfulBlogPost (
sort: {
fields: publishedDate,
order: DESC
}
) {
edges {
node {
title
slug
publishedDate(formatString: "MMMM Do, YYYY")
}
}
}
}
```

### Вывод списка постов. Запрос allContentfulBlogPost

Чтобы вывести списком заголовки всех публикаций в Contentful воспользуемся запросом `allContentfulBlogPost`. В IDE GraphiQL выберем поля `title`, `slug` и `publishedDate`. Последний отвечает за дату публикации, который мы можем представить в любом формате. Аргумент `formatString` позволяет форматировать вывод даты согласно шаблону библиотеки [Moment.js](https://momentjs.com/docs/#/displaying/).

Сами посты отсортируем `sort` по дате публикации `publishedDate` от поздних к ранним `DESC`.

```graphql
query {
allContentfulBlogPost(sort: {publishedDate: DESC}) {
edges {
node {
publishedDate(formatString: "MMMM Do, YYYY")
slug
title
}
}
}
}
```

Теперь, когда у нас готов запрос, выведем этот список постов на странице `/src/pages/blog.js`. Готовый код страницы может выглядеть так:

```js
import React from 'react'
import { Link, graphql, useStaticQuery } from 'gatsby'

import Layout from '../components/layout'
import Head from '../components/head'
import * as styles from './blog.module.scss'

const BlogPage = () => {
const data = useStaticQuery(graphql`
query {
allContentfulBlogPost (
sort: {
fields: publishedDate,
order: DESC
}
) {
edges {
node {
title
slug
publishedDate(formatString: "MMMM Do, YYYY")
}
}
}
}
`)

const li = data.allContentfulBlogPost.edges.map((item, k) => {
return (

return (

Blog

{li}

)
}

export default BlogPage
```

### Рендеринг публикации на странице. Запрос contentfulBlogPost

В этом разделе нам предстоит разобрать как динамически создавать страницы Gatsby на основе данных Contentful из ссылок, которые ведут со страницы `/src/pages/blog.js`.

В реализации этой задачи нам понадобится задействовать API `createPages` в файле `gatsby-node.js`. Поскольку ссылки на страницы генерируются самим Contentful, то здесь нам не понадобится API `onCreateNode`, как это было необходимо в работе с источником данных из файловой системы.

Чтобы получить список из `slug` наших публикаций воспользуемся GraphQL запросом `allContentfulBlogPost`.

`gatsby-node.js`

```js
const path = require('path')

module.exports.createPages = async ({ actions, graphql }) => {
const { createPage } = actions
const blogTemplate = path.resolve('./src/templates/blog.js')

const response = await graphql(`
query {
allContentfulBlogPost {
edges {
node {
slug
}
}
}
}
`)

response.data.allContentfulBlogPost.edges.forEach((edge) => {
createPage({
component: blogTemplate,
path: `/blog/${edge.node.slug}`,
context: {
slug: edge.node.slug
}
})
})
}
```

В файле `/src/templates/blog.js` отвечающий за вывод публикации сформируем GraphQL запрос используя `contentfulBlogPost`. В качестве аргумента запрос будет принимать параметр `slug`, для выборки конкретного поста.

Вывод таких простых полей как заголовок и дата публикации не вызывает вопросов, но что касается текста публикации `body`, то это более сложная структура, которая потребует обработки библиотекой `@contentful/rich-text-react-renderer`. Данный NPM-пакет предоставляет единственную функцию `documentToReactComponents()`, которая преобразует JSON-формат текста публикации на набор React компонентов, готовые для отображения в любом месте страницы.

```js
import React from 'react'
import { graphql } from 'gatsby'
import { GatsbyImage } from 'gatsby-plugin-image'
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
import { BLOCKS } from "@contentful/rich-text-types"

import Layout from '../components/layout'
import Head from '../components/head'

export const query = graphql`
query($slug: String!) {
contentfulBlogPost(slug: {eq: $slug}) {
title
publishedDate(formatString: "MMMM Do, YYYY")
body {
raw
references {
contentful_id
title
description
gatsbyImageData(formats: [WEBP, AUTO])
}
}
}
}
`

const Blog = ({ data }) => {
const options = {
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: node => {
const img = data.contentfulBlogPost.body.references.find(
el => el.contentful_id === node.data.target.sys.id)
return (

)
}
}
}

return (

{data.contentfulBlogPost.title}

{data.contentfulBlogPost.publishedDate}

export default Blog
```

Для того чтобы отобразить картинки, нужно указать необязательный второй параметр `options` для функции `documentToReactComponents()`, в котором передать настройки отображения для встраиваемых данных, в нашем случае для изображений.

### Настройка метаданных сайта. React Helmet

_React Helmet_ – многоразовый, универсальный ~~«шлем»~~ React компонент для управления метаданными, что содержатся в секции ``.

**Установка и настройка**

```shell
npm install gatsby-plugin-react-helmet react-helmet
```

В файле `gatsby-config.js` достаточно объявить использование плагина без дополнительных настроек `options`.

```js
module.exports = {
// ...
plugins: [
'gatsby-plugin-react-helmet',
// ...
]
}
```

**Использование**

Создадим динамический заголовок `` для страниц сайта в формате `Заголовок страницы | Название сайта`. Чтобы не дублировать GraphQL-запрос для выборки нужных данных, создадим компонент `/src/components/head.js` в котором один раз реализуем необходимую логику.

```js
import React from 'react'
import { Helmet } from 'react-helmet'
import { useStaticQuery, graphql } from 'gatsby'

const Head = ({ title }) => {
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
title
}
}
}
`)

return
}

export default Head
```

`Заголовок страницы` будет передаваться как свойство от родительского компонента.

Вызов компонента `Head` на примере главной страницы в `/src/pages/index.js`.

```js
import React from 'react'

import Layout from '../components/layout'
import Head from '../components/head'

const IndexPage = () => {
return (

Hello, World!

Welcome to The Great Gatsby Website

export default IndexPage
```

### Деплой сайта Gatsby

В качестве платформы для развёртывания Gatsby сайта воспользуемся [Netlify](https://netlify.com), в котором есть возможность прямой интеграции с данным фреймворком. Для этого необходимо загрузить исходный код сайта в GitHub репозиторий, из которого затем платформа Netlify будет подгружать файлы сайта и все проводимые в нём изменения.

Для начала сделаем коммит произведённых изменений перед отправкой их в удалённый репозиторий.

```console
git add .
git commit -am "Final commit"
```

Добавление удалённого репозитория и загрузка содержимого локального репозитория в удаленный.