Найти тему
ИТ разнообразно

Как добавить Bootstrap 5 в Jekyll. Часть 1.

Оглавление

Для многих из нас Jekyll и Bootstrap всё ещё работают.

Эта статья расскажет вам о моём методе использования Bootstrap 5 на веб-сайте Jekyll (Bootstrap 5.0.1 на момент написания статьи).

Мой метод прост:

  • Работает с чистой установкой Jekyll
  • Не требуются гемы или плагины
  • Менее 15 строк кода

Jekyll & Bootstrap

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

Однако Jekyll и Bootstrap не совсем непопулярны.

Просто взгляните на Jekyll, который занимает 4-е место среди 9 лучших генераторов статических сайтов (по рейтингу Github).

9 лучших генераторов статических сайтов – https://jamstack.org/generators/
9 лучших генераторов статических сайтов – https://jamstack.org/generators/

И Bootstrap по-прежнему остается самой популярной средой разработки интерфейса, что впечатляет, учитывая, что она была запущена в 2011 году.

Bootstrap против Tailwind — Google Trends
Bootstrap против Tailwind — Google Trends

Начинаем с пустого проекта Jekyll

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

Если вы новичок в Jekyll, я рекомендую вам ознакомиться с документацией -> https://jekyllrb.com/docs/.

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

$ jekyll new jekyll_bootstrap_project --blank

Это создаст новый пустой шаблон сайта Jekyll по указанному пути. Пустой в этом контексте означает, что мы создаем веб-сайт Jekyll без темы.

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

Настраиваем Jekyll Sass

Самый простой способ добавить Bootstrap в наш проект — использовать встроенную поддержку Jekyll Sass или Syntactically Awesome Style Sheets.

Сначала нам нужно сообщить Jekyll, где искать наши файлы Sass.

Мы можем сделать это, добавив следующий код в наш файл config.yml:

sass:
sass_dir: _sass

Другой (лучший) способ сделать это:

sass:
load_paths:
- _sass

Это позволит нам использовать другие папки в будущем, если они понадобятся в проекте. Я считаю, что этот метод более полезен, чем sass_dir.

Продолжение следует...

Перевод с некоторыми авторскими заголовками. Автор оригинала: Colin Gallagher.