Эта статья была первоначально опубликована на SimplifiedWeb. Вам также могут быть интересны другие мои статьи: SimplifiedWeb

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

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

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

  • Я не зависим ни от какой другой платформы
  • Я могу монетизировать свой блог: может быть, показывать рекламу
  • Я могу настроить его, как я хочу.
  • Я по-прежнему могу публиковаться на Medium или dev.to и перенаправлять читателей в свой личный блог.

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

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

Как это работает?

Gatsby выполняет всю выборку данных во время сборки. Независимо от того, откуда берутся ваши данные, вы можете получить к ним одинаковый доступ. Gatsby нормализует ваши данные в API-интерфейсе graphql, чтобы вы могли легко читать и отображать их. В конце концов, gatsby скомпилирует все это в статические ресурсы, а затем позволит вам очень быстро развернуть ваше приложение на CDN по вашему выбору, а не на традиционном сервере. Вот рисунок, который резюмирует это:

Начиная

Установка интерфейса командной строки Gatsby

npm install gatsby-cli

Создать новый проект

gatsby new gatsby-site

Начать проект

gatsby develop

Построить проект

gatsby build

Стартеры Гэтсби

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

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

Я нашел очень хороший стартовый блог, который я использовал, чтобы быстро начать работу.

С этим стартером у меня есть доступ ко многим функциям, таким как netlify CMS, которые мы увидим в следующем разделе, это то, что круто в стартерах gatsby.

Я инициализировал новый проект с помощью этого стартера, запустив:

gatsby new blog https://github.com/W3Layouts/gatsby-starter-delog

Эта команда загружает файлы и инициализирует сайт, запустив npm install. После этого я могу запустить свое приложение:

cd blog

gatsby develop

Gatsby запустит среду разработки с горячей перезагрузкой, доступную по умолчанию по адресу http://localhost:8000.

Настройка

По умолчанию стартер выглядит так:

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

Вы можете настроить свое приложение по своему усмотрению, это всего лишь Html, CSS и react.js.

Плагины Гэтсби

По сути, плагины Gatsby — это просто пакеты Node, поэтому вы можете установить их, как и другие пакеты в узле, используя NPM.

Вам нужна аналитика Google? Для этого есть плагин.

npm install —save gatsby-plugin-google-analytics

Вам нужна офлайн-поддержка? Для этого есть плагин.

npm install —save gatsby-plugin-offline

Короче говоря, есть плагин для всего, что вы хотите сделать.

Netlify и Netlify CMS

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

В использовании netlify на сайте gatsby действительно много преимуществ. Непрерывная интеграция: каждый раз, когда я отправляю свой код на GitHub, netlify создает новую версию моего приложения и развертывает ее. Мне ничего не нужно делать, это супер круто.

  • Формы. На моем веб-сайте есть контактная форма, чтобы пользователи могли писать мне. Netlify поставляется со встроенной обработкой форм. Мне просто нужно добавить атрибут netlify или data-netlify="true" в тег, и я могу начать получать сообщения в своей панели администратора сайта Netlify.
  • Настройки домена: вы можете добавить свой собственный домен прямо из панели администратора netlify. Всего через несколько минут ваш домен будет доступен.

Нетлифай CMS

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

Netlify CMS полностью расширяема, независима от платформы, проста в установке и предоставляет пользователям удобный пользовательский интерфейс.

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

Netlify CMS предустановлен в этом стартере, настройка не требуется.

После запуска приложения я могу получить доступ к панели инструментов netlify cms по адресу http://localhost:8000/admin и добавить новую запись.

Каждый раз, когда я добавляю новый пост, контент будет храниться в моем репозитории и иметь версию на GitHub, потому что Netlify CMS основана на Git. Кроме того, благодаря непрерывному развертыванию Netlify новая версия будет развертываться каждый раз, когда я добавляю или редактирую сообщение. Это круто.

SEO

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

Использование Gatsby делает ваш сайт быстрым и эффективным для поисковых роботов для индексации ваших страниц.

Gatsby хорошо разбирается в SEO, потому что страницы gatsby отображаются на стороне сервера, и все содержимое страницы доступно для поисковых роботов. Некоторые приемы, которые я использовал для улучшения SEO.

Реагировать Шлем

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

Шлем React — это плагин, который я использовал для добавления метаданных на свои веб-страницы. С помощью этого плагина атрибуты, которые вы добавляете к своим компонентам, например. заголовок, мета-атрибуты и т. д. будут добавлены к статическим HTML-страницам, которые создает Гэтсби.

Карта сайта

Карта сайта — это XML-файл, в котором перечислены все страницы вашего веб-сайта, что позволяет Google найти и просканировать их все, а также помогает понять структуру вашего веб-сайта.

Плагин gatsby-plugin-sitemap позволяет автоматически генерировать карту сайта с помощью Gatsby, после чего боты могут обнаружить все ваши страницы.

Эх вуаля:

ПВА

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

Они дают вам все необходимое для создания настоящего PWA:

  • gatsby-plugin-manifest: это позволяет пользователям добавлять ваше приложение на главный экран.
  • gatsby-plugin-offline: даже в автономном режиме пользователь по-прежнему может заходить в мое приложение и читать сообщения в моем блоге.

Почему вы должны использовать Гэтсби?

Gatsby — очень хороший фреймворк, если вы хотите очень быстро создавать молниеносно быстрые веб-сайты и приложения.

Гэтсби делает это просто

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

  • С Гэтсби все просто, вам не нужно беспокоиться обо всем этом шаблоне.
  • Существует множество бесплатных стартеров, которые вы можете использовать, чтобы быстро начать работу.
  • Есть плагин для всего, что вы хотите сделать.
  • SEO дружественный
  • Генератор прогрессивных веб-приложений

Гэтсби это весело

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

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

Гэтсби работает

Не беспокойтесь о производительности вашего веб-приложения, Gatsby позаботится об этом за вас. Сайты Gatsby очень и очень быстрые.

Вот что делает сайты gatsby очень эффективными:

  • Гэтсби следует архитектурному шаблону Google PRPL: Push, Render, Pre-cache, Lazyload. и другие рекомендации по повышению производительности
  • Генерирует только статические активы: сервер не нужен
  • Нормализует сторонние данные
  • Он поддерживает разделение кода, обеспечивая прогрессивный рендеринг вашего контента.

Gatsby делает для нас множество оптимизаций прямо из коробки.

Как разработчик, мой опыт работы с Gatsby был замечательным. Мне очень понравилось создавать свой сайт с Гэтсби ❤️.

Вы должны попробовать это, вы не будете разочарованы.

Вам также могут быть интересны другие мои статьи: SimplifiedWeb

Спасибо за чтение.