npx cms-create-site my-site Что бы вы хотели создать сегодня?
УзнатьЧто такое Vertex
Контентный сайт — это файл конфигурации. Всё остальное — забота фреймворка.
Vertex CMS — это Vue 3 фреймворк, построенный на vite-ssg. Вы пишете JSON, описывающий содержимое каждой страницы, а в ответ получаете предварительно отрендеренный статический сайт, где маршрутизация, метаданные, оформление и изображения уже решены. Нет кода приложения, который нужно писать, и нет сервера, который нужно поддерживать.
Страницы — это данные, а не код
Страница — это список компонентов и контент, который этим компонентам нужен. Добавить раздел — значит добавить строку. Никому не приходится открывать .vue-файл, чтобы поменять заголовок, а правка контента не может сломать сборку.
Дизайн — это манифест токенов
Тема — это один JavaScript-объект с токенами дизайна: палитра, типографика, поверхности, кольца фокуса, тени. Фреймворк компилирует его в пользовательские свойства CSS, поэтому переодеть весь сайт — это один файл, а не аудит таблиц стилей.
Статическая выдача, настоящее SEO
Каждый маршрут предварительно рендерится в собственный HTML с каноническими URL, альтернативами hreflang, JSON-LD, тегами Open Graph, картой сайта и robots.txt, выведенным из ваших настроек черновиков. Разверните папку где угодно, лишь бы там раздавались файлы.
Быстрый старт
От пустого места до готового к развёртыванию сайта — четыре команды.
Vertex поставляется как один npm-пакет плюс плагин для Vite. Генератор создаёт рабочий сайт, который можно собрать сразу же; дальше вы просто правите JSON.
Сгенерировать сайт
Создаёт каталог сайта, стартовую тему и главную страницу, которая уже собирается.
терминал npx cms-create-site my-site cd my-site npm installОписать страницу
Плоские ключи в точечной нотации с индексами массивов. Фреймворк разворачивает их во вложенный объект, который ваши компоненты читают при рендеринге.
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }Посмотреть результат
Сервер разработки Vite с горячей перезагрузкой. Правки контента подхватываются мгновенно, изменения изображений и темы — тоже.
терминал npm run devСобрать статический сайт
Предварительно рендерит каждый маршрут в отдельный HTML-файл в dist/, генерирует адаптивные варианты изображений и записывает sitemap.xml, robots.txt, manifest.json и страницу 404.
терминал npm run build:ssg
Вот и весь цикл. Полную модель контента, токены оформления и цели развёртывания смотрите в документации →
Что входит
Части, нужные любому контентному сайту, уже готовы.
Это не плагины, которые нужно искать. Они внутри фреймворка, включены по умолчанию и настраиваются из того же JSON, что и всё остальное.
Предрендеренная маршрутизация
Маршруты выводятся из ваших файлов страниц. Каждый рендерится в собственный HTML на этапе сборки — без SPA-переписывания и без выдачи оболочки главной страницы по реальным контентным URL.
Многоязычный контент
Каталоги по локалям, зеркалящие друг друга. Базовая локаль загружается первой, и каждая локаль переопределяет только те ключи, которые сама объявила, — поэтому частичный перевод остаётся корректным.
Адаптивные изображения
Положите оригинал в site/assets/img/. Сборка сгенерирует AVIF, WebP и JPEG в шести ширинах, закэширует их вне репозитория и отдаст через srcset внутри <picture>.
SEO-метаданные
Канонические URL, альтернативы hreflang, карточки Open Graph и Twitter, JSON-LD, автоматически выведенные хлебные крошки, sitemap.xml, robots.txt и манифест веб-приложения — всё генерируется, ничего не поддерживается вручную.
Закрытые черновики
Закройте паролем одну страницу, префикс пути или сайт целиком. Закрытые страницы публикуются с noindex, не попадают в карту сайта и не рендерят тело, пока их не разблокируют.
Темы и расширения
Темы — это манифесты токенов. Расширения — проверенные наборы компонентов. И то и другое может лежать внутри вашего репозитория или публиковаться в npm и переиспользоваться между сайтами.
Трёхуровневые компоненты
Локальные компоненты сайта перекрывают компоненты расширений, а те — встроенный набор. Побеждает более специфичный, а при коллизии имён их различают по имени с указанием источника.
Настоящий 404
Фреймворк предварительно рендерит /404.html с оформлением вашего собственного сайта, так что несопоставленные URL получают фирменную страницу с noindex, а не пустое тело ответа.
Начать
Итак — что бы вы хотели создать сегодня?
Vertex CMS распространяется по лицензии MIT и опубликован в npm. Сгенерируйте сайт, прочитайте документацию или загляните в исходный код.
npx cms-create-site my-site