Все, что вам нужно знать перед тем, как начать работу с Гэтсби

Веб-сайты Гэтсби становятся популярными день ото дня. В настоящее время большинство популярных веб-сайтов используют Gatsby из-за его скорости, SEO и т. Д., И если вы ничего не знаете о Gatsby, вероятно, стоит изучить его в 2021 году.

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

GatsbyJS - это основанный на React генератор статических сайтов на базе GraphQL. Gatsby - это платформа с открытым исходным кодом, которая объединяет функции React, GraphQL и Webpack в единый инструмент для создания статических веб-сайтов и приложений. Хотя термин «генератор статических сайтов» существует уже некоторое время, Gatsby больше похож на современный интерфейсный фреймворк, чем на традиционный генератор статических сайтов.

Что такое статические сайты?

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

Генератор статических сайтов - это инструмент, который создает статические веб-страницы. С другой стороны, JS-фреймворки и библиотеки обычно создают HTML-контент на стороне клиента во время выполнения. Этот материал генерируется генераторами статических сайтов во время создания сайта. Затем, после загрузки, React вступает во владение, и вы получаете одностраничное приложение!

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

SEO

Использование GatsbyJS позволяет вашим веб-сайтам использовать несколько стратегий оптимизации внутреннего кода. В результате поисковые системы будут ранжировать ваш сайт выше. Есть ряд плагинов, которые могут вам в этом помочь.

Плагины

У Gatsby есть несколько замечательных плагинов, которые могут помочь вашему сайту в разных аспектах. Вы можете установить эти плагины с помощью NPM или Yarn.

Некоторые из популярных плагинов: Source File-System, Contentful, Plugin Sharp и т. Д. Вы можете найти все плагины на их официальном сайте здесь.

Скорость

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

Шаблоны

Доступно достаточно репозиториев и шаблонов GatsbyJS Starter, поэтому клонирование и изменение содержимого не вызывает затруднений. Это позволяет вам быстро и эффективно создавать такие веб-сайты, как ваш блог или портфолио.

Почему вам следует избегать Гэтсби?

Время сборки

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

Динамические сайты

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

Сложные сайты

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

Создайте свой первый веб-сайт Gatsby

Установка Gatsby CLI

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

npm install -g gatsby-cli

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

Стартовые шаблоны

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

В этом руководстве мы будем использовать gatsby-starter-default для этого, выполните приведенную ниже команду на своем терминале.

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

gatsby new создает новый веб-сайт. Вы получите базовый сайт, если будете использовать gatsby new отдельно. Сочетание gatsby new со стартовым шаблоном - наиболее типичный подход к его использованию.

Запустите приложение локально

Как только это будет сделано, вы должны увидеть сообщение об успешной загрузке сайта Gatsby. Теперь беги

cd gatsby-starter-default && gatsby develop

Эта команда позволяет перейти в нашу новую папку gatsby и инициализировать файлы, чтобы мы могли просматривать их локально. Откройте браузер и перейдите к http://localhost:8000/. Вы должны увидеть страницу статера по умолчанию, как на изображении ниже.

Если вы хотите, чтобы поисковая система нашла ваш сайт, очень важно правильно организовать метаданные. Файл gatsby-config.js позволяет настраивать данные вашего веб-сайта.

Чтобы сделать ваш веб-сайт доступным для всех во всем мире, вам необходимо развернуть свой веб-сайт в службе хостинга. Вы можете развернуть веб-сайт Gatsby в Netfliy, Vercel, Azure, Gatsby Cloud, Heroku, AWS, IIS, Firebase и т. Д. Но для этого примера мы будем использовать Netlify

Развертывание веб-сайта на Netlify

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

gatsby build

По завершении вы должны увидеть папку с именем public. Вот и все, нам нужна только эта папка для развертывания в Netlify.

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

Теперь щелкните сайты в меню Netlify, и вы должны увидеть страницу с текстом «Хотите развернуть новый сайт без подключения к Git? Перетащите сюда папку вывода вашего сайта ». Перетащите вашу общедоступную папку на этот заполнитель, подождите некоторое время, и затем ваш веб-сайт будет развернут на Netfliy. Если он успешно развернут, вы должны увидеть что-то похожее на изображение ниже.

Заключение

Надеюсь, вы нашли эту статью полезной. Если вам нужна помощь, дайте мне знать в разделе комментариев.

Хотите купить мне кофе, Вы можете сделать это здесь.

Давайте подключимся к Twitter и LinkedIn.

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

Больше контента на plainenglish.io