В современном мире разработки веб-сайтов статические сайты продолжают занимать важное место благодаря их скорости, надежности и безопасности. Они состоят из простых HTML, CSS и JavaScript файлов, что делает их легкими для хостинга и быстрыми в загрузке. В 2023 году существует множество инструментов для создания таких сайтов, начиная от классического генератора Jekyll, широко используемого во многих проектах, и заканчивая сотнями JavaScript-ориентированных решений, которые позволяют создавать статические сайты с помощью популярных фреймворков и библиотек. Но что если вы хотите пойти по своему пути, создать генератор сайтов своими силами и при этом использовать мощь и выразительность языка Elixir и его экосистемы, включая Phoenix? Данный путь более чем реален, и он может принести глубокое удовлетворение и полный контроль над процессом генерации сайта. В этом материале будет рассмотрено, как построить собственный статический генератор сайтов, основанный на Phoenix и сопутствующих инструментах, показывая возможности, преимущества и практическую реализацию решения.
Основой любого статического сайта являются файлы с контентом, чаще всего в формате Markdown. В мире Elixir для этой задачи отлично подходит библиотека NimblePublisher, разработанная компанией Dashbit. Она позволяет читать файлы Markdown из указанной директории, парсить метаданные (front matter), а затем создавать структуры данных, которые используются далее для создания страниц сайта. В чем особенность NimblePublisher? Он выполняет обработку контента во время компиляции проекта, что повышает производительность и делает доступ к контенту очень быстрым во время работы сайта. Для начала необходимо создать пустой проект на Elixir с помощью команды mix new, которая создаст базовую структуру.
После этого можно добавить в зависимости NimblePublisher, указав актуальную версию. Затем следует организовать структуру папок для хранения постов и контента — обычно это директория posts с вложенными подпапками по годам и файлам, соответствующим дате и идентификатору поста. Такой порядок позволит удобно работать с материалами и сортировать их по времени. Каждый Markdown-файл должен содержать front matter в формате Elixir Map, в котором указывается заголовок, автор, теги, описание и другие необходимые метаданные. Далее после метаданных через разделитель --- следует содержание поста в Markdown.
NimblePublisher в связке с модулем Post, который вы определите, будет отвечать за конвертацию и структуры поста, включая преобразование даты из имени файла и генерацию пути для итогового HTML-файла. После того как контент обработан, нужно подумать о рендеринге HTML. Для этого идеально подходит использование Phoenix Component в сочетании с библиотекой Phoenix LiveView, хотя функционал LiveView используется лишь частично. Благодаря Phoenix Component можно описывать HTML с помощью удобного DSL, создавая компоненты страницы, такие как лэйаут, список постов и страница отдельного поста. Это обеспечивает модульность, переиспользуемость и легкость в изменении дизайна.
Следующий шаг — построение процесса сборки сайта. Создается функция build внутри основного модуля, которая сначала собирает все посты, затем рендерит главную страницу, выводящую список статей, и после этого циклически проходит по каждому посту для генерации отдельной HTML-страницы. С помощью функций из Phoenix.HTML.Safe результат преобразуется в безопасные iodata и записывается на диск в директорию output, где формируется вся структура сайта.
При этом учитывается создание необходимых директорий для организации файлов по датам. Автоматизация сборки крайне важна для удобства разработки. Для этого в Elixir можно написать собственную Mix задачу, которая вызывает функцию build и измеряет скорость выполнения. Такой подход позволяет быстро запускать процесс сборки всего сайта одной командой, избавляя от рутинной работы и способствуя более эффективному рабочему процессу. Необходимо также позаботиться о стилях CSS и JavaScript.
В современном фронтенде разработчики отдают предпочтение инструментам, позволяющим эффективно писать и собирать стили. Tailwind CSS и esbuild являются именно такими решениями, которые можно интегрировать в Elixir проект. Они поддерживаются соответствующими Hex пакетами, что облегчает их установку и настройку. Конфигурация для esbuild и Tailwind настраивается с учетом путей вывода в директорию output для обеспечения согласованности с основным сайтом. Для управления сборкой CSS и JS добавляются соответствующие шаги в микс-алиас, который запускает все нужные команды последовательно и с возможностью минификации финальных файлов.
Таким образом, процесс генерации полностью включает сборку современного фронтенда. В итоговом лэйауте нужно подключить сгенерированные assets, включив ссылки на файл стилей и скрипт. При разработке для просмотра в локальном режиме удобно использовать легкий HTTP-сервер, например, встроенный в Python, чтобы быстро проверить результат и убедиться, что все браузерные ресурсы доступны. Такой подход минимизирует сложность и позволяет быстро тестировать изменения. Работа с копированием статических ресурсов — картинок, шрифтов и иных файлов — организуется с помощью встроенных функций Elixir, таких как Path.
wildcard и File.cp!. Это позволяет вручную или с минимальной автоматизацией перенести необходимые файлы в итоговую директорию сайта, обеспечивая полную готовность проекта к деплою. В плане развертывания современный статический сайт можно выкладывать практически куда угодно, включая популярные платформы для хостинга статичных файлов. Для более продвинутого развертывания можно использовать Fly.
io — современный облачный сервис, который предлагает отличный опыт с Elixir и Phoenix. С помощью простого Dockerfile, основанного на легковесном образе gostatic, весь собранный сайт копируется для быстрого и эффективного опубликования. Конфигурационный файл fly.toml настраивает параметры приложения, в том числе порт, тип обработки запросов и принудительное использование HTTPS. После выполнения команды развертывания можно с уверенностью открыть готовый сайт в браузере, пользуясь преимуществами близости географического расположения серверов и оптимальной производительностью.
Итоговая система, составленная из NimblePublisher, Phoenix Component, Tailwind, esbuild и Fly.io, демонстрирует, как можно собственными силами построить современный статический генератор сайтов и получить полностью управляемое решение с возможностью расширения. Весь Код умещается в несколько сотен строк, что показывает простоту и практичность данного подхода. Преимущества такой разработки включают полную свободу в организации контента, кастомизации рендеринга и процессе сборки. Вы не ограничены готовыми шаблонами и плагинами, а можете создавать именно то, что необходимо.
Кроме того, благодаря компиляции контента на этапе сборки, сайт работает очень быстро, что положительно сказывается на опыте пользователя и SEO. Конечно, нужно учитывать, что если проект вырастет очень большим, потребуется дополнительная оптимизация по памяти, но большинство современных сайтов разумного объема будут работать без проблем. Следует помнить, что подобный подход требует базовых знаний Elixir и Phoenix, однако полученные навыки существенно расширят возможности веб-разработчика и сделают процесс создания сайта увлекательным и полезным. Создание собственного статического генератора на Phoenix — отличный способ изучить внутренние механизмы генерации сайтов, полностью контролировать процесс, а также получить современный, быстрый и легко расширяемый сайт. Используя силы Elixir и богатую экосистему, можно добиться высококачественного результата без излишних зависимостей и сложностей.
В итоге, этот путь открывает двери для творчества и независимости в мире веб-разработки.
