Думаете об инвестировании в экосистему Jamstack? Если ваш ответ «да», то Gatsby — один из самых популярных и мощных генераторов статических сайтов Jamstack — может быть именно тем, что вы ищете. Вот наше руководство по началу работы с Гэтсби.
JAM расшифровывается как JavaScript, API и разметка. Другими словами, в то время как динамические части сайта или приложения во время цикла запроса/ответа обрабатываются JavaScript в клиенте, все серверные процессы выполняются с использованием API-интерфейсов, доступ к которым осуществляется через HTTPS с помощью JavaScript, а шаблонная разметка предварительно создается на время развертывания, часто с использованием генератора статических сайтов. Это Джемстэк. Он производительный, недорогой в масштабировании, обеспечивает лучшую безопасность и удобство для разработчиков.
Зачем использовать статический сайт
Статическая модель сайта подходит не для всех типов проектов, но когда она подходит, у нее есть ряд преимуществ. Вот несколько из них.
Скорость
Время, которое требуется веб-сайту для загрузки в браузере при первом запросе, является важным фактором для взаимодействия с пользователем. Пользователи очень быстро теряют терпение, и при медленном соединении все может только ухудшиться. Отсутствие обращений к базе данных и предварительно сгенерированный контент делают статические сайты очень быстро загружаемыми.
Статический сайт состоит из статических файлов, которые можно легко обслуживать по всему миру с помощью сетей доставки контента (CDN). Это позволяет использовать центр обработки данных, который находится ближе к тому месту, где делается запрос.
Упрощенный хостинг
Хостинг для статических сайтов настраивается в мгновение ока. Поскольку нет базы данных или кода на стороне сервера, специальных языков или фреймворков для поддержки, все, что должен делать хостинг, — это обслуживать статические файлы.
Лучшая безопасность
Без серверного кода или базы данных хакерам нечего взламывать. Нет проблем с поддержанием сервера в актуальном состоянии с помощью исправлений и исправлений безопасности. Все это означает гораздо больше спокойствия, когда речь идет о безопасности вашего сайта.
Улучшенный опыт разработчиков
Настройка вашего статического веб-сайта с помощью хостинговой компании, такой как Netlify или Vercel, проста, и при непрерывном развертывании вы просто отправляете свои изменения в выбранное репозиторий кода, и они немедленно отражаются в активной версии.
Что такое Гэтсби?
Сегодня Gatsby — один из самых популярных инструментов для создания веб-сайтов. Это больше, чем генератор статических сайтов. По сути, это «фреймворк с открытым исходным кодом на основе React для создания веб-сайтов и приложений». Поскольку Gatsby построен на основе React, все преимущества React у вас под рукой, что позволяет вам воспользоваться преимуществами этой мощной библиотеки для создания интерактивных компонентов прямо на вашем статическом веб-сайте. Gatsby также построен с использованием GraphQL, поэтому вы можете запрашивать данные и отображать их на своем веб-сайте любым удобным для вас способом.
Установка Gatsby и создание вашего проекта
Gatsby собирается с помощью webpack, но вам не нужно беспокоиться о сложных маневрах настройки; Gatsby CLI позаботится обо всем за вас.
В этом руководстве я предполагаю, что у вас локально установлен Node.js. Если это не так, перейдите на домашнюю страницу Node и загрузите правильные двоичные файлы для вашей системы. В качестве альтернативы вы можете рассмотреть возможность использования диспетчера версий для установки Node. У нас есть туториал по использованию менеджера версий.
Node поставляется в комплекте с npm, менеджером пакетов Node, который мы собираемся использовать для установки некоторых библиотек, которые будем использовать. Вы можете узнать больше об использовании npm здесь.
Вы можете проверить правильность установки обоих, выполнив следующие команды из командной строки:
node -v
> 12.18.4
npm -v
> 6.14.8
Первое, что вам нужно сделать, это установить Gatsby CLI. Это npmпакет, который позволяет создать сайт Гэтсби за несколько секунд. В своем терминале напишите:
npm install -g gatsby-cli
С установленным на вашем компьютере интерфейсом командной строки Gasby вы можете приступить к созданию своего веб-сайта. Я назову его sitepoint-demo, но вы можете называть его как угодно. В терминале введите:
gatsby new sitepoint-demo
После того, как Gatsby CLI установит все необходимые файлы и настроит их соответствующим образом, у вас будет полностью работающий веб-сайт Gatsby, готовый к настройке и развитию. Чтобы получить к нему доступ, перейдите в sitepoint-demoпапку:
cd sitepoint-demo
и запускаем локальный сервер:
gatsby develop
Наконец, откройте окно на http: //localhost:8000, где вы найдете свой блестящий сайт Gatsby, который выглядит примерно так:
Шаблон Гэтсби по умолчанию
Чтобы быстро запустить веб-сайт, Gatsby использует несколько официальных стартовых шаблонов, а также стартеры, предлагаемые сильным сообществом вокруг него. Сайт, который вы только что создали, использует стартер Gatsby по умолчанию, но вы можете найти гораздо больше на веб- сайте Gatsby.
Если вы хотите использовать стартер, отличный от стандартного, вам нужно указать его URL-адрес в командной строке, следуя следующему шаблону:
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
Например, предположим, что вы хотите, чтобы ваш сайт выглядел в стиле Material Design. Самый быстрый способ создать его — использовать Gatsby Material Starter, введя в терминале следующую команду:
gatsby new sitepoint-demo https://github.com/Vagr9K/gatsby-material-starter
Большой! Теперь давайте взглянем на файлы в вашем новом проекте Gatsby.
Экскурсия по вашему сайту Гэтсби
Хорошим местом для начала является /src/каталог. Вот что вы найдете.
pagesКаталог
Каталог /src/pages/содержит страницы вашего сайта. Каждая страница является компонентом React. Например, код домашней страницы вашего сайта находится /pages/index.jsи выглядит следующим образом:
import React from «react»
import { Link } from «gatsby»
import Layout from «.../components/layout»
import Image from «.../components/image»
import SEO from «.../components/seo»
const IndexPage = () => (
Hi people
Welcome to your new Gatsby site.
Now go build something great.
Go to page 2
Go to «Using TypeScript»
)
export default IndexPage
Это типичный код для компонента React.
Компоненты позволяют разделить пользовательский интерфейс на независимые повторно используемые части и рассматривать каждую часть отдельно... Концептуально компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые «реквизитами») и возвращают элементы React, описывающие, что должно появиться на экране. — Реагировать документы.
componentsКаталог
Каталог /src/components/— это место, где вы найдете общие компоненты для вашего веб-сайта. Стартер по умолчанию поставляется со следующими компонентами: заголовок (header.js), изображение (image.js), макет (layout.js) и SEO (seo.js). Вы можете настроить эти компоненты и добавить свои собственные в тот же каталог.
Теперь вы готовы начать вносить изменения в свой новый сайт и настраивать его по своему вкусу.
Как внести изменения в свой сайт Gatsby
Давайте попробуем изменить сообщение, отображаемое на главной странице. Откройте pages/index.jsв редакторе кода и замените два абзаца под тегом на этот абзац:
Welcome to my SitePoint Demo Site!
Конечно, вы можете добавить любой текст между тегами.
Как только вы нажмете «Сохранить «, ваши изменения отобразятся в браузере благодаря среде разработки Gatsby с горячей перезагрузкой. Это означает, что когда вы разрабатываете сайт Gatsby, страницы отслеживаются в фоновом режиме, поэтому при сохранении вашей работы изменения будут немедленно видны без необходимости обновления страницы или перезапуска браузера.
Gatsby позволяет легко добавлять новые страницы. Например, давайте добавим страницу «О нас», создав новый файл about.jsвнутри /pages/каталога и введя следующее содержимое:
import React from «react»
const AboutPage = () => About Me
export default AboutPage
Приведенный выше код представляет собой функциональный компонент React, который отображает некоторый текст.
Сохраните свою работу и перейдите по адресу http: //localhost:8000/about, и вы должны увидеть заголовок «Обо мне» на своем экране.
Вы можете быстро перейти на новую страницу «О нас» с домашней страницы с помощью компонента Gatsby Link. Чтобы увидеть, как это работает, откройте index.jsв редакторе кода и найдите этот фрагмент кода непосредственно перед закрывающим тегом:
Go to page 2
Затем замените значение toсвойства на /about/и текст Перейти на страницу 2 на About:
About
Сохраните свою работу, и вы должны увидеть новую ссылку на экране. Нажмите на ссылку «О программе «, и вы сразу же окажетесь на странице «О программе».
