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

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

Так что же такое генераторы статических сайтов?

Что такое генераторы статических сайтов?

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

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

Конечно, это часто означает, что у вас нет такой CMS, как WordPress, которую вы могли бы использовать для написания контента. Так почему бы вам все же выбрать генератор статических сайтов?

Почему вам следует использовать генератор статических сайтов?

Затем возникает вопрос: каковы потенциальные преимущества использования генератора статических сайтов? Это действительно того стоит? Использование SGG вместо CMS дает три основных преимущества.

Скорость

Наиболее заметным является увеличение скорости. Поскольку ваш сайт состоит только из статических ресурсов, сетевые запросы не задерживаются. Не выполняются вызовы API или базы данных, что приводит к более быстрому отклику. Вы запрашиваете страницу, и сервер отвечает одним файлом HTML.

Размер ваших файлов также уменьшается. При использовании CMS вы, скорее всего, получите кучу ненужного кода, вставленного на вашу страницу. Если вы не полностью контролируете его, это может повлиять на вашу производительность, доступность вашего сайта или даже на SEO.

Безопасность

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

Рабочий процесс

И последнее, но не менее важное: поскольку ваши файлы статичны, рабочий процесс разработки также будет намного проще. Вы можете легко запустить свой сайт локально, так как вам не нужно имитировать данные. Вы можете переключить хостинг, не беспокоясь о перенастройке серверной части. Поскольку вам не нужно размещать базу данных, это также означает, что вы можете выбрать бесплатную услугу, например GitHub Pages, и разместить свой блог совершенно бесплатно. Как видите, SSG также снизили затраты.

Однако, если вы хотите использовать платную услугу для регистрации собственного домена, я рекомендую использовать Bluehost, потому что они:

  • Предоставьте бесплатный сертификат SSL при регистрации
  • Простая интеграция с WordPress, если вы хотите использовать Gatsby с автономной CMS.
  • Поддержка 24/7, чтобы помочь вам с проблемами
  • Предоставьте 30-дневную гарантию возврата денег

Почему не следует использовать генератор статических сайтов

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

Нет серверной функциональности

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

Нет интерфейса начального администрирования

Поскольку вы в основном обслуживаете статические ресурсы, в CMS может не быть необходимости. Вместо этого вы публикуете свой контент через файлы разметки. Если у вас большая команда с людьми, у которых нет опыта в программировании, многих может напугать то, что вам приходится работать с Git и Markdown. Если вы все же решите, что вам нужна CMS, ваше начальное время разработки будет увеличено, и вы потеряете преимущество в скорости, связанное с отсутствием вызовов API.

Нет пользовательского контента

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

Нет данных в реальном времени

Поскольку мы говорим о статических сайтах, у вас не может быть динамически изменяющихся данных, таких как разделы «Популярные истории» или «Самые продаваемые». Если вы не интегрируете свой статически сгенерированный сайт со сторонним API и интенсивно не используете JavaScript во внешнем интерфейсе. Но генераторы статических сайтов в любом случае не предназначены для платформ электронной коммерции или социальных сетей.

Жесткая масштабируемость

Статические сайты также сложно масштабировать. Каждый раз, когда вы добавляете новый пост, нужно строить весь сайт, увеличивая время сборки с каждым новым файлом. Если вы публикуете контент только раз в пару дней и у вас не более пары сообщений в блоге, то для вас это не проблема. Но если вы постоянно выпускаете новый контент и у вас тысячи статей, вам понадобится CMS.

С учетом сказанного, давайте посмотрим, как они на самом деле работают.

Как работает Гэтсби?

Существует бесчисленное множество генераторов статических сайтов. Вы можете просмотреть на StaticGen.com, чтобы получить хороший обзор доступных генераторов. В этом руководстве я сосредоточу свое внимание на Gatsby, который занимает второе место на GitHub как один из самых популярных генераторов статических сайтов.

Итак, как это работает? Gatsby использует современные веб-технологии - такие как GraphQL и React - для создания вашего веб-сайта из ряда источников данных, таких как контент, поступающий из автономной CMS, файлы Markdown или сторонний API в формате JSON или других форм структурированных данных. Таким образом, несмотря на то, что, как упоминалось в начале, большую часть времени вы можете обходиться без какой-либо базы данных или CMS, Gatsby по-прежнему предоставляет возможность сделать ваш сайт более динамичным.

Настройка Гэтсби

Больше никаких разговоров, давайте перейдем к кодированию. Во-первых, вы хотите создать новый пустой каталог для своего проекта. Чтобы запустить Gatsby, вы можете использовать интерфейс командной строки Gatsby для создания нового проекта Gatsby. Выполните следующую команду в своем терминале:

npm i -g gatsby-cli

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

gatsby new ssg

Это создаст новую папку с именем ssg, которая будет заполнена начальным проектом Gatsby. После установки запустите сервер с npm run start, и вы должны увидеть своего астронавта Гэтсби в прямом эфире на localhost:8000.

Структура проекта Гэтсби

Открыв структуру вашего проекта, вы увидите следующую структуру:

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

  • .cache: используется для внутреннего кэширования, автоматически создаваемого Гэтсби.
  • public: Также автоматически создается Гэтсби. Эта папка содержит результаты сборки. Это папка, которую вы хотите развернуть на своем действующем сайте в своем CI.
  • src: Здесь вы будете проводить большую часть своего времени. Этот каталог содержит весь код вашего интерфейса. Ваши components, pages или другие активы, например images.

Если вы хотите добавить на свой сайт другие статические ресурсы, которые не должны обрабатываться Gatsby, вы можете создать папку static в корне вашего проекта. Это скажет Гэтсби скопировать их только в вашу public папку.

Вы также найдете несколько файлов конфигурации в корневой папке:

  • gatsby-browser.js: используется для API браузера Gatsby для запуска кода при различных событиях браузера, таких как onRouteUpdate или onServiceWorkerInstalled
  • gatsby-config.js: используется для настройки вашего сайта Gatsby. Здесь вы можете указать метаданные для своего приложения, такие как заголовок или метаописание. Вы также можете определить здесь список плагинов, которые хотите использовать.
  • gatsby-node.js: Если вы используете Node for Gatsby, здесь вы можете определить связанные API-интерфейсы Gatsby Node.
  • gatsby-ssr.js: Наконец, если вы используете рендеринг на стороне сервера, здесь вы можете подключиться к любому из связанных с SSR API.

Настройка подключаемых модулей Gatsby

Чтобы увидеть, как работают плагины - основная функция Gatsby, давайте добавим в проект поддержку SCSS. Выполните следующую команду, чтобы установить плагин SCSS:

npm i --save node-sass gatsby-plugin-sass

Внутри вашего gatsby-config.js файла добавьте gatsby-plugin-sass в конец массива plugins и просто замените layout.css на layout.scss внутри вашей components папки. Готово, теперь вы можете использовать SCSS в своем проекте.

Если вы столкнетесь с ошибкой:

Error: Cannot find module ‘react’

Попробуйте удалить папку node_modules и переустановить ее с помощью yarn: yarn install.

Добавление новых сообщений с Markdown

Давайте создадим несколько сообщений с разметкой, чтобы сделать сайт более содержательным. Во-первых, вам нужно установить новый плагин, который используется для преобразования файлов разметки в HTML. Запустите npm i gatsby-transformer-remark и добавьте его в свой массив плагинов. Вам также потребуется использовать gatsby-source-filesystem для извлечения файлов уценки.

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

То, что вы видите вверху, - это набор метаданных, называемых frontmatter. Это обозначается тройной косой чертой и парами "ключ-значение". Он будет проанализирован gatsby-transformer-remark. Позже мы сможем получать эту информацию через GraphQL и использовать ее в React. Остальная часть файла будет проанализирована как HTML.

Если вам нужно руководство по основному синтаксису Markdown, вы можете найти множество примеров на Markdownguide.org.

Запрос данных из GraphQL

Если вы перейдете к интерфейсу GraphiQL по адресу localhost:8000/___graphql, вы заметите, что внутри проводника появился новый узел под названием markdownRemark. Этот узел содержит всю информацию о файлах уценки, которые важны для нас.

Создайте следующий запрос, чтобы запросить публикацию. Не забудьте указать slug в разделе «Переменные запроса».

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

Создайте компонент React для публикации

Чтобы использовать эти данные, нам понадобится шаблон, который покажет их нам. Создайте новую папку с именем templates внутри вашей src папки и добавьте новый файл с именем post.js. Вы также можете скопировать запрос GraphQL, если он нужен внутри шаблона. Этот компонент будет отображать данные, возвращенные запросом.

Как видите, компонент получит опору data, которая получит значение, возвращаемое из запроса GraphQL, который экспортируется в строке: 16. Пока у нас нет доступа к этому компоненту в браузере, так как он не находится в папке pages. Нам нужно использовать API узла Gatsby для создания новой страницы для каждого файла разметки, который у нас есть.

Создавайте страницы динамически с помощью Gatsby

Для этой задачи мы можем использовать API createPages. Перейдите к своему gatsby-node.js файлу и подключитесь к API, экспортировав его.

Сначала экспортируйте функцию createPage из actions. Это будет использоваться для создания отдельных страниц. Затем вам также понадобится компонент, который можно использовать для создания страниц, и, наконец, мы хотим запросить файлы разметки. Этот запрос GraphQL ограничит количество результатов до 1000 и отсортирует его по дате публикации сообщения.

В строке 21 мы можем затем просмотреть результат и создать страницу для каждого файла уценки. Здесь вы можете передать slug, который будет использоваться как path, и компонент, который должен использоваться для шаблона. Если вам нужно передать дополнительные данные, вы также можете указать свойство context.

К сожалению, Гэтсби не сможет сразу уловить изменения, поэтому вам потребуется перезапустить веб-сервер, чтобы эффект вступил в силу. Если вы перейдете на localhost:8000/intro-to-gatsby, вы увидите только что созданную страницу уценки.

Теперь вы можете создавать сколько угодно сообщений с файлами разметки.

Отображение сообщений на главной странице

Все, что осталось сделать, это отобразить список сообщений на главной странице вашего сайта. Вы можете легко сделать это, изменив файл index.js в папке pages.

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

Я создал следующий запрос, который получает все сообщения в порядке убывания в зависимости от даты их публикации. Мы также собираемся использовать id и excerpt, которые автоматически создаются из первых 250 символов сообщения.

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

Нас интересует только узел edges, поэтому мы сразу его уничтожаем. Мы можем просмотреть их с помощью map и создать новый элемент списка для каждого сообщения.

С помощью некоторого CSS вы сможете видеть свои сообщения на главной странице.

Резюме

Теперь, когда ваш блог готов, все, что вам нужно сделать, это развернуть его. Вы можете использовать бесплатные сервисы, такие как Netlify, GitHub Pages или Vercel, или пойти традиционным путем и использовать платный сервис, такой как Bluehost, с персональным доменом.

В целом, Gatsby предоставляет отличный способ создать свой блог с использованием современных веб-технологий, сделать его быстрым и легким. В нем есть более 2000 плагинов, готовых к использованию, так что, скорее всего, вы найдете один для своей проблемы.

Если вы все еще думаете, использовать ли Gatsby для вашего проекта из-за способа создания контента - как упоминалось в начале - вы можете использовать Gatsby с безголовой CMS. Он прекрасно интегрируется с WordPress, Prismic и парой других CMS.

Давай, попробуй. Вы раньше использовали Гэтсби? Каковы ваши идеи? Дайте нам знать об этом в комментариях! Спасибо, что нашли время прочитать эту статью, удачного ведения блога!