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

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

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

Короче говоря, GatsbyJS создает статические сайты с использованием современных веб-технологий. Вы по-прежнему можете использовать React, модули CSS, GraphQL и т. Д. Единственная разница в том, что они используются перед развертыванием.

Слово «статика» может оттолкнуть некоторых людей. Важно понимать, что вы все равно можете применить JS к странице, чтобы обогатить ее, добавить отложенную загрузку и т. Д. Но основную логику для создания этой страницы можно разделить. Например, вы можете выполнить некоторый JavaScript, чтобы получить данные для рендеринга страницы. Но теперь эти усилия сняты с обозревателя клиентов.

Зачем я это использовал?

  1. Я хотел сразу взяться за дело. Настройка среды разработки, подготовка сборки к производству и т. Д. - все это требует времени.
  2. Попробуйте что-то новое и извлеките уроки из этого.
  3. Продолжайте использовать современные инструменты разработки - React, GraphQL, Webpack, Storybook и т. Д.
  4. Создайте сайт, который загружается быстро! Рендеринг контента на сервере помогает сократить время загрузки и улучшить SEO. Если вы можете избежать запуска JavaScript на стороне клиента, то почему бы и нет?

Итак, что хорошо получилось с GatsbyJS…

Среда разработки

Настроить новый сайт и запустить его локально можно в несколько строк:

npx gatsby new gatsby-site
cd gatsby-site
npm run develop

Это даст вам локальную среду разработки по адресу http://localhost:8000 с живой перезагрузкой. Теперь вы готовы начать кодирование и сосредоточиться на сборке. Когда вы будете готовы к развертыванию, вы можете создать производственную версию с npm run build.

GraphQL

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

Использование GraphQL IDE (http://localhost:8000/___graphql) поможет понять данные, которые вы загружаете, и способы их запроса / обработки.

Gatsby-Image

Стоит упомянуть Gatsby-Image, который, по их собственным словам, описывается как «быстрые, оптимизированные изображения без работы». Этот плагин потрясающий! Вы предоставляете детали изображения с помощью GraphQL, а он делает все остальное.

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

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

Развертывание в AWS

Хотя вы не ограничены использованием AWS, это был мой выбор. После настройки AWS GatsbyJS позволяет без особых усилий загрузить сборку.

  1. В AWS создайте учетную запись IAM с правами администратора и создайте для нее идентификатор доступа и секрет.
  2. Установите интерфейс командной строки AWS и запустите aws configure. Для выполнения этого шага вам потребуются сведения из шага 1.
  3. Установите требуемый модуль узла npm i gatsby-plugin-s3
  4. Обновите свой gatsby-config.js, чтобы использовать плагин и указать на свою корзину. Например:
plugins: [{
  resolve: `gatsby-plugin-s3`,
  options: {
    bucketName: 'my-bucket-name.com'
  },
}]

4. Наконец, runnpm run build && npm run deploy. Это создаст рабочую версию и развернет ее. Очень приятно внедрять ваши последние изменения, подобные этому.

Заворачивать

В целом я был очень доволен использованием GatsbyJS, он не разочаровал! Документация, примеры и фактическое использование великолепны. Мне лично нравится концепция использования React, GraphQL и других инструментов для создания статического сайта. Я мог бы использовать JavaScript на стороне клиента для рендеринга моей страницы, но зачем это делать, если я могу загружать страницу быстрее, если она была сгенерирована до развертывания?

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