Как выбрать лучший генератор статического сайта для вашего проекта 2019

Так. Много. Генераторов статических сайтов.

Даже для нас, которые сделали 15+ (и продолжаем) демонстраций и обучающих программ с ними, это может быть довольно ошеломляющим.

Я не могу поверить, как это должно быть трудно, разработчику, только изучающему JAMstack и статическую веб-экосистему.

Как приземлиться в с***ной стране чудес

Чтобы попытаться помочь им, мы объединили наши знания в одну всеобъемлющую часть.

К концу этого поста вы сможете найти лучший генератор статического сайта (SSG) для любого проекта.

Вот что вы узнаете о SSG:

  1. Какие они есть (и почему вы должны их использовать).
  2. Каковы лучшие статические генераторы сайтов в 2019 году.
  3. Соображения, прежде чем выбрать один.

1. Что такое генераторы статического сайта?

Если вы ищете правильный SSG, я предполагаю, что вы достаточно хорошо понимаете, что это такое. Тем не менее, немного контекста не может повредить.

Статические сайты не новы. Они были тем, что мы использовали для построения Интернета до того, как на смену пришли динамические CMS (WordPress, Drupal и т. Д.).

Что нового тогда? За последние пару лет появилось несколько современных инструментов, таких как генераторы статических сайтов, которые расширили возможности статических сайтов.

Проще говоря, генератор статического сайта берет содержимое вашего сайта, применяет его к шаблонам и создает структуру чисто статических HTML-файлов, готовых для доставки посетителям.

Этот процесс дает много преимуществ по сравнению с традиционными CMS.

1. Зачем использовать статические генераторы сайтов?

→ Быстрое время загрузки.

Динамическое извлечение информации из базы данных при каждом попадании на страницу сайта, насыщенного контентом, может привести к задержкам, разочарованию и отказам.

SSG доставляет уже скомпилированные файлы в браузер, значительно сокращая время загрузки (вашей команде SEO это понравится ).

→ Безопасный и надежный

Мнения и громоздкие традиционные CMS ограничивают. Единственный способ масштабирования - с помощью существующих плагинов, а настройка ограничена доступными платформами тем. Это здорово, если вы не технический пользователь, но разработчики быстро связывают свои руки.

Правда, SSG могут требовать больше технических навыков, но они окупаются для разработчиков со свободой. Хотя большинство из них также имеют механизм плагинов, возможности расширения с использованием их основного языка программирования безграничны.

→ Их слабости … исчезают.

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

Управление контентом может быть сложным для конечных пользователей, которые не имеют технического образования. Хорошей новостью является то, что существует внушительное количество безголовых CMS, готовых завершить SSG. Разница между автономными и традиционными CMS заключается в том, что вы будете использовать первый только для задач «управления контентом», а не для создания шаблонов и внешнего интерфейса. Могу поспорить, вы найдете тот, который соответствует вашим потребностям.

Некоторые CMS на статических сайтах поддерживают SSG. Проверьте Forestry для Jekyll & Hugo или DatoCMS для многих из них.

Но как насчет динамических функций, необходимых для хорошего пользовательского опыта? Доступно множество потрясающих сервисов:

  • Serverless или Webtask для внутренних функций,
  • Netlify для развертывания, идентификации, форм и функций без сервера
  • Algolia для поиска,
  • Snipcart или Easynetshop для электронной коммерции,
  • Disqus или Staticman для пользовательского контента.

Это всего лишь несколько примеров того, что там есть .

Продайте JAMstack и генераторы статических сайтов своим клиентам, превратив эти достижения в области развития бизнеса. Прочтите это руководство, чтобы узнать больше.

2. Какой генератор статического сайта выбрать?

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

На сегодняшний день их более 400. Если вы только начинаете со статической веб-разработки, то следующее поможет вам в процессе принятия решений!

Я расскажу о некоторых из лучших, но помните, что это все еще небольшая часть всех существующих SSG. Для полного списка, я предлагаю посетить staticgen.com .

#2.1 Лучшие статические генераторы сайтов в 2019 году

В этом разделе я представляю SSG, которые, я думаю, вам абсолютно НЕОБХОДИМО знать и которые будут отвечать потребностям большинства проектов. Эти выборы основаны как на общей популярности, так и на опыте нашей команды по созданию десятков демонстраций JAMstack.

Gatsby

Gatsby переносит статические страницы в стеки внешнего интерфейса, используя клиентский JavaScript, многократно используемые API и предварительно созданную разметку. Это простое в использовании решение, которое создает SPA (одностраничное приложение) с React.js, Webpack, современным JavaScript, CSS и многим другим.

Gatsby.js - это статический генератор PWA (Progressive Web App) . Он извлекает только критические HTML, CSS, данные и JavaScript, чтобы ваш сайт мог загружаться максимально быстро. По сути, богатая экосистема плагинов для данных Gatsby позволяет веб-сайту получать данные из различных источников, включая безголовые CMS, службы SaaS, API, базы данных, файловые системы и многое другое.

Еще в сентябре 2018 года Гэтсби выпустил долгожданную версию 2.0.0. Их объявление о выпуске делает следующие заявления об обновленной версии:

Этот выпуск фокусируется на производительности и опыте разработчиков. Основные моменты: сокращение времени сборки на 75%, сокращение времени выполнения клиента JavaScript на 31% и обновление основных зависимостей Gatsby до последних версий: веб-пакет 4, Babel 7, React 16.5.

Для получения дополнительной информации о Gatsby 2.0.0 вы можете проверить их 60-минутный вебинар с подробным описанием обновлений.

Gatsby имеет широкий спектр приложений и является хорошим выбором для сайтов, которым необходимо использовать данные из многих источников. Он определенно находится на пути к вершине, и меня не удивит, если он будет считаться генератором статических сайтов номер один в 2019 году.

Да, и в качестве дополнительного бонуса, он может также исправить одну из самых больших проблем разработчиков с SSG: (длинные) атомные сборки. Создатель Кайл Мэтьюз недавно создал компанию поверх своего проекта с открытым исходным кодом. Gatsby Inc. создаст облачную инфраструктуру для сайтов Gatsby, которая может включать предварительный просмотр контента и инкрементные сборки, что изменит правила игры для SSG.

→ Гэтсби учебники:

Jekyll

Джекил генератор статических сайтов

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

Одним из ключевых моментов продажи Jekyll для новичков является широкий спектр импортеров . Это позволяет с относительной легкостью перенести существующий сайт в Jekyll. Например, если у вас есть сайт WordPress, вы можете переключиться на Jekyll, используя один из них.

Затем Jekyll позволяет вам сосредоточиться на контенте, не беспокоясь о базах данных, обновлениях и модерации комментариев, сохраняя при этом постоянные ссылки, категории, страницы, публикации и пользовательские макеты.

Он построен на Ruby и интегрирован в GitHub Pages, поэтому риск взлома значительно ниже. Тематика проста, SEO запечатлен, и сообщество Jekyll предлагает множество плагинов для настройки.

Кроме того, Jekyll только что выпустил первую альфа-версию для Jekyll 4. Это серьезное изменение, которое может похвастаться более быстрым временем сборки и устранением предыдущих ошибок. Другие изменения включают отказ от поддержки Ruby 2.3, тег link теперь включает в себя фильтрlative_url и некоторые другие, на которые стоит обратить внимание, если вы когда-либо играли с Jekyll в прошлом. Вы можете найти подробный список всех изменений в журнале изменений Джекилла .

→ Джекилл учебники:

Hugo

Hugo SSG

Простой в настройке, удобный SSG, который не требует особых настроек перед тем, как вы запустите сайт.

Hugo хорошо известен своей скоростью сборки (на самом деле, он претендует на звание «самого быстрого в мире»), а функции контента, управляемого данными, позволяют легко генерировать HTML на основе каналов JSON / CSV. Вы также можете написать свои собственные шорткоды и использовать готовые шаблоны для быстрой настройки SEO, комментариев, аналитики и других функций.

Кроме того, Hugo обеспечивает полную поддержку i18n для многоязычных сайтов, что облегчает доступ к международной аудитории. Это особенно полезно для продавцов электронной коммерции, которые хотят локализовать свои сайты.

Кроме того, в прошлом году они объявили о расширенной функции создания тем, которая предлагает мощный способ создания сайтов Hugo с использованием повторно используемых компонентов.

Что касается этого года, они были довольно заняты обновлением, особенно в апреле. 8 апреля они выпустили Hugo 0.55.0 ( «Издание для раннего пасхального яйца» ) с такими обновлениями, как виртуальные выходные форматы, пересмотренные .Page и .Page на узлах таксономии. С тех пор они были в полном “режиме исправления ошибок”, производя пять обновленных версий с улучшениями и исправлениями ошибок. Вы можете проверить новейшую версию Hugo 0.55.5 (выпущена 02 мая 2019 года) здесь.

→ Хуго учебники:

NEXT.js

Хотя Next.js не обязательно является SSG как таковым, он представляет собой облегченную среду для статических и серверных приложений React.

Он создает универсальные приложения JavaScript , а это означает, что JS работает как на клиенте, так и на сервере. Этот процесс повысил производительность этих приложений в загрузке первой страницы и SEO. Набор функций Next.js включает автоматическое разбиение кода, простую маршрутизацию на стороне клиента, среду разработки на основе веб-пакетов и любую реализацию сервера Node.js.

Плюс, 2019 год был довольно насыщенным для Next.js. За последние 5 месяцев они сделали много обновлений, которые стоит проверить. В частности, Next.js 8 вышел в феврале 2019 года с сокращением использования памяти во время сборки, улучшением производительности предварительной выборки, более быстрым статическим экспортом и многими другими. Их последняя версия 8.1 делает Next.js полностью способным создавать страницы AMP, что влечет за собой некоторые ужасные улучшения SEO. Все эти изменения можно найти прямо в блоге Next.js.

В настоящее время JavaScript присутствует повсюду, React - самая модная на данный момент среда интерфейса JS. Так что Next.js определенно стоит посмотреть.

→ Next.js Учебное пособие:

Nuxt.js

По своему названию и назначению похож на Next.js, Nuxt - это фреймворк для создания универсальных приложений Vue.js. Он включает рендеринг пользовательского интерфейса, абстрагируя от распределения клиент / сервер. Он также имеет опцию развертывания под названием nuxt generate для создания статических сгенерированных приложений Vue.js.

Эта минималистическая структура для простоты использования сервера проста и проста, но, вероятно, больше ориентирована на программную реализацию, чем на традиционные леса DOM.

Самым большим обновлением Nuxt является их версия 2.6, вышедшая 25 апреля 2019 года. Этот выпуск включает несколько досадных исправлений ошибок и обновлений зависимостей. Изменения прошли долгий путь от версии 2.4.0, которая была выпущена в начале года. Чтобы отслеживать все эти обновления, вы можете обратиться к примечаниям к выпуску Nuxt .

Поскольку Nuxt - это фреймворк Vue, настоятельно рекомендуется знакомство с Vue, поэтому разработчики, которые раньше работали с Vue, будут чувствовать себя как дома. С быстрым ростом Vue.js в экосистеме JavaScript - и учитывая нашу коллективную любовь к нему - неудивительно, что он попал в этот список.

Если вы поклонник Vue.js, вы также можете проверить VuePress .

→ Nuxt учебники:

Unibit

Это новый SSG от команды Stackbit, по их заявлениям его стек способен конвертироваться под jekyll gatsby , hugo и прочие популярные SSG. А сама платформа Stackbit предназначена для упорядоченного ведения сайтов JAMstack.

→ Unibit учебники:

В качестве последнего заявления об отказе, я думаю, стоит напомнить, что, опять же, это то, что мы считаем лучшими генераторами статических сайтов в 2019 году, но этот список, конечно, не является исчерпывающим. Некоторые другие великие SSG, такие как Gridsome или Eleventy , набирают тонны тяги в этом году и их стоит проверить.

3. Основные соображения при выборе SSG

В этом разделе будет использован другой подход, помогающий вам открыть для себя SSG. Здесь вы найдете несколько новых, которые я не упомянул в последнем разделе.

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

Вот несколько вопросов, которые вы должны задать себе, прежде чем выбрать правильный инструмент:

1. Вам нужно много динамических функций и расширений из коробки?

Здесь есть две школы мысли.

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

  • Выберите SSG, который поставляется с меньшим количеством функций, но предлагает широкую экосистему плагинов, которая позволяет вам расширять и настраивать ваши настройки по мере необходимости. Это, вероятно, представляет собой одну из самых сильных сторон Джекилла . Тот факт, что он был так популярен так долго, превратился в большое сообщество и множество плагинов. Чтобы продвинуть это понятие еще дальше, Metalsmith оставляет все манипуляции с плагинами, делая их легко настраиваемыми и способными создавать что угодно. Компромисс здесь заключается в том, что для этого требуется более высокий уровень технических навыков для обработки вариантов использования. Но это может быть серебряная подкладка, если вы пытаетесь выучить язык, на котором работает SSG!

2. Насколько важно ваше время сборки и развертывания?

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

Явный победитель здесь - Хьюго . Он хорошо известен своими быстрыми темпами сборки. Он может собрать простой сайт из разметки и шаблонов за миллисекунды и пролистать тысячи страниц за секунды.

Реактивные фреймворки, такие как Nuxt , также хороши для производительности (что, как примечание, имеет некоторые положительные последствия для SEO).

hugo 250 страниц за секунду, другие по 1-2 страницы за минуту

Это одна из областей, где Jekyll на самом деле выглядит плохо - многие разработчики жалуются на скорость его сборки.

3. Какой тип проекта вы хотите обработать с помощью SSG?

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

→ Блог или небольшие персональные сайты :

Джекилл является очевидным, чтобы упомянуть здесь. Он представляет собой SSG с поддержкой блогов, абстрагирующую все, что может помешать тому, что действительно имеет значение в блоге: контент. Hexo - это еще один , который вы должны учитывать при создании простой платформы для блогов. В конечном счете, большинство SSG выполнят свою работу в этой области.

Также проверьте: Хьюго, Пеликан , Гэтсби, Одиннадцать .

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

GitBook позволяет легко писать и поддерживать высококачественную документацию и является самым популярным инструментом такого рода. VuePress растет очень быстро, хотя. Этот был создан для поддержки потребностей проекта в проектах Vue.

Также проверьте: Docusaurus, MkDocs.

→ Электронная коммерция :

Вы также можете легко интегрировать магазин в большинство статических генераторов сайтов (как показано в предыдущих уроках). Электронная коммерция может быть сложной, так как многие аспекты принимаются во внимание. Подумайте о таких аспектах, как пользовательский интерфейс, таких как скорость и пользовательский интерфейс. SEO - это то, что вы не хотите игнорировать при развитии бизнеса в Интернете.

В крупных магазинах, где вам может понадобиться CMS для управления продуктами, спросите себя, какой SSG лучше всего подойдет для безголовой CMS по вашему выбору.

Учитывая это, исходя из нашего собственного опыта, мы предлагаем взглянуть на реактивные структуры, такие как Gatsby & Nuxt . Но это не значит, что вы должны отложить в сторону более дружелюбные варианты, такие как Jekyll или Hugo, если вам нужно все упростить.

→ Маркетинговый сайт :

Один я до сих пор не упомянул, это Middleman . То, что отличает этот от группы, - то, что это стремится предоставить гибкость, чтобы создать любой тип сайта, вместо того, чтобы быть сильно приспособленным к движку блогов. Это отлично подходит для продвинутых маркетинговых сайтов, и компании, такие как MailChimp и Vox Media, использовали его для своих собственных целей.

Также проверьте: Гэтсби, Хьюго, Джекилл.

4. Если вы хотите изменить сайт и / или генератор самостоятельно, вам нужно, чтобы он был на определенном языке, в котором вы хорошо разбираетесь?

Если это так, то здесь вы должны обратить внимание на следующие языки:

JavaScript : Next.js & Gatsby (для React), Nuxt & VuePress (для Vue), Hexo, Eleventy, GitBook, Metalsmith, Harp, Spike.
Питон : Пеликан, MkDocs, Кактус.
Рубин : Джекилл, Мидлман, Нанок, Октопресс.
Go : Hugo, InkPaper.
.NET : Wyam, крендель.

5. Собираются ли нетехнические пользователи работать на этом сайте?

После завершения разработки и создания веб-сайта, кто будет его запускать и редактировать его содержимое? В большинстве случаев это попадает в руки нетехнических пользователей, которым будет трудно ориентироваться в репозиториях кода.

Вот где вам следует рассмотреть возможность сопряжения SSG с CMS без головы. Важен не только выбор CMS, но и поиск подходящего SSG для подключения к веб-интерфейсу.

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

Гэтсби продвинул эту идею с одной из своих замечательных функций - реализацией GraphQL . Я не буду объяснять, что такое GraphQL , но вкратце он позволяет выполнять более быстрые и менее раздутые запросы данных.

6. Важны ли для вас сообщество и помощь сверстников?

Если это так, рассмотрите один из лучших генераторов статических сайтов, перечисленных ранее. Они являются самыми популярными в настоящее время и поддерживаются самыми активными сообществами, порождающими плагины, тематические исследования и ресурсы всех видов.

Помните, что современные статические сайты и JAMstack по-прежнему являются частью относительно новой экосистемы, и если вы начнете с менее известных инструментов, вы можете обнаружить, что поддержка сообщества по-прежнему отсутствует.

##Заключительные мысли

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

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

Какой статический генератор сайтов вы бы порекомендовали? Что дальше для экосистемы JAMstack? Я действительно хочу услышать от вас, поэтому присоединяйтесь к обсуждению в комментариях ниже!

дополненный перевод статьи https://snipcart.com/blog/choose-best-static-site-generator

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus