Как и все остальное, всегда есть несколько маршрутов, по которым вы можете достичь своей цели / задачи. Моя цель была проста, я хотел создать новый личный сайт для демонстрации текущих и прошлых проектов. Хотя я мог бы создать его с нуля или использовать онлайн-платформу, GatsbyJS выделялся.
Что такое Гэтсби?
Gatsby - это бесплатная платформа для разработчиков с открытым исходным кодом, основанная на React, для создания невероятно быстрых веб-сайтов и приложений.
Короче говоря, GatsbyJS создает статические сайты с использованием современных веб-технологий. Вы по-прежнему можете использовать React, модули CSS, GraphQL и т. Д. Единственная разница в том, что они используются перед развертыванием.
Слово «статика» может оттолкнуть некоторых людей. Важно понимать, что вы все равно можете применить JS к странице, чтобы обогатить ее, добавить отложенную загрузку и т. Д. Но основную логику для создания этой страницы можно разделить. Например, вы можете выполнить некоторый JavaScript, чтобы получить данные для рендеринга страницы. Но теперь эти усилия сняты с обозревателя клиентов.
Зачем я это использовал?
- Я хотел сразу взяться за дело. Настройка среды разработки, подготовка сборки к производству и т. Д. - все это требует времени.
- Попробуйте что-то новое и извлеките уроки из этого.
- Продолжайте использовать современные инструменты разработки - React, GraphQL, Webpack, Storybook и т. Д.
- Создайте сайт, который загружается быстро! Рендеринг контента на сервере помогает сократить время загрузки и улучшить 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 позволяет без особых усилий загрузить сборку.
- В AWS создайте учетную запись IAM с правами администратора и создайте для нее идентификатор доступа и секрет.
- Установите интерфейс командной строки AWS и запустите
aws configure
. Для выполнения этого шага вам потребуются сведения из шага 1. - Установите требуемый модуль узла
npm i gatsby-plugin-s3
- Обновите свой
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 на стороне клиента для рендеринга моей страницы, но зачем это делать, если я могу загружать страницу быстрее, если она была сгенерирована до развертывания?
Это не будет идеальным решением для каждого проекта, но оно очень хорошо соответствовало моим потребностям и определенно будет учтено в будущих проектах.