Производительность, безусловно, является одним из преимуществ Jamstack, наряду с лучшей безопасностью, масштабируемостью и удобством для разработчиков. Сайты, построенные на этом типе архитектуры, используют предварительно отрисованные статические страницы, обслуживаемые через сети CDN, могут получать данные из нескольких источников и заменять традиционные серверы и их базы данных API-интерфейсами микросервисов.
Что делает возможным быстрое и относительно безболезненное создание статических сайтов, так это генераторы статических сайтов (SSG).
Существует множество генераторов статических сайтов на различных языках программирования, таких как JavaScript, Ruby, Go и других. Вы найдёте исчерпывающий, неотфильтрованный список на staticsitegenerators.net, но если вам нужно что-то более управляемое, посмотрите список веб-сайта Jamstack, где вы можете фильтровать генераторы статических сайтов по имени или количеству звёздочек GitHub.
В этой статье я собираюсь перечислить семь популярных генераторов статических сайтов и их основные функции, чтобы вы могли лучше понять, какой из них подойдёт для вашего проекта.
Что такое генераторы статических сайтов?
Обычная CMS (система управления контентом) — например, WordPress — динамически строит веб-страницу по запросу клиента: собирает все данные из базы данных и обрабатывает контент с помощью механизма шаблонов. Напротив, хотя генераторы статических сайтов также обрабатывают страницы с помощью механизма шаблонов, они обрабатывают процесс сборки до того, как страницы будут запрошены клиентом, что означает, что они готовы к работе по запросу. Всё, что размещено в сети, — это статические ресурсы, что делает сайты намного более лёгкими и более быстрыми в обслуживании.
Чтобы узнать больше о различиях между традиционной CMS и генератором статических сайтов, а также о преимуществах использования SSG.
Но как насчёт всех хороших вещей, которые приходят с CMS, таких как создание и обновление контента не разработчиками, совместная работа над контентом и т.д.? Войдите в безголовую CMS.
Безголовая CMS — это та, у которой есть только бэкэнд. Нет внешнего интерфейса для отображения содержимого. Его единственная задача — управлять контентом, но он также предоставляет API, который другой интерфейс может использовать для извлечения введённых в него данных.
Таким образом, редакционная группа, например, может продолжить работу из своего знакомого, удобного интерфейса администратора, а контент, который они создают или обновляют, является лишь одним из источников данных, к которому генераторы статических сайтов могут получить доступ через открытый API. Популярные безголовые CMS-системы включают Strapi, Sanity и Contentful. Кроме того, WordPress имеет REST API, который позволяет разработчикам использовать его как автономную CMS.
Итак, современный инструментарий Jamstack позволяет создавать веб-сайт со статическим обслуживанием и при этом пользоваться преимуществами системы управления контентом.
Теперь давайте рассмотрим некоторые параметры генератора статических сайтов.
1. Gatsby
Gatsby — это полноценный фреймворк для создания статических веб-сайтов и приложений. Он построен на React и использует GraphQL для управления данными. Если вам интересно и вы хотите вникнуть глубже, ознакомьтесь с разделом » Начало работы с Gatsby: создайте свой первый статический сайт » на SitePoint и документацией на веб-сайте Gatsby.
Вот некоторые из сильных сторон Гэтсби:
- С Gatsby вы можете работать с новейшими веб-технологиями — с React, webpack, современным JS, CSS и т.д. — всё готово для того, чтобы вы могли просто начать кодировать свой сайт.
- Богатая экосистема плагинов Gatsby позволяет вам использовать любые данные, которые вы предпочитаете, из одного или нескольких источников.
- Простое развёртывание и масштабируемость, что в основном связано с тем, что Gatsby создаёт статические страницы, не требующие сложной настройки.
- Gatsby — это генератор прогрессивных веб-приложений (PWA): Вы получаете готовый код и разделение данных. Гэтсби загружает только критически важные HTML, CSS, данные и JavaScript, поэтому ваш сайт загружается как можно быстрее. После загрузки Gatsby предварительно выбирает ресурсы для других страниц, поэтому переход по сайту выполняется невероятно быстро. — Сайт Гэтсби
- gatsby-image сочетает в себе собственные возможности Gatsby по обработке изображений с передовыми методами загрузки изображений, чтобы легко и полностью оптимизировать загрузку изображений для ваших сайтов.
- Вы можете бесплатно скачать и настроить множество начальных сайтов.
2. Next.js
Далее следует универсальная платформа для создания визуализируемых сервером или статически экспортируемых приложений JavaScript. Он построен на основе React и создан Vercel.
Чтобы создать приложение Next, выполните в терминале следующую команду:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cdв nextjs-blogваш вновь созданный каталог и введите команду, чтобы открыть сервер разработки приложения Next JS на порту 3000:
npm run dev
Чтобы убедиться, что всё работает должным образом, откройте в браузере http: // localhost: 3000.
Next.js содержит отличную документацию, в которой вы можете узнать больше о создании и настройке приложений на основе Next.
Вот несколько лучших функций Next:
- Next по умолчанию выполняет рендеринг на сервере, что отлично сказывается на производительности. Для обсуждения плюсов и минусов рендеринга на стороне сервера ознакомьтесь с этой статьёй Алекса Григоряна на Medium.
- Не требует настройки: автоматическое разделение кода, маршрутизация и горячая перезагрузка прямо из коробки.
- Оптимизация изображений, интернационализация и аналитика.
- Большие Docs, учебники, викторины и примеры, чтобы вы и работает от начинающего до продвинутого пользователя.
- Встроенная поддержка CSS.
- Тонны примеров приложений, с которых можно начать.
3. Hugo
Hugo — очень популярный генератор статических сайтов с более чем 49 тысячами звёзд на GitHub прямо сейчас. Он написан на Go и позиционирует себя как самый быстрый фреймворк для создания веб-сайтов. Фактически, Hugo имеет быстрый процесс сборки, который упрощает создание статических веб-сайтов и отлично подходит для блогов с большим количеством сообщений.
Документация великолепна, а на веб-сайте платформы вы найдёте фантастическое руководство по быстрому запуску, которое поможет вам быстро приступить к работе с программным обеспечением.
Вот некоторые из самых любимых функций Хьюго:
- Разработан и оптимизирован для скорости: как правило, каждый фрагмент контента отображается примерно за одну миллисекунду.
- Не нужно устанавливать дополнительные плагины для таких вещей, как разбивка на страницы, перенаправление, несколько типов контента и многое другое.
- Богатая система тематики.
- Шорткоды доступны в качестве альтернативы использованию Markdown.
- С декабря 2020 года Hugo предлагает поддержку Dart Sass и новый фильтр для наложения изображения поверх другого — Hugo 0.80: последний выпуск 2020 года!
4. Nuxt.js
Nuxt.js — это фреймворк более высокого уровня, построенный на Vue.js, который позволяет создавать готовые к работе веб-приложения. С Nuxt вы можете:
- Рендеринг на стороне сервера для вашего сайта, также называемый универсальным или изоморфным режимом. Nuxt использует сервер Node для доставки HTML на основе компонентов Vue.
- Генерация статического сайта. С Nuxt вы можете создавать статические веб-сайты на основе вашего приложения Vue.
- Одностраничные приложения (SPA). Nuxt предоставляет вам конфигурацию и платформу для создания вашего SPA на основе Vue.
Создание веб-сайтов на основе Nuxt можно сделать очень быстро. Вот пример Hello World на веб-сайте Nuxt. Вы можете загрузить его на свой компьютер или поиграть в Codesandbox, чтобы начать работу.
Вот некоторые из возможностей Nuxt.js:
- Отличная производительность: приложения на основе Nuxt оптимизированы «из коробки».
- Модульный: Nuxt построен с использованием мощной модульной структуры. Вы можете выбрать один из более чем 50 модулей, чтобы ускорить процесс разработки.
- Относительно лёгкая кривая обучения. Nuxt основан на Vue, фреймворке, позволяющем быстро и безболезненно начать работу.
- Интегрированное управление состоянием с Vuex.
- Автоматическое разделение кода.
- Передовая транспиляция кода JavaScript.
- Объединение и минимизация JS и CSS.
- Управляющий <head>элемент ( <title>, <meta>и т.д.).
- Препроцессор: Sass, Less, Stylus и др.
5. Jekyll
Простота и неглубокая кривая обучения Jekyll сделали его популярным выбором с 42k + звёздами на GitHub на момент написания. Он существует с 2008 года, так что это зрелая и хорошо поддерживаемая программа.
Джекил построен на Ruby. Вы пишете свой контент в Markdown, а движком шаблонов является Liquid. Он идеально подходит для блогов и других сайтов с большим количеством текста. Jekyll также является движком, который запускает страницы GitHub, что означает, что вы можете разместить свой сайт Jekyll на страницах GitHub бесплатно, «настраивая имя домена и всё такое».
Jekyll может предложить следующие замечательные функции:
- простота;
- бесплатный хостинг на GitHub Pages;
- отличное сообщество, которое заботится об обслуживании и создании тем, плагинов, руководств и других ресурсов.
6. Eleventy
Eleventy, которую часто считают альтернативой Jekyll на JavaScript, представляет себя как «более простой генератор статических сайтов». Он построен на собственном JavaScript, без фреймворков (хотя вы можете использовать свой любимый, если захотите), имеет подход к настройке с нулевой конфигурацией по умолчанию и позволяет вам использовать движок шаблонов, который вы предпочитаете.
Чтобы быстро приступить к работе с Eleventy, ознакомьтесь с » Приступая к работе с Eleventy » Крейга Баклера, » Учебник для 11ty » Раймонда Камдена: » Увеличьте свой блог Jamstack до 11 ″ и » Руководство для начинающих по Eleventy » Татьяны Мак или перейдите к страницы документации для начинающих на сайте Eleventy.
Некоторые приятные функции включают:
- простота и производительность;
- управляемый сообществом;
- гибкая система шаблонов;
- быстрое время сборки.
7. VuePress
VuePress — это генератор статических сайтов на базе Vue. Его тема по умолчанию оптимизирована для написания технической документации, поэтому она отлично подходит для этого типа сайтов прямо из коробки. Его текущая стабильная версия на момент написания — 1.8.0, но если вам интересно узнать о критических изменениях, которые находятся в разработке, ознакомьтесь с альфа-версией 2 на GitHub.
Сайт VuePress работает как SPA, который использует возможности Vue, Vue Router и webpack.
Чтобы начать работу с VuePress, вам понадобится Node.js v.10 + и, возможно, Yarn Classic.
Для быстрой настройки VuePress используйте генератор create-vuepress-site, открыв свой терминал в выбранном вами каталоге и выполнив любую из следующих команд, в зависимости от того, используете ли вы Npm или Yarn:
Npm:
npx create-vuepress-site [optionalDirectoryName]
Пряжа:
yarn create vuepress-site [optionalDirectoryName]
После того, как вы ответите на несколько вопросов о конфигурации, вы должны увидеть новую файловую структуру веб-сайта в выбранной папке.
Для получения более подробной информации перейдите к руководству по VuePress.
Вот несколько замечательных функций, которые может предложить VuePress:
- Настройка сайта на основе VuePress выполняется быстро, и вы можете писать свой контент с помощью Markdown.
- VuePress построен на Vue, что означает, что вы можете наслаждаться веб-интерфейсом Vue, webpack, возможностью использования компонентов Vue внутри файлов Markdown и разработки пользовательских тем с помощью Vue.
- Быстрая загрузка: статические сайты VuePress состоят из предварительно обработанного статического HTML и запускаются как SPA после загрузки в браузере.
- По умолчанию i18n поддерживает многоязычность.
Nuxt.js или VuePress?
И Nuxt.js, и VuePress построены на основе Vue.js и позволяют создавать статические веб-сайты. Итак, какой из них предпочтительнее другого?
Допустим, Nuxt.js может делать всё, что делает VuePress. Однако, по сути, Nuxt лучше всего подходит для создания приложений. VuePress, с другой стороны, идеально подходит для создания статических веб-сайтов с документацией, отображающих контент, написанный на Markdown.
Короче говоря, если всё, что вам нужно, это сайт документации или очень простой блог на Vue.js, подумайте о том, чтобы обратиться к VuePress, поскольку Nuxt будет излишним.
Как выбрать генератор статических сайтов
Со всеми доступными опциями легко почувствовать себя парализованным, когда дело доходит до выбора генератора статических сайтов, который отвечает всем требованиям. Есть некоторые соображения, которые могут помочь вам проанализировать то, что предлагается.
Требования вашего проекта должны пролить свет на функции, которые вам следует искать в SSG.
Если вашему проекту требуется множество динамических возможностей из коробки, то Хьюго и Гэтсби могут быть хорошим выбором. Что касается времени сборки и развёртывания, все перечисленные выше SSG работают очень хорошо, хотя Hugo кажется фаворитом, особенно если на вашем веб-сайте много контента.
Ваш проект — блог или персональный сайт? В этом случае Jekyll и Eleventy могут быть отличным выбором, тогда как для простого веб-сайта документации VuePress отлично подойдёт. Если вы планируете создать веб-сайт электронной коммерции, вы можете подумать, какой SSG хорошо сочетается с автономной CMS для управления магазином. В этом случае Gatsby и Nuxt вполне могли бы работать.
Ещё одна вещь, которую вы, возможно, захотите принять во внимание, — это ваше знакомство с каждым из языков SSG. Если вы программируете на Go, то, скорее всего, вы предпочтёте Hugo. С другой стороны, если JavaScript — ваш любимый язык программирования, вы избалованы выбором: Eleventy построен на чистом JS, Next и Gatsby построены на основе React, а Nuxt и VuePress созданы на Vue.
Что касается таких вещей, как отличная документация, сильное сообщество и поддержка, все перечисленные мной генераторы статических сайтов являются одними из самых популярных.
