Что такое GATSBYJS?
В своих словах , «GATSBY – это бесплатная и открытая основа для исходных средств, основанная на реакции, которая помогает разработчикам построить пылающую быструю веб-сайты и приложения. “
Почему нам нужна рамка на вершине рамки (или библиотеки)? Разве не реагирует на инструмент, который «помогает разработчикам строить веб-сайты и приложения»? Это разумный вопрос. Это часто позирует о таких инструментах, как Next.js.
РЕАКТ – это библиотека, которая предназначена для обеспечения определенного набора основных функций для разработчиков для плеча. Он предназначен для легкого и широко применимого.
GATSBY, с другой стороны, есть, «статический PWA (Progressive Web App) Generator. Вы получаете код и расщепление данных вне коробки. GATSBY загружает только критический HTML, CSS, Data и JavaScript, чтобы ваш сайт загружается как можно быстрее. После загруженного, GATSBY предуфакторует ресурсы для других страниц, поэтому нажатие на сайт, чувствует себя невероятно быстро.
GATSBY – это статический генератор сайта, который использует реагирование.
Каковы статические сайты?
Статические сайты были в течение очень долгого времени. На самом деле, они, вероятно, оригинальный веб-сайт: просто HTML, CSS и JavaScript. Они не оказываются во время выполнения; Там нет кода сервера, без базы данных и т. Д.
Статический генератор сайта – это инструмент, который генерирует статические сайты. Что касается JS Frameworks и библиотек, они обычно генерируют содержимое HTML на стороне клиента во время выполнения. Статические генераторы сайта генерируют этот контент в течение времени сборки. Затем, когда загружены, RECT вступают в силу, и у вас есть одностраничное приложение!
Как это отличается от рендеринга на стороне сервера? Это большой вопрос. Основное отличие состоит в том, что нет сервера кода. Итак, в отличие от инструмента, такого как Next.js, GATSBY не делает ничего на сервере, когда запрос сделан. Все это сделано при сборке приложения.
Некоторые из преимуществ статического сайта: скорость, оптимизация поисковой системы и безопасность. Не только сайты, сделанные с GATSBY Beazing Fast, но у них есть неявная безопасность, поскольку нет базы данных или сервера, и в отличие от стандартных приложений RACT, они заставляют SEO намного проще, поскольку Crawlers могут найти контент.
Начиная
Чтобы начать, вы просто скачаете GATSBY CLI: NPM I -G GATSBY. Этот инструмент командной строки позволит вам генерировать, запустить и создать приложение GATSBY.
Чтобы быстро взять себя и бежать, я использовал GATSBY по умолчанию стартовой репозиторий Отказ После клонирования это, я управлял NPM установить, а затем разрабатывать GATSBY. Это оставило меня полностью активным приложением GATSBY на http://localhost: 3000 Отказ
Чтобы подтвердить, что страницы уже отображаются, вы можете посетить любую из страниц и нажмите Просмотр источника Отказ Следует отметить, что вы также можете щелкнуть ссылки, и страница будет обновляться без полного обновления, так как вы ожидаете от PWA.
Почему Гэтсби?
У GATSBY имеет несколько отличных функций, которые различают его от других статических генераторов сайта.
Прежде всего, GATSBY использует реагирование, так что это отличный выбор для тех, кто удобно и любит его.
GATSBY также использует GraphQL, который является популярной и очень мощной технологией. Он использует GraphQL для управления данными во всем приложении, и хотя вы можете использовать GATSBY без Graphql, он действительно делает разработку приложений более декларативным и интуитивным.
Пары GATSBY действительно хорошо с платформами, такими как NetLify, и вы можете легко настроить свой сайт, чтобы построить и развернуть каждый раз, когда вы совершаете, и вытесните в Github.
GATSBY также поставляется с большой экосистемой плагинов, которые служат различным потребностям. Эти плагины могут помочь исходным данным от CMS, таких как WordPress или Containful, поможет вам интегрироваться с инструментами, такими как Algolia, и управлять своими изображениями ленивыми загрузкой и оптимизации их.
GATSBY также предоставляет множество API, которые делают разработку статических сайтов намного проще – например, API CreatePage, который делает его действительно легко преобразовывать файлы разметки в статические страницы с шаблоном в строю.
Наконец, GATSBY имеет кучу отличных компонентов, которые упрощают такие вещи, как маршрутизация, связывание и обработка изображений, которые не включены в основную библиотеку React.
Проектирование вашего сайта
Разработать взгляд и чувствовать себя правдиво самым сложной частью опыта. Я почувствовал парализованные возможностями в некоторой степени. Пару вещей помогло мне двигаться вперед.
Во-первых, я посмотрел на страницы и страницы Wawwward – выигрышные веб-сайты портфолио собрать вдохновение и получить ощущение Отличные дизайны, которые там есть Отказ
Во-вторых, я прочитал Отличная статья Adham Dannaway о своем процессе при проектировании и создании своего личного сайта.
Я взял на себя обязательство разработать несколько своих собственных пользовательских анимаций и SVG. Это было довольно весело, и я не могу рекомендовать Figma достаточно для этого усилия. Если вы знакомы с эскизом, это будет чрезвычайно простым в использовании.
Один из изображений, которые я создал с фигмой.
Разработка вашего сайта
Чтобы сойти с земли, я использовал ГАТСББИЧЕСКИЙ СТАРТЕР ДОЛЖЕН Отказ Я развел это из Github и переименовал репо. Затем я клонировал его и использовал GATSBY CLI, чтобы построить. За очень короткое время я был и работал на Localhost с живой и горячей перезагрузкой.
Структура кода очень проста. У вас есть три папки внутри каталога SRC: компоненты, изображения и страницы.
Каталог изображений содержит пару PNG, которые используются на сайте.
Каталог компонентов содержит несколько компонентов примечания. Во-первых, компонент Layout.js: это компонент обертки, предназначенный для обеспечения стилизации и функциональности в приложении. Этот вид шаблона очень популярен в реакции. Вы заметите, что в центре компонента есть привязка называется «дети».
Это представляет содержимое, которое будет передано внутри компонента. Вы можете увидеть этот компонент на работе в index.js в каталоге страниц:
Другой заслуживающий внимательный компонент Image.js:
Этот компонент показывает пару интересных вещей. Во-первых, он дает немного видимости в том, как GraphQL используется в GATSBY. Statiatquery в нижней части компонента предназначен для того, чтобы потянуть изображение в виде сборки и перечислять некоторые характеристики обработки изображений (жидкость с максимальной шириной 300). Затем он передает это в компонент изображения GATSBY, который оптимизирует изображение, создает несколько размеров версий IT и будет ленивать его во время выполнения.
Под страницы У вас есть основной index.js, вторичная страница и страница 404. В Index.js вы можете увидеть, как работает компонент макета, а также, как вы можете связать на другие страницы, такие как Page-2.j, используя компонент ссылки GATSBY. Что-нибудь в этой папке будет преобразована в статические страницы GATSBY по времени сборки.
Это дает много того, что вам нужно из коробки! Вы можете добраться до рабочих страниц и компоненты. Однако, если вы хотите динамически создавать страницы, скажите файлы Markdown, вы можете Следуйте этим простым руководству на сайте GATSBY.
Поиск вашего сайта
Один из недостатков отсутствия сервера – это поиск вашего сайта не просто. Это может быть обходно, используя несколько отличных инструментов, таких как Algolia. У GATSBY есть некоторые Великие гиды для реализации этой функции С алголией или другими инструментами, такими как lunr и elasticsearch.
Развертывание вашего сайта
Как только вы создали сайт, вам нужно подумать о том, как его разместить. Есть два отличных варианта, которые ведут пакет: страницы GitHub и NetLify.
Я пошел с NetLify, потому что они обеспечивают постоянное развертывание (срабатываемые на Git-righgger), глобальный CDN, полный DNS, автоматизированные HTTPS и намного больше.
Их свободный уровень включает в себя «неограниченные личные и коммерческие проекты, HTTPS, постоянное развертывание от публичных или частных репо, и многое другое. «Я также смог легко приобрести доменное имя, которое мне нужно через NetLify. Это было, по сути, это был один-стоп-магазин для всего, что мне нужно было добраться до моего сайта.
Добавление вашего сайта в NetLify так же просто, как создание учетной записи, связывая ваш GitHub и нажав на Создать сайт из Git кнопка.
Ретроспектива
Должен ли я пойти с другим генератором? Должен ли я просто построить сайт с React или Next.js? GATSBY имеет преимущества и недостатки. Тем не менее, многие из недостатков минимизируются определенными случаями использования. Для создания личного сайта GATSBY оказался идеальным выбором для меня.
Рабочий процесс чрезвычайно прост: когда я вносим изменения и подтолкните их к GitHub, мой сайт перераспределяется. Мне не нужно слишком беспокоиться с инфраструктурой и т. Д. NetLify обрабатывает все это для меня.
Он поддерживает отличный баланс между допуском для меня кодировать и уменьшить код котеля.
Я люблю плагин GATSBY-Image, и способность использовать GraphQL, действительно упрощает передачу данных в мои компоненты.
Единственное, что я не любил, это то, что некоторые из конфигурации, необходимые в файлах, таких как GATSBY-Node.js, не казались всеми такими интуитивными для меня.
Вывод
В заключение я бы очень рекомендовал GATSBY для тех, кто ищет кандидата для разработки меньших сайтов, таких как портфолио и личные блоги – это действительно сияет в этих случаях использования.
Он несет все преимущества статических сайтов, таких как скорость, безопасность и SEO, и это особенно замечательно для тех, кто любит делать немного кодирования и не хочу просто использовать WordPress или SquareSpace!
Plug: Logrocket, DVR для веб-приложений
https://logrocket.com/signup/
Logrocket Это инструмент для ведения журнала Frontend, который позволяет вам повторить проблемы, как если бы они произошли в вашем браузере. Вместо того, чтобы угадать, почему случаются ошибки, или просят пользователей на скриншоты и журнал свалки, Lognocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от основ и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ Ngrx/Store.
В дополнение к регистрации действий и состояния Redux, Lognocket Records Console Logs, ошибки JavaScript, Stacktraces, Networks/Ответы с заголовками + тел, метаданные браузера и пользовательские журналы. Он также привлекает инструменты DOM для записи HTML и CSS на странице, воссоздая Pixel-Perfect видео даже самых сложных одностраничных приложений.
Попробуйте бесплатно Отказ
Пост Гэтсби действительно что отлично? появился первым на Logocket blog Отказ
Оригинал: “https://dev.to/bnevilleoneill/is-gatsby-really-that-great-24l4”