Разработка сайтов в Юнокоммунаровске, ДНР. Генераторы статических сайтов: руководство для начинающих

Jamstack (JavaScript, API и разметка) все чаще становится предпочтительным стеком разработки в Интернете. Название на веб- сайте Jamstack предполагает, что Jamstack — это «современный способ создания веб-сайтов и приложений» и что он «обеспечивает более высокую производительность».

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

Что делает возможным создание статических сайтов быстро и относительно безболезненно, так это генераторы статических сайтов (SSG).

Существует множество генераторов статических сайтов на различных языках программирования, таких как JavaScript, Ruby, Go и других. Вы найдете исчерпывающий нефильтрованный список на staticsitegenerators.net, но если вам нужно что-то более управляемое, ознакомьтесь со списком на веб- сайте Jamstack, где вы можете отфильтровать генераторы статических сайтов по имени или по количеству звезд GitHub.

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

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

Обычная CMS (система управления контентом), такая как WordPress, например, динамически создает веб-страницу по запросу клиента: она собирает все данные из базы данных и обрабатывает контент с помощью механизма шаблонов. Напротив, хотя генераторы статических сайтов также обрабатывают страницы с помощью механизма шаблонов, они обрабатывают процесс сборки до того, как страницы будут запрошены клиентом, что означает, что они готовы к обслуживанию по запросу. Все, что размещено в Интернете, — это статические ресурсы, что делает сайты более легкими и быстрыми в обслуживании.

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

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

Безголовая CMS — это та, у которой есть только серверная часть. Там нет внешнего интерфейса для отображения контента. Его единственная задача — управлять контентом, но он также предоставляет API, который другой внешний интерфейс может использовать для извлечения введенных в него данных.

Таким образом, редакционная группа, например, может продолжать работу в своем знакомом удобном интерфейсе администратора, а контент, который они создают или обновляют, является лишь одним из источников данных среди других, к которым генераторы статических сайтов могут получить доступ через открытый API. К популярным безголовым CMS относятся Strapi, Sanity и Contentful. Кроме того, у WordPress есть REST API, который позволяет разработчикам использовать его как безголовую CMS.

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

Теперь давайте рассмотрим некоторые параметры генератора статических сайтов.

1. Гэтсби

Гэтсби

Gatsby — полноценный фреймворк для создания статических веб-сайтов и приложений. Он встроен в React и использует GraphQL для управления данными. Если вам интересно и вы хотите углубиться, ознакомьтесь с разделом «Начало работы с Gatsby: создайте свой первый статический сайт «на SitePoint и документацией на веб-сайте Gatsby.

Вот некоторые из сильных сторон Гэтсби:

С Gatsby вы можете работать с новейшими веб-технологиями — с React, webpack, современным JS, CSS и т. д., готовыми для того, чтобы вы просто начали кодировать свой сайт.

Богатая экосистема плагинов Gatsby позволяет вам использовать любые данные, которые вы предпочитаете, из одного или нескольких источников.

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

Gatsby is a progressive web apps (PWA) generator:

Вы получаете готовое разделение кода и данных. Gatsby загружает только важные HTML, CSS, данные и JavaScript, поэтому ваш сайт загружается максимально быстро. После загрузки Gatsby предварительно извлекает ресурсы для других страниц, так что щелчок по сайту кажется невероятно быстрым. — сайт Гэтсби

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

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

2. Некст.js

Next.js

Next — это универсальный фреймворк для создания серверных или статически экспортируемых приложений JavaScript. Он построен на основе React и создан Vercel.

Чтобы создать приложение Next, выполните в терминале следующую команду:

npx create-next-appnextjs-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.

Настройка не требуется: автоматическое разделение кода, маршрутизация и горячая перезагрузка из коробки.

Оптимизация изображений, интернационализация и аналитика.

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

Встроенная поддержка CSS.

Множество примеров приложений для начала.

3. Хьюго

Hugo — генераторы статических сайтов

Hugo — очень популярный генератор статических сайтов с более чем 49 тысячами звезд на GitHub прямо сейчас. Он написан на Go и позиционирует себя как самый быстрый фреймворк для создания веб-сайтов. Фактически, Hugo предлагает быстрый процесс сборки, который упрощает создание статических веб-сайтов и отлично подходит для блогов с большим количеством сообщений.

Документы великолепны, а на веб-сайте платформы вы найдете фантастическое краткое руководство, которое поможет вам быстро начать работу с программным обеспечением.

Вот некоторые из самых любимых функций Хьюго:

Разработан и оптимизирован для скорости: как правило, каждый фрагмент контента отображается примерно за одну миллисекунду.

Нет необходимости устанавливать дополнительные плагины для таких вещей, как нумерация страниц, перенаправление, несколько типов контента и многое другое.

Богатая система тем.

Шорткоды доступны в качестве альтернативы использованию Markdown.

С декабря 2020 года Hugo предлагает поддержку Dart Sass и новый фильтр для наложения изображения поверх другого — Hugo 0.80: последний выпуск 2020 года!

4. Nuxt.js

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.

Управляющий

элемент (

Препроцессор: Sass, Less, Stylus и др.

5. Джекил

Джекил

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

Jekyll построен на Ruby. Вы пишете свой контент в Markdown, а механизм шаблонов — Liquid. Он идеально подходит для блогов и других текстовых веб-сайтов. Jekyll также является движком, который поддерживает GitHub Pages, а это означает, что вы можете бесплатно разместить свой сайт Jekyll на GitHub Pages, «собственное доменное имя и все такое».

Замечательные функции, которые может предложить Jekyll, включают в себя:

простота

бесплатный хостинг на GitHub Pages

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

6. Одиннадцать

Одиннадцатый JS

Eleventy, часто рассматриваемый как JavaScript-альтернатива Jekyll, представляет себя как «более простой генератор статических сайтов». Eleventy построен на собственном JavaScript, без фреймворков (хотя вы можете использовать свой любимый, если хотите), имеет подход к настройке по умолчанию с нулевой конфигурацией и позволяет вам использовать механизм шаблонов, который вы предпочитаете.

Чтобы быстро приступить к работе с Eleventy, ознакомьтесь с «Начало работы с Eleventy «Крейга Баклера, «Учебное пособие по 11ty» Рэймонда Камдена: доведение вашего блога Jamstack до 11 и «Руководство по Eleventy для начинающих «Татьяны Мак или посетите страницы документации по началу работы на веб-сайте Eleventy.

Некоторые приятные особенности включают в себя:

простота и производительность

сообщество

гибкая система шаблонов

быстрое время сборки

7. ВьюПресс

VuePress

VuePress — генератор статических сайтов на базе Vue. Его тема по умолчанию оптимизирована для написания технических документов, поэтому она отлично работает для этого типа сайта прямо из коробки. Его текущая стабильная версия на момент написания статьи — 1.8.0, но если вам интересны критические изменения, которые находятся в разработке, ознакомьтесь с альфа-версией 2 на GitHub.

Сайт VuePress работает как SPA, в котором используются возможности Vue, Vue Router и веб-пакета.

Чтобы начать работу с 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, веб-пакетом, возможностью использования компонентов 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.

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