~/VibeHandbook

Глава 17 · 04

Кейс 4: Контентный сайт, за которым не надо ухаживать

Идея

Любитель захотел превратить папку с Markdown-заметками — рецензиями на рестораны за годы путешествий — в публичный сайт с поиском, без CMS, в которую надо логиниться, и без ежемесячного счёта. Добавил заметку, сделал push — готово.

Спецификация

Статический сайт, генерируемый из папки с Markdown-файлами, один
файл на рецензию (title, city, rating, body во frontmatter).
Сделай главную страницу со списком рецензий от новых к старым,
страницу на каждую рецензию и клиентский поиск по city или name.
Никакой базы данных, никакого логина, никакого шага сборки, который
мне надо запускать вручную. Push нового .md файла должен публиковать его.

Скрытое требование — в последнем предложении. «Никакого шага сборки, который мне надо запускать вручную» означает, что спецификация на самом деле про рабочий процесс, а не только про результат, — а требования к рабочему процессу относятся к тем, что AI пропускает, если их не назвать, потому что они не проявляются в работающем приложении.

Стек

Генератор статических сайтов, который читает Markdown во время сборки, задеплоенный на CDN-хостинг со сборками по триггеру Git. Push в репозиторий — хостинг пересобирает, CDN раздаёт. Поиск — клиентский, по небольшому JSON-индексу, сгенерированному при сборке, так что нет ни сервера, ни стоимости запросов — нормальный компромисс на нескольких сотнях рецензий, и притом осознанный выбор, который мы назвали, а не обнаружили.

Ключевые промпты

Сначала мы заякорили AI на форме данных, до любого UI:

Настрой статический сайт, который читает каждый .md файл в /reviews.
Во frontmatter каждого файла есть title, city, rating (1-5), date.
Распарси их все во время сборки в отсортированный список (от новых
к старым) и сгенерируй: главную страницу со списком и по одной
странице на рецензию по адресу /reviews/<slug>. Покажи мне сначала
код загрузки данных, до любой стилизации.

«До любой стилизации» — это намеренный рычаг. Попросите всё сразу — и получите красивую страницу, подключённую к данным, которым нельзя доверять; попросите сначала слой данных — и сможете проверить фундамент, прежде чем хоть один пиксель вас отвлечёт. Затем поиск, ограниченный, чтобы оставаться дешёвым:

Сгенерируй search.json во время сборки с {title, city, slug} для
каждой рецензии. На главной добавь поле поиска, которое фильтрует
видимый список на клиенте по совпадению city или title — без сетевых
вызовов, просто фильтруй уже загруженный индекс. Уложись меньше чем
в 50 строк JS.

Препятствие

Сборка проходила локально, но задеплоенный сайт выдавал 404 на каждой отдельной странице рецензии. Главная работала; страницы на рецензию — нет. Мы вставили симптом и конфигурацию, а не строили теории:

Главная работает вживую, но страницы /reviews/<slug> все выдают 404
в продакшене, хотя работают в локальном dev. Вот листинг моей
выходной директории сборки и deploy-конфиг моего хостинга: [вставлено].
Почему локальный dev раздаёт эти страницы, а продакшен — нет?

AI проследил это до разницы между роутингом dev-сервера (который
разрешает пути динамически) и статическим хостингом (который раздаёт
только файлы, физически существующие). Сборка генерировала страницы
рецензий не в ту выходную папку, поэтому они никогда не загружались —
dev скрывал баг, потому что его роутер подделывал маршруты, которых
не мог дать продакшен.

Мы нацелили выходную директорию на то, что хостинг действительно деплоил, страницы появились, и мы добавили одну строку в чек-лист запуска: кликни глубокую ссылку на живом сайте, а не только главную. Более широкий урок в том, что «работает в dev» и «работает задеплоенным» — это разные утверждения, и статический экспорт — ровно то место, где они расходятся: dev-серверы снисходительны к маршрутам так, как реальный файловый хостинг никогда не бывает.

Запуск

Мы запушили реальную рецензию, посмотрели, как хостинг пересобирается, и загрузили глубокую ссылку на эту конкретную рецензию на живом домене — тот самый случай, насчёт которого dev врал. Затем мы поискали её город, чтобы убедиться, что индекс её подхватил. Добавление следующей рецензии было коммитом в одну строку, и в этом был весь смысл: запуск был не моментом, а рабочим процессом, который продолжает работать без нас.

Хотите офлайн-версию?

Получите PDF + EPUB + скачиваемую библиотеку промптов + обновления версий.

$ Получить PDF — $39