В этой статье я сравниваю два генератора статических сайтов, Gatsby и Hugo. Я обсуждаю знакомство с фреймворками, стабильность, безопасность, инструменты, скорость сборки, производительность и сообщество, окружающее их. Итак, приступим.

Около года назад я изменил свой веб-сайт с Wordpress на Hugo, который представляет собой генератор статических сайтов, написанный на Go, который использует библиотеки шаблонов Go для создания шаблонов. Недавно я провел оценку жизнеспособности Gatsby, еще одного генератора статических сайтов, написанного на React, который использует React для создания шаблонов.

В этой статье я сравниваю различия между Hugo v0.42 и Gatsby v1.93. Для сравнения я использовал этот сайт Хьюго и этот сайт Гэтсби. Код для каждого можно найти на Github для сайта Hugo и сайта Gatsby.

Знакомство с фреймворком

Если вы не знакомы с React и не планируете изучать React, вам, вероятно, следует выбрать Hugo. Если вы знаете и любите React, стоит ли вам выбирать Gatsby? Ну не обязательно.

Я бы сказал, что вам нужно приличное понимание React (см. Изучите React с этими ресурсами), если вы хотите использовать Gatsby. А чтобы понять React, вам нужно хорошее понимание JavaScript (см. Изучите JavaScript с помощью этих ресурсов).

Несмотря на то, что я использую Hugo почти год, мне не нужно было понимать Go. Мне также нужно было немного узнать о библиотеках шаблонов Go. Однако я обнаружил, что мне приходилось чаще обращаться к документации с Хьюго из-за моего незнания. Гэтсби требует более глубокого понимания React, чем Хьюго ожидает от Go. Тем не менее, если бы знакомство с фреймворком было единственным критерием, я бы выбрал Gatsby, потому что приятно не обращаться к документации при добавлении новых функций на свой веб-сайт.

Стабильность

Один из способов оценки стабильности - это сравнить проблемы Хьюго на GitHub с проблемами Гэтсби на GitHub. Вы увидите, что у Гэтсби больше функций (что интересно), но также есть больше ошибок (что не так интересно). Сначала я не считал стабильность критерием, пока не обнаружил эту ошибку, которая заставила меня осознать важность стабильности в программном обеспечении. Возможно, я принимаю это на свой счет из-за времени и усилий, которые я потратил, пытаясь найти эту ошибку, но я все же считаю, что Hugo более стабилен, чем Gatsby.

Безопасность

Гэтсби использует JavaScript, а приложения JavaScript известны тем, что для их работы требуется множество модулей Node. Есть даже модуль Node, который отправляет твиты Hot Pocket, а другой - собирает номера кредитных карт: D. Статические сайты, как правило, более безопасны по своей природе, но я все же думаю, что стоит упомянуть, что большее количество зависимостей приводит к большему количеству кода, которому вы, возможно, не доверяете.

Инструменты

У Гэтсби есть все преимущества цепочки инструментов JavaScript и все недостатки усталости от JavaScript. Вдобавок к этому у Гэтсби есть действительно хорошая библиотека плагинов. В частности, gatsby-plugin-offline позволил мне легко добавить на свой веб-сайт офлайн-возможности, чего я до сих пор не понял с Хьюго.

С другой стороны, некоторые вещи, для которых требуется плагин с Гэтсби, просто идут прямо из коробки с Хьюго. Например, gatsby-plugin-реагировать-шлем необходим для редактирования тега заголовка, тогда как это можно сделать с помощью простого HTML в Hugo. Поскольку мне нравилось пользоваться инструментами, которые поставлялись с Гэтсби, я отдаю его Гэтсби.

Скорость сборки

Хьюго может создать мой веб-сайт без каких-либо дополнительных инструментов менее чем за 100 мс. Гэтсби может создать мой веб-сайт примерно за 15 секунд, но это включает в себя множество дополнительных инструментов. Добавление PostCSS и Imagemin в сборку Hugo увеличивает время сборки примерно до 5 секунд. Следить за изменениями во время разработки также было быстрее с помощью Hugo. Я думаю, что Хьюго здесь победитель.

Документация

И у Гэтсби, и у Хьюго действительно хорошая документация. У Хьюго есть Быстрый старт, а у Гэтсби есть раздел Начало работы. У Гэтсби также есть действительно хороший учебник, который выравнивает более крутую кривую обучения. Лично мне было легче начать работу с Gatsby, но это потому, что я уже разбирался в React. Я думаю, будет справедливо сказать, что и у Хьюго, и у Гэтсби есть отличная документация.

Представление

При использовании Lighthouse оценка производительности моего сайта в Хьюго составила 100, а для моего сайта в Гэтсби - 95. Первая Contentful Paint для 3G-соединения заняла около 1 секунды для сайта Hugo и 1,5 секунды для сайта Gatsby. При использовании Тест веб-страницы время загрузки по 2G-соединению составило 8,7 секунды в Hugo и 11,7 секунды в Gatsby.

Однако, выполнив простой ручной тест, чтобы увидеть, какой сайт загружается первым, Гэтсби оказался заметно быстрее, поэтому я не совсем понимаю, что измерял Lighthouse или Web Page Test. Кроме того, поскольку Gatsby является одностраничным приложением, для навигации по веб-сайту не требуется запрос с сервера. Страницы просто перерисовываются с помощью JavaScript. Во всяком случае, я могу с уверенностью сказать, что и Хьюго, и Гэтсби быстрые. Мне было бы интересно услышать ваши мысли в комментариях ниже.

Сообщество

Гэтсби быстро набирает популярность благодаря процветающему сообществу. Это не значит, что сообщество Хьюго скучно. Если судить по звездам GitHub, у Хьюго их более 27 тысяч, а у Гэтсби - более 23 тысяч. В Твиттере Гэтсби кажется более активным, чем Хьюго.

Последние мысли

Итак, какой из них выбрать? Гэтсби использует React, с которым я лучше знаком, у него лучший инструментарий и у него процветающее сообщество. С другой стороны, Хьюго более стабилен и тратит меньше времени на строительство. Для более крупных веб-сайтов скорость создания становится более важной, и некоторых из вас может вообще не волновать React. В моем случае стабильность была самым важным критерием, поэтому я решил придерживаться Хьюго. Я очень рад видеть, что будущее принесет с этим пространством.

Перед тем, как уйти… Спасибо, что прочитали статью! Если вам понравилось, не забудьте выразить свою признательность, нажав 👏 ниже!

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

Вам также может понравиться: