Как создать блог с помощью Gatsby 💻

Что такое Гэтсби? 🤔

Gatsby - это генератор статических сайтов на основе React и GraphQL.

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

Содержание 🔥

  1. Создать новую страницу
  2. Ссылка Гэтсби
  3. Стиль страницы
  4. Добавление мета-тегов на страницу
  5. Многомерные выражения
  6. Работа с изображениями
  7. Оптимизация изображения
  8. Добавление изображений в сообщения MDX
  9. Подсветка синтаксиса
  10. Анализ размера пакета
  11. Создать сайт

Что делает Гэтсби особенным? 😲

  1. То, как Гэтсби использует GraphQL для создания своего уровня данных. Gatsby создан для сбора ваших данных, где бы они ни находились: Markdown, JSON, ваша любимая CMS, сторонние API-интерфейсы, где угодно! И во время сборки он создает внутренний сервер GraphQL для всех этих данных. Таким образом, в ваших компонентах реакции все ваши данные запрашиваются во время сборки из того же места таким же образом через GraphQL.
  2. Гэтсби удалил шаблон для начала работы и развертывания приложений в производственной среде.
  3. Гэтсби развертывает статические активы, поскольку они статичны, вам не нужно беспокоиться о доступе к базе данных, сбое сервера и т. Д.
  4. Как только вы закончите с унифицированным запросом Gatsby, вы запускаете процесс сборки Gatsby, который дает папку со статическими активами. Затем вы можете разместить его на любом сервере, таком как Netlify, S3, FTP.
  5. Как только вы открываете браузер, он превращается в полнофункциональное приложение для реагирования. Таким образом, вы обслуживаете не только статические сайты, вы фактически обслуживаете прогрессивное веб-приложение.
  6. Гэтсби следует шаблону PRPL и другим лучшим практикам в области производительности. Он генерирует только статические активы (сервер не требуется).
  7. Если вы хотите изменить или модифицировать webpack или babel, вы можете это сделать. При изменении веб-пакета вам не нужно изменять полную конфигурацию, так как Гэтсби позаботится о том, чтобы составить ее вместе. Настройте только то, что вам нужно, выброса не требуется (удаление всего приложения, как сохранение всего).

Приступим к созданию страницы Гэтсби 📄

Клонируем репо Gatsby Intro.

Теперь пройдемся по файлам:

  • В package.json вам нужны только три зависимости для сборки Gatsby: gatsby, react, react-dom.
  • В src у вас есть весь код просмотра.
  • В static он сгенерирует все статические ресурсы после создания страницы.

Для запуска:

$ npm install
$ npm run develop

Введите хост http://localhost:8000 в браузер.

1. Создать новую страницу 🆕

По пути src/pages добавьте новый файл с именем about.js

about.js:

import React from 'react'
export default() => (
<>
    <div> About Me</div>
</>
)

Как вы знаете, имя файла указано как about.js, поэтому вы можете просто перейти на страницу about как localhost:8000/about

Нет необходимости перезапускать сервер после создания страниц. Просто создайте файл и проверьте в браузере, нажав новый URL-адрес страницы. Как, Гэтсби также поддерживает горячую перезагрузку. 🥳

2. Ссылка на Гэтсби 🔗

Вы можете использовать тег привязки, но при использовании тега привязки он перезагружает всю страницу (это не очень хороший показатель для производительности). Как мы знаем, Gatsby создает приложение React, у вас есть возможность выполнять динамическую маршрутизацию.

Итак, Гэтсби поставляется в комплекте с React Router.

import React from 'react';
import {Link} from 'gatsby'
export default () => (
    <>
        <div>Homepage</div>
        <Link to='/about'>About Us &rarr;</Link>
    </>
)

3. Стиль страницы 🎨

Для стилизации вы можете использовать любой плагин, например Emotion, SASS и т. Д. Я буду использовать здесь SASS.

Чтобы настроить SASS, следуйте этой статье

4. Добавление мета-тегов на страницу 🔖

Если вы хотите повторно использовать общие фрагменты данных на сайте (например, заголовок вашего сайта), вы можете сохранить эти данные в siteMetadata.

Чтобы добавить на страницу метатеги для повышения эффективности SEO, следуйте этой статье

5️. Многомерные выражения

MDX - это способ включить компонент React внутри разметки.

Компоненты визуализации в многомерных выражениях.

Чтобы отобразить MDX в компоненте, необходимо установить некоторые зависимости:

$ npm i gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

После установки плагина вам нужно настроить gatsby-config.js.

gatsby-config.js:

plugins: [
        'gatsby-plugin-sass', 
        'gatsby-plugin-react-helmet',
          {
            resolve: 'gatsby-plugin-mdx',
            options: {
                defaultLayouts: {
                    default: require.resolve('./src/components/layout')
                }
            }
          }
          ]

gatby-mdx требует небольшой настройки, например, передачи параметров. Так что пишу с решимостью.

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

ПРИМЕЧАНИЕ. Этот макет будет использоваться на всех страницах.

После добавления вышеуказанной конфигурации перезапустите сервер. И создайте страницу team.mdx. Поскольку мы добавили плагин mdx, теперь он ищет файл mdx в каталоге страниц.

team.mdx:

# My team
Welcome to Our Team 😋

Отметьте localhost:8000/team, откроется страница команды.

Как вы можете добавить компонент реакции в файл MDX? 🤔

Мы будем создавать wave компонент, в котором мы будем увеличивать количество нажатий на кнопку.

wave.js:

import React, {useState} from 'react'
import './wave.scss'
const Wave = () => {
    const [waves, setWaves] = useState(0);
    const label = `👋 ${waves} ${waves == 1 ? 'wave' : 'waves'}`;
    return (
        <button onClick={() => setWaves(waves+1)}>{label}</button>
    )
}
export default Wave

Как мы можем добавить компонент в файл MDX? 😲

team.md:

import Wave from '../components/wave/wave'
# Contact Me
Welcome to contact page 🥳
## You can wave to Me
<Wave />

Ага, вот и все. Просто нужно импортировать компонент и добавить его на место. 🤩

Кроме того, вы можете добавить JSX в MDX.

ПРИМЕЧАНИЕ. У вас должно быть 4 разрыва строки, чтобы JSX оставил части уценки внутри 😐

<div style = {{background: 'red'}}>
// 1
// 2
## helloo
// 3
// 4
</div>

Создание блога с использованием многомерных выражений

Создание двух постов с использованием mdx.

привет-мир.mdx:

---
title: "Hello World!"
slug: hello-world
author: Suprabha
---
This is my first blog post!

Внутри --- называется frontmatter.

другой-post.mdx:

---
title: Another Post!
slug: another-post
author: Suprabha
---
This is my second blog post!

Как сделать так, чтобы эти сообщения отображались в представлении Гэтсби? 🤔

Используя плагин gatsby-source-filesystem, вы попадете на уровень данных, чтобы получить к ним доступ на странице.

$ npm i gatsby-source-filesystem

gatsby-config.js: (в плагины)

{
    resolve: 'gatsby-source-filesystem',
    options: {
        name: 'posts',
        path: 'posts'
    }
}

В приведенном выше фрагменте я указал путь, поэтому он будет выглядеть только в папке posts. Он будет загружать все, что найдет, как части уровня данных в пути сообщений.

Он получит файлы MDX и преобразует их в узлы GraphQL.

Теперь мы будем запрашивать сообщения с помощью GraphQL.

В GraphQL edge описывает отношения, а node описывает сами данные (только в Gatsby).

Вы можете найти все изменения, связанные с созданием постов здесь.

После отображения списка сообщений на домашней странице, как только вы нажмете на любое сообщение, отобразится страница 404.

Чтобы решить эту проблему, вам необходимо настроить конфигурацию узла gatsby в корне.

gatsby-node.js:

// gatsby give utility methods actions, graphql, reporter
// reporter is gatsby console log 
exports.createPages = async ({actions, graphql, reporter}) => {
    // passing only slug, so accg to page we will fetch the rest of the data
    const result = await graphql(`
        query {
            allMdx {
                nodes {
                    frontmatter {
                        slug
                    }
                }
            }
        }
    `);
        // check the error scenario
    if(result.errors) {
        reporter.panic("failed to craete post", result.errors)
    }
        // if there is no error then getting nodes into posts variable
    const posts = result.data.allMdx.nodes
        // need to iterarte through the posts so using forEach here
    posts.forEach(post => {
        actions.createPage({
            path: post.frontmatter.slug,
            component: require.resolve("./src/templates/post/post.js"),
            context: {
                slug: `/${post.frontmatter.slug}`
            }
        });
    });
};

В приведенном выше фрагменте у вас есть что-то под названием context. Чтобы получить данные в post.js, вам нужно посмотреть контекст. Вы можете получить контекст в компоненте Post через pageContext

post.js:

const PostTemplate = ({pageContext}) => (
    <pre>{JSON.stringify(pageContext, null, 2)}</pre>
)
//output
{
    "slug": "/hello-world/"
}

Теперь вы можете использовать данные. В контексте вы также можете передать title, author, body, но позже это будет немного сложно, поэтому просто добавив slug, вы получите остальные данные, используя этот слаг.

Каждый раз, когда вы меняете узел gatsby, перезагружайте сервер.

Следующий код был написан здесь.

Чтобы получить данные на странице предварительного просмотра публикации, вам нужно изучить контекст. Вы будете выполнять запрос на основе slug/url из контекста для всех данных.

post.js:

import React from 'react'
import {graphql} from 'gatsby'
import {Link} from 'gatsby'
import {MDXRenderer} from 'gatsby-plugin-mdx'
import './post.scss'
import Layout from '../../components/layout'
export const query = graphql`
    query($slug: String!) {
        mdx(frontmatter: {slug: {eq: $slug}}) {
            frontmatter {
                title
                author
            }
            body
        }
    }
`
// aboved query will return data
const PostTemplate = ({data: {mdx: post }}) => (
    <Layout className='post-wrapper'>
        <h1>{post.frontmatter.title}</h1>
        <p className='author'>Posted by author</p>
        <MDXRenderer>{post.body}</MDXRenderer>
        {/* <pre>{JSON.stringify(pageContext, null, 2)}</pre> */}
        <Link to="/">&larr; back to all posts</Link>
    </Layout>
)
export default PostTemplate

В приведенном выше фрагменте вы можете видеть, что мы используем MDXRenderer. Когда вы проверяете body запроса, он будет в другой форме, которую вы не сможете прочитать (смешение как MDX, так и JSX). Используя MDXRenderer, вы можете отобразить тело в правильном формате.

Вы можете найти все операторы graphql здесь.

6. Работа с изображениями

Добавьте изображения в статическую папку, которая будет легко доступна.

Вы можете добавить изображение на главную страницу как:

<div className='hero-bg'> </div>
.hero-bg {
    background-image: url('../../../static/images/banner.jpg');
    height: 50vh;
    background-position: top 40% center;
    background-size: cover;
}

Я внес изменения здесь.

7. Оптимизация изображения

Найдите статью здесь для оптимизации изображений.

8. Добавление изображений в сообщения многомерных выражений.

Вы можете добавить изображения в сообщения MDX, установив gatsby-image зависимостей:

$ npm i gatsby-image

То же, что gatsby-background-image, но gatsby-image для обычных изображений.

post-preview.js:

import Image from 'gatsby-image'
<Image 
    className='post-image'
    fluid={post.image.sharp.fluid}
    alt={post.title}
/>

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

Чтобы добавить его в данные поста:

import {graphql, useStaticQuery} from 'gatsby';
const usePosts = () => {
    const data = useStaticQuery(graphql`
        query {
            allMdx {
            nodes {
                frontmatter{
                    title
                    slug
                    author
                    image {
                        sharp: childImageSharp {
                            fluid(
                                maxWidth: 200
                                maxHeight: 200
                                duotone: {shadow: "#663399", highlight: "#ddbbff"}
                            ) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
                excerpt
            }
            }
        }
    `)
    return data.allMdx.nodes.map(post => ({
        title: post.frontmatter.title,
        slug: post.frontmatter.slug,
        image: post.frontmatter.image,
        author: post.frontmatter.author,
        excerpt: post.excerpt
    })
    ) 
}
export default usePosts

В приведенном выше фрагменте вы добавили maxWidth, maxHeight и duoTone для определения размера, а двухцветный - для цвета фона размытого изображения.

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

Вы можете найти весь фрагмент здесь

Добавление оптимизированного изображения в сообщения

Если вы хотите, чтобы изображение отображалось в строке или в блоге, вам необходимо установить еще один плагин под названием gatsby-rebec-images.

привет-мир.mdx:

![First banner](./images/00-banner.jpg)

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

$ npm i gatsby-remark-images

Remark - это анализатор уценки, который может конвертировать уценку в HTML.

gatsby-config.js:

{
    resolve: 'gatsby-plugin-mdx',
    options: {
        defaultLayouts: {
            default: require.resolve('./src/components/layout')
        },
        gatsbyRemarkPlugins: ['gatsby-remark-images'],
        plugins: ['gatsby-remark-images'],
    }
}

Теперь после перезапуска сервера изображение заработает 🙌🏻

9. Подсветка синтаксиса

Чтобы поработать с подсветкой синтаксиса, ознакомьтесь со статьей здесь.

10. Анализ размера пакета 🎒

Последнее, что нужно сделать, это проверить вывод, что единственное, что вы добавили, должно быть там. Чтобы убедиться в этом, вы проверите файл bundle.

Чтобы проверить это, вы будете использовать плагин gatsby-plugin-webpack-bundle-analyzer.

$ npm i gatsby-plugin-webpack-bundle-analyzer

gatsby-config.js:

{
    resolve: 'gatsby-plugin-webpack-bundle-analyzer',
    options: {
        production: true,
        disable: !process.env.ANALYZE_BUNDLE_SIZE,
        generateStatsFile: true,
        analyzerMode: 'static',
    }
}

Если вы хотите, чтобы этот плагин запускался только в производственном пакете, отключите параметр Должен запускаться только при проверке среды.

package.json:

"scripts": {
    "analyze": "ANALYZE_BUNDLE_SIZE=true gatsby build"
}

Если вы используете MACbook, то все в порядке. Но если вы используете окна, добавьте этот скрипт и добавьте перекрестные зависимости env.

"scripts": {
    "analyze": "cross-env ANALYZE_BUNDLE_SIZE=true gatsby build"
}

Как только это будет сделано, запустите команду анализа в терминале

$ npm run analyze

Он перенаправит вас на страницу ниже:

В приведенном выше фрагменте вы можете увидеть, каков размер пакета и какие изображения вы используете.

Если вы импортируете какую-либо функцию lodash, попробуйте импортировать ее через lib, чтобы она загрузила всю функцию lodash.

Вы можете найти полный фрагмент здесь 😎

11. Создайте веб-сайт ⛩

После запуска команды сборки:

$ npm run build

Он создаст все статические файлы в общей папке.

Затем вы можете обслуживать страницу с помощью следующей команды:

$ npm run serve

И вы можете увидеть сайт сборки на localhost:9000

Еще одна замечательная вещь: если вы находитесь на главной странице и как только вы наводите курсор на ссылку меню about us, она предварительно загружает данные страницы о нас. Поэтому, когда вы перейдете на страницу о нас, она загрузится очень быстро, 😍🤩 (файл уже будет доступен)

Я скоро напишу статью о том, как мы можем развернуть блог Gatsby на Netlify 😍

Очистка кеша в Гэтсби 🧹

Добавление приведенного ниже скрипта в package.json:

"cache": "gatsby clean"

Запустите его в терминал:

$ npm run cache

Ссылка 🧐

🌟 Twitter | 👩🏻‍💻 Suprabha.me | 🌟 Instagram