Сайт Vilniaus Verinelis

Небольшой быстрый статический сайт детсада Vilniaus Verinėlis.

Vue 3TypeScriptStatic site

Dev-story

Задача

Сайту детсада нужно лишь быстро грузиться, понятно читаться и легко обновляться нетехническим персоналом.

Что делали

Сайт на Vue 3 + TypeScript, собранный как статические страницы, с простой структурой, чтобы информацию было легко найти, а контент — менять.

Результат

Он живёт на vilniausverinelis.lt, грузится быстро, и для рутинных обновлений контента не нужен разработчик.

Dev-story статья

Сайт Vilniaus Verinelis: как создавался проект

Детскому саду нужно, чтобы сайт был всегда актуальным — новости, объявления, фотографии, — но обновляют его воспитатели, а не разработчики, и страница должна мгновенно открываться на телефоне у родителей. Напряжение было в том, чтобы тянуть живой контент из CMS и реактивного бэкенда, но публичный сайт отдавать статическими файлами, в которых во время работы нечему ломаться. Поэтому всё выгружается на этапе сборки и замораживается, а персонал при публикации вообще не трогает код.

Разделы

Модули

Стек

Vue 3 + TypeScript

Почему появился проект

Сайту детсада нужно лишь быстро грузиться, понятно читаться и легко обновляться нетехническим персоналом.

Что было создано

Сайт на Vue 3 / Nuxt 4, полностью предгенерируемый в статический HTML и развёрнутый на Cloudflare Pages, который берёт свой контент — страницы, новости, изображения — из headless CMS и реактивного бэкенда WebEdge на этапе сборки. Каждая перенесённая страница новостей обходится и генерируется заранее, поэтому при заходе посетителя не происходит ни одного обращения к серверу. Сайт двуязычный и содержит контактную форму, защищённую hCaptcha.

Основные модули и путь пользователя

M01

Загрузка контента на этапе сборки из публичного REST API CMS WebEdge и реактивного бэкенда, чтобы редакторы работали в привычной админке, а сайт пересобирался по их правкам

M02

Механизм обхода при предгенерации, который находит и замораживает каждую перенесённую страницу новостей в статический HTML, пропуская пути API хранилища/ассетов, которые трогать не нужно

M03

Статическая сборка настроена громко падать при любой ошибке загрузки из CMS, чтобы битый контент никогда не ушёл в продакшн полупустой страницей

M04

Переписывание идентификаторов ассетов хранилища WebEdge, чтобы изображения корректно подгружались из слоя хранения после миграции контента

M05

Двуязычная маршрутизация через Nuxt i18n, оформление на Tailwind и карусели Swiper для фотогалерей

Архитектура и технологические решения

Сделано на Vue 3, TypeScript, Static site.

Nuxt 4 с TypeScript, Tailwind, VueUse и i18n; контент приходит из CMS и реактивного бэкенда WebEdge через runtimeConfig (переменные окружения недоступны в composables Nuxt во время предгенерации), а на выходе — статические файлы на Cloudflare Pages.

Результат и выводы

Он живёт на vilniausverinelis.lt, грузится быстро, и для рутинных обновлений контента не нужен разработчик.

Персонал редактирует контент в CMS, а сайт пересобирается в обычные статические файлы — быстро для родителей, нечего обслуживать во время работы, и для публикации новой записи не нужен код.