О проекте
sitelo начинался не как фреймворк. Он начался с желания писать разметку так, чтобы это было естественно в JavaScript, — и разрастался, пока не покрыл весь путь от файла страницы до опубликованного сайта.
javascript-to-html
Сначала появился javascript-to-html (он же ht.js): простой и понятный способ генерировать HTML в JavaScript, без сложных шаблонизаторов и фреймворков.
При том, насколько повсеместными стали полноценные фреймворки вроде React, найти простое решение для шаблонов, не тянущее за собой всё подряд, оказалось на удивление сложно. Сосредоточившись только на превращении JavaScript в HTML — по сути, на функциях, возвращающих строки, — ht.js остаётся лёгким, удобным, гибким и расширяемым.
Такая небольшая поверхность позволяет применять его во многих местах: прямо во фронтенде (как в SPA), в сборке для создания статических сайтов (SSG) или даже для серверного рендеринга (SSR).
Как научить Vite отдавать HTML
Это решило вопрос написания. Следующей задачей была сборка: Vite считает .js / .ts скриптами, а не страницами. Требовалось соглашение, по которому определённые модули предназначены стать HTML.
Идея была прямолинейной: файлы с именами вида *.ht.js, *.html.js, *.ht.ts и им подобные должны превращаться в HTML, а не собираться как клиентский JavaScript. Это соглашение и стало vite-plugin-html-pages — файловая маршрутизация, загрузка данных, ресурсы и статическая генерация поверх Vite.
sitelo
sitelo объединяет Vite и этот плагин в одну установку и один CLI. Вы получаете цельный, отлично собранный опыт разработки: sitelo для живого сервера, sitelo build для продакшна, разумные значения по умолчанию и модель страниц из плагина — без необходимости собирать цепочку инструментов самостоятельно.
Одна и та же идея сверху донизу: страницы — это модули, возвращающие HTML. sitelo — тот слой, который делает эту идею завершённой.
Сравнение
Хороших инструментов для публикации статических сайтов и без того хватает. Ниша sitelo намеренно узкая: функции на JavaScript (или TypeScript), возвращающие HTML, с опытом разработки от Vite и с минимумом фреймворка.
| Инструмент | Модель | Берите, когда |
|---|---|---|
| sitelo | Функции JS/TS → HTML поверх Vite | вам нужен HTML из JavaScript с настоящим рабочим процессом Vite — без компонентного фреймворка |
| Astro | Компоненты + острова, свой компилятор | контентные сайты, которым нужны компонентные острова и экосистема побольше |
| Next.js | Полноценное React-приложение (SSR / SSG / ISR) | вы строите приложение в экосистеме React |
| Hugo | Шаблоны Go, очень быстрые сборки | у вас огромный контентный сайт и вам комфортно в инструментарии Go |
| Eleventy | Шаблонизаторы → HTML | вам нужны гибкие шаблоны (Nunjucks, Liquid, …) без SPA-фреймворка |
Если вам нужны компоненты, гидратация и фреймворк — берите фреймворк. Если нужны HTML-файлы из функций JavaScript с опытом Vite, sitelo — самый маленький инструмент, который делает всю работу целиком.