Эта статья должна дать общее представление о том, как работает Gatsby и как его можно использовать для создания личного веб-сайта с нуля. Если вы новичок в Гэтсби, эта статья для вас.
Недавно я опубликовал первую версию своего личного веб-сайта. Поскольку у меня не было возможности попробовать Gatsby до проекта, я впервые погрузился в эту новую экосистему.
Несмотря на то, что в процессе разработки я все больше и больше увлекался Гэтсби, поначалу он, по общему признанию, был довольно ошеломляющим. Тем более, что раньше я мало работал с GraphQL и Markdown.
Поэтому я решил написать эту статью как вводное руководство по созданию веб-сайтов с помощью Gatsby. В этой статье мы не только создадим упрощенную версию моего собственного портфолио с нуля, но также рассмотрим, что такое Гэтсби и как он работает под капотом.
СОДЕРЖАНИЕ
- Введение в Гэтсби
- Создание нового проекта Gatsby
- Объяснение структуры папок Гэтсби
- Введение в плагины Gatsby
- Создание базового макета страницы
- Создание разделов страницы
- Добавление контента через файлы Markdown
- Развертывание в Netlify
Как видите, у нас есть много интересного, во что можно погрузиться. К концу этой статьи мы создадим портфолио с многоразовым макетом страницы и динамическим извлечением контента через файлы Markdown.
1. Введение в Гэтсби
Прежде чем мы начнем, я хочу кратко объяснить, что такое Гэтсби и как он работает. Эти базовые знания помогут нам в дальнейшем в процессе разработки.
Гэтсби начинал как генератор статических сайтов. Это означает, что Gatsby объединяет шаблоны (например, компоненты React) и контент (например, файлы Markdown) в процессе сборки и генерирует полностью визуализированные HTML-страницы. Поэтому сайты Гэтсби часто считаются быстрыми. Поскольку дополнительная визуализация на клиенте или сервере не требуется, вы можете мгновенно предоставить пользователю запрошенные HTML-страницы.
Между тем, Gatsby - это больше, чем просто генератор статических сайтов. Это фреймворк, который находится поверх React и пытается абстрагироваться от многих низкоуровневых сложностей, которые излишне усложняют жизнь разработчика. Это также отражено в общем видении Гэтсби.
Наше видение состоит в создании веб-строительных блоков более высокого уровня.
Если вы начнете работать с Гэтсби, вы поймете, что Гэтсби очень упрощает создание сложных вещей. Прекрасным примером этого является компонент Gatsby Image. Его можно использовать вместо обычного тега <img />. Самое классное в нем то, что он предоставляет такие функции, как изменение размера, отложенная загрузка и сжатие изображений прямо из коробки. Это не только значительно улучшает и ускоряет процесс разработки, но и приносит гораздо больше удовольствия, потому что вы можете с легкостью создавать мощные приложения!
Поэтому давайте сразу же приступим к нашему следующему проекту Гэтсби!
2. Создание нового проекта Gatsby
Если вы раньше не работали с Gatsby, вам необходимо сначала установить Gatsby CLI. Интерфейс командной строки необходим для доступа к таким функциям, как запуск сервера разработки или создание производственной сборки. Чтобы установить его, выполните следующую команду:
npm install -g gatsby-cli
Установив интерфейс командной строки, мы можем использовать его для создания нового проекта Gatsby с помощью команды gatsby new. Эта команда принимает аргументы: имя и URL-адрес, указывающий на проект Gatsby Starter.
Gatsby Starter можно рассматривать как шаблонный проект, закладывающий основу вашего сайта. Например, он может сразу предоставить вам определенные функции, такие как установка Redux. Однако, если мы опускаем URL-адрес при запуске команды gatsby new, Гэтсби использует стартер по умолчанию, который обеспечивает только минимально необходимую конфигурацию.
Поскольку мы хотим начать с нуля, запускаем:
gatsby new gatsby-portfolio
Когда установка будет завершена, мы можем перейти в каталог и запустить gatsby develop, чтобы запустить сервер разработки.
cd gatsby-portfolio gatsby develop
3. Объяснение структуры папок Гэтсби
Прежде чем мы перейдем к кодированию, давайте кратко рассмотрим структуру папок Гэтсби. Хотя сам React не дает никаких рекомендаций относительно структурирования проекта, Гэтсби здесь несколько более категоричен. Поэтому важно понимать, как все в Гэтсби сочетаются друг с другом.
Если вы откроете проект в редакторе кода, вы увидите похожее дерево каталогов.
|--src |--components |--images |--pages |--gatsby-browser.js |--gatsby-config.js |--gatsby-node.js |--gatsby-ssr.js |--...
Внутри каталога src у нас есть три предопределенных папки: компоненты, изображения и страницы. Если вы знакомы с React, папка components может быть для вас не новой, равно как и папка pages, если вы раньше работали с такими фреймворками, как Next.js.
Папку components можно переименовать как угодно, а папку pages нельзя. Гэтсби использует эту папку для создания HTML-страниц с доступом по URL-адресу для каждого файла в процессе сборки. Например, выходные данные файла about.js внутри папки pages будут позже доступны по маршруту /about.
Как и папка components, папка images также не является обязательной. Однако, поскольку он по умолчанию настроен как источник данных для извлечения изображений в наши компоненты по мере необходимости, удаление папки на данный момент нарушит работу нашего приложения. Поскольку позже мы начнем работать с собственными источниками данных, нам не нужно сейчас заботиться о папке images.
Наконец, у нас есть несколько .js файлов, которые обеспечивают доступ к различным API-интерфейсам Gatsby, а также к параметрам конфигурации. Особенно вначале файл gatsby-config.js будет для вас самым важным. Вы можете использовать его для настройки плагинов, как мы увидим позже.
Давай уберемся
Чтобы начать с чистого листа, я предпочитаю удалять все ненужные файлы в каталоге src. Нам нужны только два файла - это компонент SEO и страница индекса. Итак, наш очищенный каталог src должен выглядеть так:
|--src
|--components
|--seo.js
|--pages
|-index.js
Поскольку наше приложение сейчас вылетает, мы должны удалить все зависимости в нашем index.js файле:
Теперь мы можем посетить нашу index.js страницу маршрута / и надеемся увидеть дружеское приветствие. Давайте продолжим и добавим немного содержания и стиля!
4. Представляем плагины Gatsby
Как я уже упоминал во вводной части, цель Гэтсби - предоставить строительные блоки более высокого уровня, чтобы облегчить нашу жизнь как разработчиков. Плагины Gatsby по сути являются этими строительными блоками.
Даже несмотря на то, что это может быть много теоретической подготовки, очень важно понимать концепцию плагинов в экосистеме Gatsby, потому что она может улучшить и использовать развитие нашего портфеля. К счастью, это быстро объясняется.
Плагины Gatsby - это пакеты Node.js, которые очень просто добавляют определенные функции на ваш сайт.
Эти функции могут быть чем угодно. Например, интеграция сторонних сервисов, таких как Google Analytics. Используя для этого подключаемый модуль Gatsby, вы можете добавить такую функциональность, не написав ни единой строчки кода.
Мы будем использовать несколько плагинов по мере продвижения, поэтому мы узнаем, как их добавить через секунду. Однако, если вы хотите получить представление о том, какие плагины существуют в первую очередь, взгляните на библиотеку плагинов Gatsby.
Давайте добавим наш первый плагин
Часто используемый плагин - gatsby-plugin-styled-components. В нем описан процесс настройки, связанный с использованием стилизованных компонентов в среде с рендерингом на стороне сервера.
Если вы раньше не использовали стилизованные компоненты, я вам настоятельно рекомендую. Это обычный и довольно популярный пакет Node.js, позволяющий писать CSS-in-JS.
Однако использование этого пакета в проекте Gatsby требует некоторых усилий для правильной работы. К счастью, этого можно избежать, используя плагин gatsby-plugin-styled-components.
Чтобы использовать плагин в нашем проекте, мы должны сначала установить все необходимые пакеты NPM. Итак, давайте запустим следующую команду:
npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components
После завершения установки мы можем настроить плагин в gatsby-config.js файле. Как видите, в списке уже есть несколько предустановленных плагинов. В этом случае все, что нам нужно сделать, это добавить имя плагина gatsby-plugin-styled-components в список плагинов.
Для других плагинов может потребоваться дополнительная настройка. Это можно сделать, добавив плагин как объект, содержащий свойство options. Затем свойство options можно использовать для установки определенных настроек плагина.
Поскольку плагин Styled Components не требует каких-либо настроек конфигурации, наш список плагинов теперь должен выглядеть следующим образом:
Внесение изменений в конфигурацию Gatsby иногда требует перезапуска сервера разработки. Так что, если ваш все еще работает, выйдите из процесса и перезапустите его, нажав gatsby develop.
5. Создание макета страницы
Теперь, когда наша первоначальная настройка завершена, мы можем наконец приступить к созданию базового макета страницы. Для этого мы создаем новый файл с именем layout.js в папке components.
Этот компонент обертывает специфическое для страницы содержимое и обеспечивает базовый стиль, а также статические элементы, такие как верхний и нижний колонтитулы. В общем, все, что должно появиться на каждой странице в нашем приложении. Такой компонент мог бы выглядеть так:
Для простоты я не буду явно определять импортированные компоненты, такие как верхний и нижний колонтитулы, в этой статье. Полный исходный код этого проекта доступен на GitHub - я добавлю ссылку на репозиторий в конце статьи.
Теперь мы можем импортировать компонент layout в наш index.js файл, чтобы придать нашей странице соответствующий стиль.
Если бы у нас было несколько страниц в нашем портфолио, мы могли бы повторно использовать компонент макета, чтобы добавить одинаковый стиль для каждой отдельной страницы. После того, как мы добавили базовый макет на нашу индексную страницу, он должен выглядеть следующим образом:
6. Создание разделов страницы
Теперь, когда у нас есть фундамент, на котором можно опереться, мы можем добавить любое количество разделов на нашу страницу. Это могут быть разделы, в которых вы демонстрируете свои последние проекты или просто рассказываете больше о себе!
В качестве примера мы начинаем с создания раздела о героях, в котором кратко говорится, кто мы и чем занимаемся. Это должно дать вам представление о том, как это работает, чтобы вы могли добавить больше разделов, если хотите.
В нашем проекте каждый раздел представлен компонентом. Следовательно, мы создаем новый файл с именем hero.js внутри папки components.
На данный момент мы просто жестко кодируем любой контент внутри нашего компонента героя. На следующем шаге мы определим наш контент в файле Markdown и будем использовать его в качестве источника данных.
Определив наш hero.js компонент, мы можем импортировать его в index.js, обернуть его нашим макетом и вуаля, у нас должен быть наш первый раздел!
7. Добавление контента через файлы Markdown
Пока что мы жестко запрограммировали контент в наших шаблонах. В нашем случае это может быть хорошо, поскольку проект довольно прост, но по мере роста вашего проекта это не рекомендуется.
Приложение, которое разделяет контент и шаблоны, легче поддерживать и расширять. Подумайте о разделе блога на своем веб-сайте. Если вы добавляете контент непосредственно в шаблон сообщения, вам придется продублировать весь шаблон, чтобы добавить еще одно сообщение. Тем не менее, если вы храните содержимое сообщения отдельно, например в файле Markdown каждое сообщение может использовать один и тот же файл шаблона, и вам не придется ничего дублировать.
Чтобы увидеть, как это работает, давайте создадим наш первый файл Markdown. В каталоге src мы создаем новую папку с именем content. Затем внутри папки содержимого мы создаем новый файл с именем hero.md. Это будет файл Markdown для содержимого раздела нашего героя.
Пришло время переместить жестко запрограммированный контент с hero.js на hero.md:
Поскольку фрагмент автоматически форматируется GitHub Gist, просмотрите исходную версию файла, чтобы увидеть, как выглядит синтаксис Markdown: Просмотреть исходную версию
Чтобы лучше выбирать отдельные текстовые элементы в нашем hero.js компоненте, позже мы будем использовать функцию Markdown под названием Frontmatter. Блок frontmatter обозначается тройным дефисом и может использоваться для предоставления дополнительной информации в виде пар ключ-значение. Классическим примером такой информации могут быть метаданные для сообщения в блоге (например, информация о категории).
Ниже блока frontmatter мы устанавливаем описание, которое мы используем в нашем hero.js компоненте, в качестве тела Markdown.
Давайте использовать Markdown в качестве источника данных
Теперь, когда у нас есть контент, добавленный как Markdown, нам нужно настроить вновь созданную папку content в качестве источника данных. Если мы сделаем это, мы сможем позже написать запросы GraphQL для доступа к этому контенту в наших компонентах.
Для этого перейдите к своему gatsby-config.js файлу. Там мы должны сделать две вещи:
- Скажите Гэтсби, чтобы он прочитал наши файлы Markdown.
- Скажите Гэтсби, как он должен анализировать эти файлы.
К счастью, оба шага действительно просты. Чтобы указать Гэтсби читать из наших файлов, мы можем использовать плагин gatsby-source-filesystem, который предустановлен по умолчанию. Если вы посмотрите на свой список плагинов, вы должны увидеть существующую запись для него. Прямо сейчас он сообщает Гэтсби исходные файлы из каталога images.
Поскольку мы не используем изображения в нашем приложении, мы можем перенастроить файловую систему, чтобы вместо этого файлы получали из нашей content папки. Нам просто нужно дать файловой системе имя и место для источника. Это для первого шага.
Во-вторых, нам нужно сообщить Гэтсби, что он должен делать с этими исходными файлами. В нашем случае он должен проанализировать контент Markdown и сделать его доступным для нас. Для этого нам понадобится еще один плагин под названием gatsby-transformer-remark. Поскольку по умолчанию он не установлен, его нужно установить вручную через npm.
npm install --save gatsby-transformer-remark
После этого мы можем настроить его, добавив название плагина в список плагинов. Убедитесь, что вы добавили запись после gatsby-source-filesystem, например:
Напишем запрос GraphQL
Мы почти закончили! Теперь, когда мы добавили наш контент как Markdown и настроили новый источник данных Markdown, нам нужно использовать контент в наших компонентах. В Gatsby это легко сделать с помощью GraphQL.
GraphQL - это язык запросов, который сначала может показаться незнакомым, но на самом деле его довольно легко понять. Вы в основном пишете запросы в форме, подобной JSON, которые определяют, какие части контента вы хотите получить.
Гэтсби, например, позволяет писать так называемые запросы страницы. Это запросы, которые извлекают весь контент для данной страницы. Итак, в нашем приложении мы могли бы написать запрос страницы, чтобы получить все данные, которые нам нужны в нашем index.js компоненте.
Для этого нам нужно импортировать функцию тега graphql из gatsby внутри index.js. Используя функцию тега, мы можем написать запрос GraphQL, который извлекает контент, который мы ранее добавили в наш файл Markdown:
Вы можете добавить pageQuery const под вашим IndexPage компонентом в index.js.
С этим запросом GraphQL Гэтсби, к счастью, выполняет всю оставшуюся работу за кулисами. Во время сборки он выполнит запрос, получит контент и передаст его в качестве свойств нашему компоненту index.js.
Последнее, что нужно сделать, - это взять контент и передать его компоненту Hero, поскольку именно здесь мы хотим его использовать. Итак, наконец, наш index.js компонент должен выглядеть так:
Теперь, когда мы передаем контент в качестве свойств в компонент hero.js, мы можем удалить любую жестко закодированную информацию из него и заменить ее запрашиваемыми данными, которые мы определили в hero.md:
Вот и все! Наконец, у нас все настроено и мы готовы к развертыванию!
8. Развертывание в Netlify
Netlify - отличный вариант, когда дело доходит до хостинга вашего сайта Gatsby. Он прост в использовании и предоставляет множество бесплатных функций. В принципе, вы можете разместить свой сайт на Netlify двумя способами:
- Управляйте своим проектом с помощью Git и подключите Netlify к своему репозиторию Git. Таким образом, Netlify будет развертывать и публиковать его всякий раз, когда вы нажимаете на свой репозиторий Git.
- Загрузите готовую к производству сборку, которую вы создали ранее локально. Таким образом, Netlify работает как FTP-сервер, на котором вы можете загружать и публиковать свои файлы.
Поскольку в этой статье я не хочу требовать каких-либо знаний Git, я выберу второй подход.
Однако, если вы работаете над своим проектом чаще, я очень рекомендую вам первый. Подключение Netlify к репозиторию Git значительно ускоряет и упрощает дальнейшую разработку, поскольку вы можете использовать такие функции, как непрерывное развертывание.
Если мы пойдем со вторым подходом, мы должны сначала создать готовую к производству сборку. Для этого мы снова можем использовать Gatsby CLI. В каталоге проекта запустите gatsby build. Это запустит процесс сборки.
gatsby build
После успешного завершения процесса сборки мы должны увидеть папку с именем public рядом с нашей папкой src. Это ваша производственная сборка.
Все, что нам нужно сделать, это скопировать всю папку в Netlify. Netlify автоматически опубликует сайт.
Так что давайте зайдем на netlify.com и войдем в систему (или зарегистрируемся, если у вас еще нет учетной записи). На панели инструментов перетащите папку public в область перетаскивания.
Когда загрузка будет завершена, вы сможете получить доступ к своему новому портфолио Gatsby по указанному URL!
Заворачивать
По общему признанию, это было очень много, что мы рассмотрели в этой статье. Тем не менее, я надеюсь, что вы все равно сможете следовать за мной!
Хотя кажется, что Гэтсби может оказаться излишним для таких простых вещей, как портфолио, он действительно может улучшить и ускорить ваше развитие, если вы однажды поймете, как все работает вместе. Следовательно, я настоятельно рекомендую вам глубже погрузиться в экосистему Gatsby и попробовать все на себе.
Не стесняйтесь использовать этот проект в качестве отправной точки и расширять его своими собственными пользовательскими разделами. Это отличная практика для изучения Gatsby, Markdown и запросов данных через GraphQL.
Весь исходный код доступен на GitHub:
Полнофункциональное портфолио для начинающих Gatsby
Если вы хотите сразу начать с полнофункционального портфолио, я также опубликовал все свое портфолио как Gatsby Starter. Это простое одностраничное портфолио с несколькими разделами для каждого типа информации, которую вы можете добавить.
Вы можете найти его в стартовой библиотеке Gatsby:
Как всегда, спасибо за чтение! Мне очень нравится слышать ваши мысли о Гэтсби и об этом демонстрационном проекте. Поскольку я сам новичок в Gatsby, я ценю любые идеи по улучшению сайта, которые мы создали в этой статье. Поделитесь ими ниже!
