Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Wordpress шаблоны
Главная » Web разработка » Обновление Bootstrap 5 и генератор статических сайтов Hugo

Что нового в Bootstrap 5? Генератор статических сайтов Hugo

Bootstrap5 и HugoЕсли вы занимаетесь веб-разработкой, то вероятность того, что вы не слышали о Bootstrap, стремится к нулю. Это один из самых популярных в мире CSS-фреймворков для разработки онлайн проектов. Его можно встретить во многих шаблонах сайтов (в подборках, что я делал) + по информации создателей, он используется на более чем 18(!)млн. веб-ресурсов по всему миру. На данный момент актуальной является 4-тая версия, но есть все предпосылки увидеть 5тый альфа-релиз в конце весны или позже в этом году.

Универсальный фреймворк Bootstrap значительно упрощает задачу верстки и создания макетов веб-страниц. Он активно применяется как в красивых профессиональных Bootstrap-шаблонах, так и в темах для CMS-систем (той же Вордпресс и др.) и обычных простых HTML шаблонах. В нем имеется вся необходимая функциональность для запуска своего первого веб-проекта:

  • Одна из основных полезных фишек – сетка, позволяющая легко и быстро управлять размещением элементов на странице + поддерживающая адаптивность.
  • Фреймворк включает все необходимые CSS-классы для оформления контента.
  • Он содержит типовые функции для веб-сайтов: кнопки, карусели, карточки, навигацию, формы, списки, хлебные крошки, раскрывающиеся блоки, модальные окна и др.

Bootstrap 4

Первая версия Bootstrap 4 появилась в августе 2015, где были добавлены такие улучшения как CSS Grid и Flexbox, продвинутая навигация, карточки и многое другое. Разработчикам понадобилось 2 года чтобы довести этот продукт до финального стабильного релиза. Относительно Bootstrap 5 никаких официальных конкретных дат пока нет, но многие источники называют именно текущий год (лето-осень).

Что нового в Bootstrap 5?

Рассмотрим основные изменения, которые известны на данный момент.

Удаление jQuery и изменения в Javascript/CSS

jQueryНекогда популярная jQuery-библиотека постепенно теряет свои позиции, а разработчики переходят на Angular, React, Vue и др. Кроме того, сейчас многие функции из нее реально заменить на обычный JavaScript с использованием селекторов.

jQuery достаточно долго было неотъемлемой частью проекта, но сейчас пришло время с ним распрощаться. Отказ от библиотеки позволит снизить размер Bootstrap. Учитывая эту ситуацию, ожидаются весьма серьезные изменения в основном Javascript-файле (но переживать не стоит, по нему будет детальная документация). CSS-стили поменяются незначительно.

SVG-иконки и поддержка IE 10

По второму пункту все логично – на эту версию браузера приходится менее 1% трафика и сама Microsoft прекратила ее поддержку.

Раньше для веб-проектов приходилось использовать сторонние наборы иконок по типу Font Awesome или кастомные SVG-файлы, но в Bootstrap 5 появится своя встроенная библиотека. Более того, она уже доступна с декабря.

Сетка страницы, переход с Jekyll на Hugo

Традиционная и привычная многим сетка с 12-тью колонками останется и в новом релизе Bootstrap (как и поддержка Grid). Пока что это оптимальное решение для реализации адаптивности на разных размерах экранов. В 5-той версии авторы фреймворка делают акцент на производительности и более быстрой загрузке.

Вместо популярного ранее генератора статических сайтов Jekyll было принято решение переключиться на Hugo. В данный момент он считается наиболее производительным и востребованным решением. Это также как в 4-ой версии разработчики переключились с Less на Sass.

Hugo – самый быстрый фреймворк для создания сайтов

Если честно, я не особо сталкивался с подобными решениями в своей практике, почти все вебсайты были выполнены на CMS: WordPress, TYPO3, Joomla и др. Ну, или могу вспомнить простые CMS без базы данных на файлах, но здесь используется совсем другой подход – как по установке движка, так и добавлению контента.

Фреймворк Hugo

Hugo — это проект open-source, который обладает удивительной скоростью работы и гибкостью. Основные его фишки/преимущества:

  • Ошеломляющая скорость. При затратах менее 1мс./страница средний статический сайт будет сгенерирован менее чем за секунду.
  • Гибкое управление контентом. Здесь поддерживаются всевозможные типы наполнения, таксономии, менюшки, динамический контент из API и др. (и все это без плагинов).
  • Шорткоды. В принципе, сама по себе Markdown разметка достаточно неплохая, но шорткоды Hugo позволяют получить более гибкий и красивый результат.
  • Встроенные шаблоны. Во фреймворке есть определенные заготовки/шаблоны для решения базовых задач: SEO, комментирование, аналитика и др. функции. Лишь одна строка кода – и все готово.
  • Мультиязычность. Поддержка i18n локализации такая же простая как и в обычных сайтах с одним языком.
  • Пользовательский кастомный вывод. Если вам мало обычного HTML, то Hugo разрешает выводить контент в разных форматах, в том числе JSON / AMP и даже собственном.

Документацию по использованию Hugo ищите на официальном сайте в разделе “Docs”. Там есть инфа про его установку, конфигурацию, формирование макета и контента и т.п.

Генератор статических сайтов Hugo

В меню справа расположена навигация по функциям фреймворка, управлению контентом, модулям и другим инструментам. Также для ознакомления с движком можете глянуть раздел “Showcase”, в котором собраны реальные веб-проекты, реализованные с его помощью. Сайты там простые и в основном технической направленности, например, ресурс, посвященный сертификату Let’s Encrypt.

В целом Hugo подходит практически под любые типы веб-проектов – загляните в раздел “Themes” чтобы в этом убедиться. Там будут разные шаблоны: минималитичные, адаптивные, портфолио, темные/светлые, современные, блоггерские, для корпоративных сайтов и просто одностраничные лендинги.

А вы работали подобными генераторами статических вебсайтов? По личным ощущениям это, конечно, не CMS, но для создания простенького проекта на несколько страниц с нечасто изменяемым контентом — вполне нормально. Еще и с максимально быстрой загрузкой. Чего ожидаете от нового Bootstrap 5?

09.03.20

Категории: Web разработка.

Теги: , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.