Допустим, ваш следующий проект будет простым HTML-сайтом для резюме, маркетинга продукта или услуги, документирования вашего программного обеспечения или чего-то подобного. Отличным вариантом для вас является создание вашего сайта с использованием статических генераторов сайтов (SSG).
Существует множество генераторов статических сайтов на разных языках программирования, таких как JavaScript, Ruby, Go — список можно продолжить.
В этой статье я собираюсь перечислить пять популярных статических генераторов сайтов и их основные функции, чтобы вы могли составить более четкое представление о том, какой из них подойдет для вашего проекта.
Я не утверждаю, что я предоставил исчерпывающий список SSG или что я лично отдаю предпочтение любому программному обеспечению, которое я включаю в свой список, по сравнению с любым другим, доступным там. Тем не менее, все продукты в списке популярны, производительны, хорошо документированы и хорошо поддерживаются.
Что такое генераторы статических сайтов?
Обычная CMS (система управления контентом), как, например, WordPress, динамически создает веб-страницу по требованию клиента: она собирает все данные из базы данных и обрабатывает контент через механизм шаблонов.
С другой стороны, генератор статического сайта:
использует другой подход и генерирует все страницы сайта один раз, когда на самом деле происходят изменения на сайте. Это означает, что на развернутом веб-сайте нет движущихся частей. Кэширование становится намного проще, производительность повышается, а статические сайты становятся намного безопаснее. — StaticGen .
Если вам любопытно и вы хотели бы узнать больше, эта замечательная статья Брайана Ринальди рассматривает внутреннюю работу генераторов статических сайтов.
Теперь давайте рассмотрим некоторые варианты.
1. Хьюго
Hugo — очень популярный генератор статических сайтов с более чем 32 000 звезд на GitHub прямо сейчас. Он написан на Go и рекламирует себя как самый быстрый фреймворк для создания веб-сайтов. На самом деле, Hugo идет с быстрым процессом сборки, который делает создание статических веб-сайтов быстрым и отлично работает для блогов с большим количеством постов.
Документы отличные, и на веб-сайте Hugo есть фантастическое руководство по быстрому запуску, которое поможет вам быстро освоиться с программным обеспечением.
Вот некоторые из лучших особенностей Хьюго :
- Разработано и оптимизировано для скорости: как правило, каждый фрагмент контента отображается примерно за 1 миллисекунду
- Не нужно устанавливать дополнительные плагины для таких вещей, как нумерация страниц, перенаправление, несколько типов контента и многое другое
- Богатая тематическая система
- Шорткоды доступны в качестве альтернативы использованию Markdown
- С июля 2018 года Hugo предлагает мощный трубопровод активов Hugo Pipes .
2. Next.js
Далее следует универсальная структура для создания приложений JavaScript, отображаемых на сервере или статически экспортируемых. Он построен на основе React и создан Zeit .
Чтобы установить Next, выполните следующую команду в своем терминале:
npm install --save next react react-dom Затем добавьте этот скрипт в ваш файл package.json :
{ "scripts": { "dev": "next", "build": "next build", "start": "next start" } }
Благодаря этому каждый файл .js становится маршрутом, который обрабатывается и обрабатывается автоматически.
Next.js имеет отличные документы, где вы можете узнать больше о создании и настройке приложений на основе Next.
Вот несколько вещей, которые Next хорошо умеет:
- Next рендерится на сервере по умолчанию, что очень хорошо для производительности. Чтобы обсудить преимущества и недостатки серверного рендеринга, ознакомьтесь с этой статьей Алекса Григоряна на Medium
- Нет необходимости в настройке: автоматическое разделение кода, маршрутизация и горячая перезагрузка из коробки
- Расширяемость: не стесняйтесь настраивать свои настройки, взяв под контроль Webpack и Babel, маршрутизацию и плагины
- Отличные документы , учебные пособия, тесты и примеры, которые помогут вам освоиться с новичком и опытным пользователем
- Доступны официальные и общественные плагины
- Тонны примеров приложений, чтобы вы начали.
3. Гэтсби
Gatsby отлично работает с документацией и блогами, он встроен в React и использует GraphQL для манипулирования данными. Если вы любопытны и хотите углубиться в подробности, ознакомьтесь с разделом « Как создать статический сайт с помощью Gatsby» и документами на веб-сайте Gatsby.
Вот некоторые из сильных сторон Гэтсби:
- С Gatsby вы получаете возможность работать с новейшими веб-технологиями. React, Webpack, современный JS, CSS и т. Д. — все это готово для того, чтобы вы только начали кодировать свой сайт
- Богатая плагинная экосистема Gatsby позволяет использовать любой тип данных, который вы предпочитаете, из одного или нескольких источников.
- Простое развертывание и масштабируемость, в основном благодаря тому, что Gatsby создает статические страницы, которые не требуют сложных настроек
- Gatsby — это генератор прогрессивных веб-приложений (PWA). «Вы получаете код и разделение данных из коробки. Gatsby загружает только критические HTML, CSS, данные и JavaScript, поэтому ваш сайт загружается максимально быстро. После загрузки Gatsby предварительно выбирает ресурсы для других страниц, поэтому щелчок по сайту кажется невероятно быстрым ». ( Веб-сайт Gatsby )
- Множество сайтов для начинающих доступны для вас, чтобы свободно скачать и настроить.
Посмотрите наш учебник, в котором показано, как создать свой первый статический сайт с помощью Gatsby .
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
- Автоматическое разделение кода
- ES6 / ES7 Транспиляция
- Пакетирование и минимизация JS & CSS
- Управление элементом
<head>(<title>,<meta>и т. Д.) - Предварительный процессор: Sass, Less, Stylus и т. Д.
5. VuePress
VuePress — генератор статического сайта на основе Vue. Его тема по умолчанию оптимизирована для написания технических документов, поэтому она отлично работает для этого типа сайта прямо из коробки.
Сайт VuePress работает как одностраничное приложение, которое использует возможности Vue, Vue Router и Webpack.
Чтобы установить VuePress глобально, просто запустите эту команду в своем терминале:
npm install -g vuepress
Затем, чтобы создать файл уценки, запустите:
echo '# Hello VuePress' > README.md
Чтобы начать писать, запустите:
vuepress dev
Чтобы создать свой сайт, запустите:
vuepress build
Вот несколько замечательных функций, которые VuePress может предложить:
- Настройка вашего сайта на основе VuePress выполняется быстро, и вы можете написать свой контент, используя Markdown
- VuePress построен на Vue, что означает, что вы можете наслаждаться веб-интерфейсом Vue, Webpack, возможностью использования компонентов Vue в файлах Markdown и разработки пользовательских тем с помощью Vue.
- Быстрая загрузка: статические сайты VuePress сделаны из предварительно отрендеренного статического HTML и запускаются как SPA после загрузки в браузер
- Поддержка мультиязычности по умолчанию с i18n. Настроить другие языки также довольно просто, добавив объект
localesобъектуthemeConfigвthemeConfigвашего проекта на основеconfig.js.
Nuxt.js или VuePress?
И Nuxt.js, и VuePress основаны на Vue.js и позволяют создавать статические веб-сайты. Итак, какой из них предпочтительнее другого?
Допустим, Nuxt.js может делать все, что делает VuePress. Однако, по сути, Nuxt лучше всего подходит для создания приложений. VuePress, с другой стороны, идеально подходит для создания сайтов статической документации, которые отображают контент, написанный на Markdown. Проводится обсуждение репозитория проекта GitHub с целью сделать VuePress подходящим для многофункциональных сайтов блогов . Чтобы узнать больше о том, как создать простой блог с помощью VuePress, перейдите к разделу Создание блога с помощью VuePress от Адама Кольера.
Короче говоря, если все, что вам нужно, это сайт документации или очень простой блог в Vue.js, рассмотрите возможность обращения к VuePress — Nuxt будет излишним.
Как выбрать генератор статического сайта
При наличии всех доступных опций легко почувствовать себя парализованным, когда дело доходит до выбора генератора статического сайта, отвечающего всем требованиям. Есть некоторые соображения, которые могут помочь вам разобраться в том, что предлагается.
Требования вашего проекта должны пролить свет на функции, которые вы должны искать в вашем SSG.
Если вашему проекту нужно много динамических возможностей, то Хьюго и Гэтсби могут быть хорошим выбором. Что касается времени сборки и развертывания, все вышеперечисленные SSG работают очень хорошо, хотя Hugo кажется фаворитом, особенно если на вашем сайте много контента.
Ваш проект — это блог или личный сайт? В этом случае Хьюго и Гэтсби могут быть отличным выбором, в то время как для простого сайта документации VuePress подойдет. Если вы планируете веб-сайт электронной коммерции, то вы можете подумать, какой SSG хорошо подходит для безголовой CMS для управления магазином. В этом случае Гэтсби и Нукст могли бы работать довольно хорошо.
Еще одна вещь, которую вы можете рассмотреть, это ваше знакомство с каждым из языков SSG. Если вы программируете на Go, то, скорее всего, Hugo — ваш предпочтительный выбор. Что касается остальных опций, они либо построены поверх React (Next и Gatsby) или Vue (Nuxt и VuePress).
Что касается таких вещей, как отличная документация, сильное сообщество и поддержка, все генераторы статических сайтов, которые я перечислил, входят в число самых популярных или быстро набирающих популярность, таких как VuePress.
Вы использовали статические генераторы сайтов для проекта? Который из? Как вам понравился опыт?