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

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

Предварительные требования:

  • Узел
  • НПМ

Установите Гэтсби:

npm install -g gatsby && npm install -g gatsby-cli

Создать новый проект с помощью начального блога:

Следующая команда создаст папку с именем my-blog. Вы можете назвать его как-нибудь по-другому, если хотите. URL — это ссылка на начальный блог Gatsby, и, передав его в качестве аргумента, мы создаем проект с этими файлами вместо начального по умолчанию.

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog 
cd my-blog

Гэтсби Девелопмент:

Запустите свой сервер gatsby develop. Gatsby, как и обычный React, имеет горячую перезагрузку, поэтому многие изменения, которые вы будете вносить, вы сможете сделать без перезагрузки сервера. Если вы создаете новые файлы Markdown или иным образом изменяете данные, извлекаемые GraphQL, вам потребуется перезапустить сервер.

В вашем браузере вы должны увидеть что-то вроде этого:

Посмотри на это! У вас уже есть блог с сообщениями, и вы можете нажать на отдельный пост:

Сделайте это своим:

Первое, что вы хотите сделать, чтобы начать делать это своим, это открыть gatsby-config.js в корневой папке. Замените этот контент своими данными:

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: `Kyle Mathews`,
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
    social: {
      twitter: `kylemathews`,
    },
  },

Чтобы добавить собственное изображение профиля, откройте ./content/assets и удалите там profile-pic.jpg. Добавьте свою картинку и переименуйте ее в profile-pic.jpg.

Редактировать сообщения:

Вы заметите, что в папке содержимого есть папка с именем blog. Отсюда Гэтсби запрашивает посты. Это просто папки с файлами Markdown. Вы хотите назвать свою папку чем-то информативным, например, заголовком вашего сообщения или датой вашего сообщения. Файл Markdown всегда должен называться index.md. Откройте папку hello-world и index.md в ней. Обратите внимание на этот синтаксис:

---
title: Hello World
date: "2015-05-01T22:12:03.284Z"
---

Это называется frontmatter и, по сути, является способом отправки этих данных в GraphQL. Он не будет отображаться как HTML, но все остальное в вашем файле Markdown будет отображаться. Давайте сделаем паузу и посмотрим, где используются эти данные. Откройте ./src/templates/blog-post.js. Это шаблон, используемый для каждого нового сообщения в блоге или файла Markdown, который вы создаете. Обратите внимание на эти строки:

<h1>{post.frontmatter.title}</h1>
        <p
          style={{
            ...scale(-1 / 5),
            display: `block`,
            marginBottom: rhythm(1),
            marginTop: rhythm(-1),
          }}
        >
          {post.frontmatter.date}
        </p>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />

Чтобы получить название и дату, это относится к frontmatter из post. Вы можете добавить любые другие атрибуты туда, которые вам нравятся. Теги, категории, избранный путь к изображению. Контент отображается через post.html.

Возвращаясь к сообщению Hello World, попробуйте отредактировать часть контента и изменить дату на сегодняшнюю. Отформатируйте его как «2019–02–08». Поскольку вы не создаете новый файл, он перезагрузится в горячем режиме. Начать вести блог очень просто. Всякий раз, когда вы создаете новый пост, создайте новую папку с соответствующим index.md и повторно запускайте gatsby develop. Если вы еще не знаете синтаксис Markdown, вам придется его изучить, но, например, вы можете использовать # для <h1> и *s для маркеров. Вы также можете добавить необработанный HTML-код в свой файл Markdown, поэтому, если вы хотите добавить изображение, но присвоить ему класс (или что-то еще с идентификатором или классом), вы также можете это сделать.

Index.js:

Теперь мы понимаем, как сделать пост и какой файл выступает в качестве шаблона для них, но как и где это происходит? Во-первых, давайте посмотрим, где. В Gatsby все, что действует как страница, должно быть помещено в страницы, если это не создается программно. В index.js у нас есть <Layout>, обертывающий все содержимое нашей домашней страницы. Внизу файла у нас есть GraphQL pageQuery. Все, что вам нужно знать прямо сейчас, это то, что на этой странице он делает запрос к вашим сообщениям в блоге в папке ./content/blog, а затем передает ответ в компонент BlogIndex в качестве реквизита с именем data. Переменные в начале просто деструктурируют его. Хотите знать, как это выглядит? Добавьте отладчик вверху внутри функции рендеринга и введите data в консоли DevTools. Вы можете увидеть, как мы пришли к нашей переменной posts, углубившись в allMarkdownRemark и edges. Давайте сделаем еще один шаг и посмотрим, что делает этот запрос GraphQL. Перейдите к localhost:8000/___graphql и скопируйте запрос GraphQL:

{
  site {
    siteMetadata {
      title
    }
  }
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}) {
    edges {
      node {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
        }
      }
    }
  }
}

Нажмите «Выполнить» и осмотрите дерево справа. Вы даже можете добавить такой фильтр:

{
  site {
    siteMetadata {
      title
    }
  }
  allMarkdownRemark(filter: {frontmatter:{title: {eq: "Hello World"}}} sort: {fields: [frontmatter___date], order: DESC}) {
    edges {
      node {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
        }
      }
    }
  }
}

Вернемся к нашему файлу index.js. В начале нашего компонента у нас есть компонент SEO, где вы можете добавить массив ключевых слов. Если вы разработчик полного стека, добавьте fullstack developer. Как кто-то может найти вас в Google? Добавьте эти ключевые слова.

Ниже у нас есть компонент Bio. Как и SEO, это отдельный компонент, который вы можете просмотреть в папке компонентов. Компонент Bio просто запрашивает метаданные сайта, которые вы ввели в gatsby-config.js, и добавленное вами изображение профиля.

Затем у нас есть наша функция posts.map(). На данный момент, если вы работали с React, должно быть довольно ясно, что здесь происходит. Давайте посмотрим, как эти посты создаются автоматически.

Gatsby-node.js

В корневой папке откройте gatsby-node.js. Мы видим, что у нас есть функция createPages(). У нас есть переменная blogPost, которая ссылается на шаблон сообщения в блоге в нашей папке шаблонов. У нас есть запрос GraphQL, и мы говорим, что когда этот запрос завершится, сделайте что-нибудь. Он захватывает сообщения из этого запроса:

const posts = result.data.allMarkdownRemark.edges

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

createPage({
        path: post.node.fields.slug,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })

В объекте контекста мы передаем предыдущий и следующий, поэтому в любом заданном сообщении вы можете перейти к предыдущему или следующему сообщению. И это все! Каждый раз, когда мы запускаем gatsby develop, он просто запускает эту функцию, программно создавая страницы для сообщений в блоге.

Итак, теперь вы знаете достаточно, чтобы вести блог, но как насчет стиля? Вы могли заметить, что существует множество стилей, большая часть которых встроена в сами компоненты, но откуда они берутся? Файл css не найден. Оно исходит от ./components/utils/typography.js. В gatsby-config вы заметите этот плагин:

{
   resolve: `gatsby-plugin-typography`,
   options: {
     pathToConfigModule: `src/utils/typography`,
      },
    },

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

Вот что я сделал; Я удалил этот плагин, я удалил файл типографики и создал layout.scss в папке компонентов. Чтобы использовать scss, вам нужно установить node-sass и gatsby-plugin-sass, но вместо этого вы можете просто установить layout.css. Вам придется импортировать его в layout.js, так как это оболочка для всего вашего сайта.

//layout.js 
import './layout.css'

И, наконец, и это действительно раздражает, вам придется просмотреть каждый файл и удалить ссылки на rhythm и scale (подсказка, вы можете просто заменить их пустыми обратными кавычками, а затем посмотреть, как это повлияет на ваш стиль, и соответствующим образом настроить его с помощью пикселей или бэр). Единственная причина, по которой я это сделал, заключается в том, что мне понравилась общая работа, которую проделала эта стартовая тема, чтобы облегчить мне жизнь, и у меня есть опыт работы с CSS. Если вы решите сделать свой собственный файл SCSS, обязательно добавьте его в свою конфигурацию:

`gatsby-plugin-sass`,

Вам может быть интересно, но что, если я хочу создать блог, который является частью более крупного сайта-портфолио с навигацией, другими страницами и т. д.? Есть несколько разных способов добиться этого. Для моего сайта-портфолио я использовал серверную часть WordPress и плагин gatsby-source-wordpress. Это само по себе займет целую запись в блоге, и я планирую написать одну и/или сделать видеоурок. Вы можете проверить это позже или следовать документам и этому очень полезному руководству, которое я использовал. Но если вы хотите продолжить работу с форматом Markdown, я предлагаю начать без стартовой темы блога. Начните новый проект, просто:

gatsby new my-portfolio 
cd my-portfolio 
gatsby develop

Это позволит вам начать с базы, в которую гораздо проще входить, редактировать и создавать компоненты и стили с нуля. Если это кажется пугающим, подумайте о том, что на самом деле происходит в стартовом блоге. У нас есть папка сообщений в блоге. Мы явно указываем Gatsby, где найти эту папку в конфигурации, используя gatsby-source-filesystem:

{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },

Мы можем установить и добавить этот плагин по тому же пути в наш новый проект. Затем у нас есть некоторый код в нашем начальном файле узла блога. Мы также можем скопировать это в наш новый проект. Создайте ту же папку ./src/templates и добавьте тот же файл blog-post.js. Это все ингредиенты для программного создания этих страниц. Вы должны иметь возможность перейти к слагам этих страниц и получить к ним доступ. Это просто вопрос создания страницы — может быть, это не ваша индексная страница, а страница блога, где вы перебираете все сообщения. Вы можете скопировать запрос GraphQL из index.js и использовать его для передачи данных публикации в любой компонент, который вы хотите. Он просто должен быть в папке pages.

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

Развертывание:

Последний шаг — развертывание. Это очень легко. Инициализируйте репозиторий git, git add и git commit. Создайте новый репо на GitHub и добавьте источник. Создайте учетную запись в Netlify, используя авторизацию GitHub. Когда вы окажетесь на панели инструментов Netlify, нажмите Новый сайт из Git и выберите репозиторий. Вот и все! В настройках вы можете изменить имя сайта и в конечном итоге сопоставить его с личным доменом. Кроме того, если у вас возникли проблемы с развертыванием, вы можете запустить gatsby build и просто перетащить общую папку в Netlify. Мне пришлось это сделать, потому что я использовал WordPress локально, а Netlify понятия не имел, что делать с localhost. Надеюсь, это было полезно! Удачного кодирования!

Примечание: этот пост также находится на моем личном сайте