Создаем первый статический сайт с помощью Middleman

Создаем первый статический сайт с помощью Middleman

Существует несколько генераторов статических сайтов, которые могут помочь нам быстро создать и развернуть статические сайты в Интернете за считанные минуты. 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 по-прежнему является действительно полезным инструментом. Он может стать хорошим решением для окончательного создания желанного проекта.


.

  • October 21, 2023