Abr@X@bra.ru
Генераторы статических сайтов на 2019 год
Генераторы статических сайтов на 2019 год

Генераторы статических сайтов на 2019 год

19.01.2019
40
Генераторы статических сайтов сосредоточены на одной главной задаче: создать полный статический сайт на основе HTML. Этот результат не зависит от баз данных или других внешних источников данных и, следовательно, исключает какую-либо обработку на стороне сервера при доступе к веб-сайту.

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

Next.js



Next.js - это очень популярный генератор статических сайтов, основанный на React и JavaScript и предоставленный компанией ZEIT, которая стремится максимально упростить облачные вычисления.

Предоставляет такие функции, как:
  • Автоматическое разделение кода для более быстрой загрузки страниц
  • Простая клиентская маршрутизация (на основе страницы)
  • Среда разработки на основе Webpack
  • Возможность реализации с Express или любым другим HTTP-сервером Node.js
  • Настраивается с вашими собственными конфигурациями Babel и Webpack
Взгляните на https://nextjs.org/, чтобы узнать больше.

Плюсы
  • Основано на React и JavaScript
  • Легко интегрируется с ZEIT, теперь и хостинг
  • Next.js имеет хорошую поддержку.
Минусы
  • Требует некоторого базового понимания React
  • Нет встроенной системы плагинов

Nuxt.js



Nuxt.js - это не только генератор статических сайтов, основанный на Vue.js, это еще возможность реализовать несколько вариантов сборки:

  • Создание рендеринга Vue.js SPA на стороне сервера (одностраничные приложения)
  • Построить стандартные SPA
  • Создание статических веб-страниц из кода Vue.js
  • Платформа Nuxt.js включает следующее:
  • Vue 2
  • Vue Router
  • Vuex
  • Vue Server Renderer
Под капотом мы используем Webpack с vue-loader и babel-loader для объединения, разделения и минимизации вашего кода.

Если вы уже знакомы с Vue.js и хотите погрузиться в рендеринг на стороне сервера и создание статических страниц из приложения Vue.js, то среда Nuxt.js, безусловно, ваш выбор.

Веб-сайт Nuxt.js доступен по адресу https://nuxtjs.org/

Плюсы
  • Основано на Vue.js
  • Легко учиться и понимать
  • Предлагает несколько вариантов сборки
  • Поставляется с интеграцией Vuex
  • Автоматически генерирует страницы и маршруты к ним
Минусы
  • Не ограничивается созданием статических сайтов
  • Требует понимания Vue.js

Gatsby


Gatsby основан на React и GraphQL, поэтому, если у вас уже есть базовое понимание этих технологий, Gatsby может быть правильным выбором для вас. Может быть, вы спросите: зачем нужен статический генератор сайтов на GraphQL? Ответ здесь прост: Gatsby использует GraphQL для обеспечения доступности данных, которые извлекаются из разных источников в ваш проект. Например, вы можете использовать такие источники, как файловая система, WordPress или Contentful. Затем ко всем данным, которые доступны из этих источников, можно получить доступ, используя GraphQL, что делает ваш доступ к данным простым и последовательным.

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

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

Веб-сайт проекта можно найти по адресу https://www.gatsbyjs.org/

Плюсы
  • Данные извлекаются в Gatsby с помощью GraphQL
  • Доступна система плагинов
  • Создает очень быстрые статические HTML-страницы PWA-готов по умолчанию
Минусы
  • Вам нужно иметь полное представление о JS, React и GraphQL, чтобы начать работать с Gatsby.

Jekyll


Jekyll - это генератор статических сайтов, который построен на основе Ruby. Jekyll также является движком GitHub Pages. GitHub Pages - это общедоступные веб-страницы для пользователей и репозиториев, которые свободно размещаются в домене GitHub github.io или на произвольном доменном имени по вашему выбору. Тот факт, что Jekyll поддерживает GitHub Pages, также является причиной того, что Jekyll является самым популярным генератором статических сайтов в настоящее время.

Веб-сайт Jekyll можно найти по адресу https://jekyllrb.com/

Плюсы
  • Jekyll очень хорошо работает с GitHub Pages, что делает размещение вашего сайта Jekyll чрезвычайно простым.
  • Jekyll легок в освоении и в целом обладает простотой в основных концепциях.
  • У Jekyll огромное сообщество, поэтому легко найти помощь по любой теме, связанной с Jekyll.
  • Если вы хотите расширить стандартную функциональность Jekyll, вы можете использовать длинный список доступных плагинов.
Минусы
  • Jekyll основан на Ruby. Это означает, что вы должны настроить свою среду разработки Ruby, чтобы сначала использовать Jekyll.
  • Поскольку в 2019 году Ruby не входит в число самых популярных языков программирования для веб-разработки, вы можете найти Jekyll несколько устаревшим.

Hugo


Hugo - это генератор статических сайтов, который также очень популярен, имеет более чем 30 000 звезд на GitHub. Hugo основан на языке программирования Go. Разработчики Hugo утверждают, что это самая быстрая среда для создания сайтов. 

У Hugo включает в себя более 100 тем, которые можно использовать для создания собственного веб-сайта.

Веб-сайт проекта можно найти по адресу https://gohugo.io/

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

Заключение

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

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




static site
Читайте также:
9 хитростей для разработчиков JavaScript в 2019 году

9 хитростей для разработчиков JavaScript в 2019 году

Еще один год закончился, и JavaScript постоянно меняется. Тем не менее, есть несколько советов, которые помогут вам напи...
Читать
5-минутный путеводитель для не-дизайнера

5-минутный путеводитель для не-дизайнера

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

Chrome, функции о которых вы не знали.

Мы часто воспринимаем адресную строку браузера исключительно как место, куда мы вводим URL страницы, на которую мы хотим...
Читать