Существует несколько генераторов статических сайтов, которые могут помочь нам быстро создать и развернуть статические сайты в Интернете за считанные минуты. Middleman – один из таких статических генераторов сайтов, причем делающий свою работу с легкостью.
Middleman – это фреймворк, предназначенный для современной веб-разработки, который мы можем использовать для объединения статических сайтов по мере необходимости. Middleman, построенный в основном на Ruby, является популярным выбором для разработчиков по всему миру.
В этой статье мы узнаем, как создать наш первый статический сайт с помощью Middleman.
Установка и настройка
Первым шагом, очевидно, станет установка и настройка Middleman. Поскольку сама структура построена на Ruby, нам потребуется предварительно установленная среда исполнения Ruby и менеджер пакетов RubyGems.
На большинстве дистрибутивов Linux и компьютеров Mac среда исполнения Ruby включена по умолчанию. Однако для Windows нам может потребуется установить его отдельно. Для этого просто используйте RubyInstaller для Windows.
Как только у нас будет среда исполнения Ruby и менеджер пакетов RubyGems, мы можем установить Middleman следующим образом:
gem install middleman
Приведенная выше команда установит Middleman, все его зависимости, а также инструменты командной строки для Middleman CLI.
Вот и все, теперь мы готовы начать работу с Middleman и создать наш первый сайт!
Разработка сайта в Middleman
Первый шаг – создать отдельный каталог для нашего проекта. Команда, которую мы можем использовать:
middleman init my_md_site
Это создаст подкаталог my_md_site с каркасным проектом Middleman. По сути, каждый проект в Middleman снабжен стандартным каркасом веб-разработки, который имеет предопределенную иерархию файлов и папок. Пустой проект будет иметь подкаталог ./source, где мы будем строить наш веб-сайт. Он также будет иметь файл config.rb, который будет содержать настройки и опции для нашего сайта Middleman.
Мы можем использовать Gemfile Bundler для задания дополнительных зависимостей, а также изменить структуру JavaScript, изображений и других мультимедийных папок (в ./source) в нашем проекте в соответствии с нашими потребностями.
Теперь давайте попробуем запустить механизм разработки. По сути, Middleman строго отделяет процессы производства и разработки друг от друга. Это означает, что большая часть нашего времени, потраченного на создание сайта, попадет в цикл разработки.
Такая методология позволяет нам использовать такие инструменты, как фреймворки JavaScript, библиотеки, HTML, SCSS и т.д. во время цикла разработки, но не во время производства.
Чтобы запустить сервер, перейдем в каталог нашего проекта и запустим команду предварительного просмотра сервера:
cd my_md_site
bundle exec middleman
Локальный сервер начнет работать на localhost: 4567
Теперь мы можем продолжить работу в ./source. Сервер Middleman будет обновлять страницу, чтобы помочь нам предварительно просмотреть наши изменения.
Возможно, что изменения не будут отражаться в реальном времени. Нам может потребоваться добавить расширение livereload в наш файл config.rb, как показано ниже:
activate :livereload
Закончив процесс разработки, мы можем легко построить наш сайт, чтобы подготовить его к развертыванию:
bundle exec middleman build
Приведенная выше команда создаст статический файл для каждого файла, расположенного в исходной папке. После того, как это будет сделано, Middleman автоматически очистит каталог сборки. Для развертывания все файлы будут находиться в каталоге ./build нашего проекта. Мы можем выполнить развертывание в соответствии с нашими требованиями – либо с помощью команды развертывания Middleman, либо любым другим предпочтительным способом.
Шаблоны и блоги
Middleman поддерживает несколько шаблонных языков, которые мы можем использовать. По умолчанию он поставляется с поддержкой ERB, HAML, SCSS, а также CoffeeScript, хотя мы можем включить другие языки шаблонов с помощью RubyGems.
ERB стоит как язык шаблонов по умолчанию. Он очень похож на HTML, но также может поддерживать циклы, условные операторы, обратные вызовы и многое другое. Полный список всех вариантов шаблонов можно найти на этой странице.
Middleman имеет свое собственное расширение, которое может добавить поддержку блогов на наш статический сайт. В нашем файле gem нам нужно включить расширение следующим образом:
gem "middleman-blog", "~> 4.0"
Затем мы можем активировать вышеуказанное расширение в файле config.rb:
activate :blog do |blog| # customize blog end
Для существующих проектов нам потребуется повторно запустить команду initman для того, чтобы создать архивы примеров блогов, таких как индекс сообщений, индекс тегов, индекс на основе даты и т.д.
Чтобы добавить теги к статье, нам просто нужно указать ее в Front Matter указанной статьи. Например:
--- title: Sample Blog Post date: 2019/07/20 tags: blogging, example, samples --- This is my blog post content.
Теперь вышеупомянутая статья или сообщение будут автоматически перечислены в архивах тегов для «ведения блога», «примера», а также «образцов».
На официальном канале Middleman на YouTube есть полезное видео, объясняющее, как Middleman обрабатывает теги и таксономии для блогов:
Вывод
Middleman – это удобный и полезный генератор статических сайтов. Список пользователей Middleman обширен и включает в себя также MailChimp. Таким образом, если вы захотите использовать Middleman, чтобы создать статический сайт, вы окажетесь в хорошей компании.
С учетом вышесказанного, Ruby – не самый популярный язык веб-разработки, и, вероятно, именно поэтому Middleman не пользуется таким уровнем популярности, который можно приписать некоторым другим генераторам статических сайтов.
Тем не менее, Middleman по-прежнему является действительно полезным инструментом. Он может стать хорошим решением для окончательного создания желанного проекта.
