Как собрать сайт на Markdown и не превратить его в гору легаси
Знакомая история: нужно быстро запустить лендинг, портфолио или документацию для проекта. Сначала смотришь в сторону конструкторов вроде Tilda или Webflow — красиво, но контент заперт в их базе, а за кастомизацию просят приличных денег. Потом думаешь: «Я же разработчик», и идешь в сторону Next.js или Astro. В итоге вместо контента две недели возишься с конфигами Tailwind, настройкой SEO и оптимизацией картинок.
Недавно наткнулся на HugoBlox. Это опенсорсный фреймворк, который пытается усидеть на двух стульях: дать скорость визуального билдера и оставить полный контроль над кодом.
В чем идея
Проект вырос из популярного шаблона Hugo Academic. Если вы когда-нибудь искали сайты профессоров Стэнфорда или исследователей из NVIDIA, скорее всего, вы видели их работу. Сейчас это полноценный конструктор, где страницы собираются из готовых блоков, а весь контент хранится в обычных Markdown-файлах.
Главная фишка здесь в «владении». Сейчас модно генерировать сайты через AI (v0, Lovable), но на выходе вы получаете сотни строк React-кода, который сложно поддерживать. HugoBlox генерирует структуру и Markdown. Если завтра проект закроется, у вас останутся текстовые файлы, которые прочитает любой статический генератор.
Как это работает на практике
Процесс выглядит так: выбираете шаблон, накидываете структуру и деплоите.
- Шаблоны под задачи. В репозитории их больше 20 типов. Есть специфические вещи: академические публикации с поддержкой BibTeX, документация с поиском, онлайн-курсы и даже слайды для презентаций на Reveal.js.
- AI-генерация. У ребят есть свой чат. Пишете: «Сделай мне лендинг для консалтинга с блоком услуг и отзывами», и он выдает готовую структуру папок и файлов.
- Визуальный редактор в VS Code. Это, пожалуй, самая удобная деталь. Они сделали расширение Ownable CMS. Вы открываете проект в редакторе и видите превью с возможностью перетаскивать блоки. При этом в фоне просто меняется YAML в заголовке вашего Markdown-файла.
Технический стек
В основе лежит Hugo — один из самых быстрых генераторов статических сайтов на Go. Для стилизации используется Tailwind CSS.
Почему это хорошо:
- Скорость сборки. Сайт на тысячу страниц собирается за пару секунд.
- Никакого рантайма. На выходе только статика (HTML/CSS/JS). Можно закинуть на GitHub Pages, Vercel или любой копеечный хостинг.
- Структурированный контент. В HugoBlox уже продуманы типы данных для авторов, проектов и публикаций. Вам не нужно изобретать схему данных для блога.
Кому это пригодится
Я вижу три сценария, где HugoBlox экономит кучу времени.
Во-первых, личные сайты и портфолио. Если вам нужно показать свои проекты, статьи и резюме, но не хочется тратить выходные на верстку адаптивных карточек. Здесь это работает из коробки.
Во-вторых, научные и образовательные проекты. Поддержка LaTeX, Jupyter Notebooks и автоматический импорт цитирований — это киллер-фича для тех, кто занимается данными или наукой. Не зря проект используют в MIT и Stanford.
В-третьих, документация. Если стандартный Docusaurus кажется слишком тяжеловесным, HugoBlox даст похожий результат с меньшими усилиями по настройке.
Как попробовать
Самый простой путь — через CLI. Вам понадобятся установленные Hugo (Extended version) и Node.js.
npm install -g hugoblox
hugoblox create site
После этого можно запустить локальный сервер и посмотреть, как меняется сайт при редактировании файлов. Если не хочется возиться с терминалом, на сайте проекта есть кнопка развертывания шаблона сразу в Netlify или Vercel.
HugoBlox — это не «убийца» React-фреймворков. Это инструмент для тех, кто ценит свое время и хочет, чтобы контент оставался контентом, а не превращался в программный код.
Из минусов: если вам нужно сложное динамическое взаимодействие с пользователем (личные кабинеты, сложные корзины), статики Hugo будет мало. Но для 90% информационных сайтов этого функционала хватит с головой. Проект живет с 2016 года, у него почти 10 тысяч звезд на GitHub и живое комьюнити в Discord, так что проблем с поддержкой возникнуть не должно.
