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

JavaScript Программа перевода самородков CMS Jekyll

Существует множество генераторов статических сайтов.

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

я не могу понятьJAMstackИ как себя чувствуют разработчики экосистемы статических страниц…

Наверное, как Алиса, вступающая в Страну Чудес.

Чтобы решить эту проблему, мы решили синтезировать наши знания в один кусок.

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

Вы можете узнать следующее:

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

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

Если ваша цель чтения этой статьи — найти правильный SSG, то вы должны иметь хорошее представление о том, что такое SSG, но не помешает объяснить это здесь.

Статические веб-сайты не являются чем-то новым. Это то, как мы использовали для создания сети до появления динамических CMS (WordPress, Drupal и т. д.).

Что в этом нового?

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

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

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

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

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

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

→Безопасность и надежность

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

А при статических настройках почти не используется серверная функциональность.

→гибкость

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

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

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

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

Управление контентом и задачи управленияЭто может быть непросто для пользователей без технического образования. Но хорошая новость заключается в том, что сейчас существует множество безголовых CMS, которые могутПолныйваш ССГ. Разница между безголовой и традиционной CMS заключается в том, что вы можете использовать первую только для задач «управления контентом», а не для создания шаблонов и создания внешнего контента. Вы всегда найдете тот, который соответствует вашим потребностям.

Некоторые CMS для статических сайтов напрямую поддерживают SSG. Например, Джекил и Хьюго.Forestryили общеприменимоеDatoCMS.

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

  • внутренняя функциональностьServerlessилиWebtask
  • для развертыванияNetlify
  • для поискаAlgolia
  • Электронная коммерция может рассмотреть Snipcart
  • Пользовательский контент (например, обзоры) можно считатьDisqusилиStaticman

вот тольковНесколько примеров.

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

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

Знать, что такое SSG, — это одно, а выяснить, какой SSG вам подходит, — это другое.

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

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

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

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

Jekyll

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

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

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

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

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

Gatsby

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

Gatsby.js — это статический генератор PWA (Progressive Web App). Он извлекает только важные HTML, CSS, данные и JavaScript, чтобы ваш сайт загружался как можно быстрее.

Его богатая экосистема подключаемых модулей данных позволяет веб-сайтам извлекать данные из автономных CMS, сервисов SaaS, API, баз данных, файловых систем и многого другого.

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

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

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

Hugo

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

Хьюго известен своей скоростью сборки, а егоконтент, управляемый даннымиФункции для простого создания HTML на основе источников JSON/CSV. Вы можете быстро настроить SEO, обзоры, аналитику и другие функции с очень небольшим количеством кода, используя готовые шаблоны.

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

В последнее время онивыпускатьТема с расширенными функциями, позволяющая использовать повторно используемые компоненты для создания сайта Hugo.

→ Хьюго Учебник:

Next.js

Next.js — это не просто SSG по своей природе, это облегченная среда React для статического рендеринга на стороне сервера.

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

В наши дни JavaScript повсюду, а React сейчас является самой популярной средой JS для внешнего интерфейса, поэтому на нее определенно стоит обратить внимание.

→ Учебник Next.js:

Nuxt.js

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

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

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

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

→ Нуст Учебник:

2.2 Ключевые соображения

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

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

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

Здесь два жанра:

  1. Выберите генератор статических сайтов, который предлагает множество функций из коробки. Нет необходимости в тоннах плагинов или создании всего самостоятельно. Если вы так думаете,HugoПредоставляет большое количество встроенных функций, за которыми следуетGatsbyЭто также подходит для этой ситуации.
  2. Выберите SSG с меньшим количеством функций, но предлагает обширную экосистему плагинов и позволяет расширять и настраивать параметры по мере необходимости. это может бытьJekyllОдно из самых больших преимуществ. Он так популярен уже давно, коммьюнити постепенно улучшалось, появлялись различные плагины. Чтобы продвинуть эту концепцию дальше,MetalsmithилиSpikeОставьте настройки в руках плагина, который легко настраивается и может делать все что угодно. Компромисс в том, что это технически сложно, но если вы хотите выучить язык, на котором работает SSG, это может быть серебряной подкладкой!

2. Вас волнует время сборки и развертывания?

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

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

Такие какNuxtАдаптивные фреймворки, подобные этой, также отлично подходят для производительности и SEO.

Jekyll в этом отношении не очень хорош — многие разработчики жалуются на скорость его сборки.

3. Какими проектами вы хотите заниматься с SSG?

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

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

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

Читайте также: Хьюго, Пеликан, Гэтсби.

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

GitBookУпрощает написание и поддержку высококачественной документации и в настоящее время является самым популярным инструментом документации.

Также читайте о Docusaurus, MkDocs.

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

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

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

Исходя из нашего опыта, мы рекомендуемGatsbyа такжеNuxtТакой отзывчивый фреймворк. Но если вам все еще нужно, чтобы все было просто, вы можете рассмотретьJekyllилиHugo.

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

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

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

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

Ниже приведены языки, используемые различными фреймворками:

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

5. Нужно ли пользователям, не имеющим технических знаний, управлять этим сайтом?

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

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

Gatsbyновые особенности,Реализовано с помощью GraphQL. здесь не объясненоЧто такое GraphQLКороче говоря, это позволяет быстрее и чище выполнять запросы к данным.

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

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

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

Суммировать

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

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

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

Если вам понравилась эта статья, поделитесь ею в Твиттере!

Начальный адрес Snipcart blog Адрес этой статьи (английский) newsletter

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

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории