Как мы собрали главную страницу из markdown-блоков

Главная страница сайта — это HTML-шаблон. Обычно текст зашит прямо в код. Чтобы поменять заголовок, нужно лезть в шаблон, искать нужное место, не сломать вёрстку.

Мы сделали иначе: контент живёт в markdown-файлах, шаблон только отображает.

Проблема

Старая главная начиналась так:

Публикация заметок из Obsidian

Технически верно. Но человек без контекста не понимает, зачем ему это. «Obsidian» — слово для гиков. Остальные уходят.

Решение

Попросили AI проанализировать текст с точки зрения не-IT человека. Получили конкретный ответ:

  • «Граф знаний» — математический термин, пугает
  • Начинаете с механики, а не с пользы
  • Нет историй, только определения

AI предложил метафору: «Персональная Википедия». Все знают Википедию. Никто не спрашивает, что такое граф.

Новая структура

Разбили главную на блоки. Каждый блок — отдельный markdown-файл:

_main_hero.md      — заголовок и подзаголовок
_main_audience.md  — для кого (3 карточки)
_main_faq.md       — частые вопросы
_index.md          — возможности (как было)

Как это работает

Файл _main_faq.md:

### Мне нужно уметь программировать?

Нет. Пишете заметки в Obsidian, нажимаете «Опубликовать».

### Сколько это стоит?

Первый месяц бесплатно. Дальше — $10/месяц.

Шаблон загружает файл и превращает секции в HTML:

{{ faq := nvs.ByPath("/_main_faq.md") }}
{{ range i, q := faq.PartialRenderer().Sections(3) }}
  <div class="faq-item">
    <h3>{{ q.TitleHTML | unsafe }}</h3>
    <p>{{ q.ContentHTML | unsafe }}</p>
  </div>
{{ end }}

Добавить вопрос — отредактировать markdown. Шаблон не трогаем.

Что изменилось

Было Стало
«Публикация заметок из Obsidian» «Персональная Википедия, которая приносит доход»
Техническое описание «Делитесь знаниями. Зарабатывайте на экспертизе. AI отвечает за вас.»
Контент в HTML Контент в markdown-файлах
Нет FAQ 6 вопросов, снимающих страхи

Процесс с AI

  1. Показали текущие тексты
  2. Попросили проанализировать с точки зрения не-IT человека
  3. Получили список проблем и предложений
  4. Вместе переписали блоки
  5. AI сгенерировал код шаблона

Весь процесс — один разговор. От «проанализируй» до работающей страницы.

Итог первой версии

Главная теперь редактируется через markdown. Тексты понятны людям без технического бэкграунда. Структура модульная — легко добавлять и убирать блоки.

AI помог не только с кодом, но и с копирайтингом. Анализ текста, метафоры, FAQ — всё в одном разговоре.

Обновление: делаем страницу живее

Первая версия работала, но выглядела пустовато. Много белого пространства, нет картинок. Решили доработать вместе с AI.

Картинка, которая объясняет идею

Попросили нейросеть нарисовать схему: мозг в центре, вокруг заметки-документы. Часть заметок внутри пунктирного круга (приватные), часть снаружи (публичные).

Получилась простая иллюстрация, которая сразу показывает суть: ваши знания → заметки → часть публикуется в интернет.

Текст слева, картинка справа

Раньше всё было по центру — текст, кнопки, картинка друг под другом. Смотрелось скучно.

Сделали как у современных сервисов: текст слева, картинка справа. На телефоне — друг под другом. Сразу стало живее.

Блоки «Для кого» — теперь видно текст

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

Видео с пояснениями

Было два видео без подписей. Непонятно, зачем смотреть каждое.

Добавили заголовки:

  • Сайт из заметок — как опубликовать страницы и настроить платный доступ
  • Публикация в Telegram — как отправлять посты по расписанию

Теперь понятно, что в каждом видео, ещё до просмотра.

Секция «Узнать больше»

Добавили блок со ссылками на главные разделы: Философия, Документация, Блог. Каждая карточка с коротким описанием — сразу понятно, куда ведёт.

Фон — мягкая волна, сгенерированная нейросетью. Карточки полупрозрачные, с лёгким размытием под ними.

Простой футер

Раньше элементы были разбросаны: ссылки в одном месте, контакты в другом, иконки где-то сбоку.

Теперь всё по центру, три строки: навигация, контакты, юридическая информация. Чисто и понятно.

Как мы работали

  1. Смотрим на страницу — видим, что не так
  2. AI предлагает варианты
  3. Выбираем подходящий
  4. Публикуем, смотрим результат
  5. Повторяем

За час — несколько итераций. Каждый раз решали конкретную проблему.

Почему это быстро

Вся главная страница — от первого макета до финальной версии — заняла около часа. Не потому что мы гении, а потому что инструменты не мешают.

Markdown вместо CMS

В WordPress нужно: открыть админку → найти страницу → открыть редактор → понять, где какой блок → отредактировать → сохранить → проверить на сайте.

Здесь: открыл файл → написал текст → сохранил. Всё.

AI работает с текстом напрямую

Claude Code видит файлы как есть. Не нужно объяснять, где кнопка «Редактировать» или как устроена база данных.

Говоришь: «сделай текст темнее в блоке Для кого». AI находит файл, меняет класс с text-slate-600 на text-slate-800, готово.

Шаблон + контент = разделение

Дизайнер меняет шаблон. Редактор меняет markdown. Никто друг другу не мешает. AI может работать с обоими.

Итерации за минуты

Цикл «увидел проблему → исправил → проверил» занимает минуту-две. За час можно сделать 20-30 итераций. В традиционной CMS — может 5.

Вывод

trip2g — не про «ещё одна CMS». Это про скорость. Markdown понятен людям и AI. Шаблоны отделены от контента. Git хранит историю.

Результат: сайт, который можно собрать за час, а редактировать — за секунды.

Новая страница: контент важнее дизайна

Главная рассказывает про продукт в целом. Но есть конкретная аудитория — эксперты с ценными знаниями, которые не знают, как делиться. Им нужна отдельная страница.

Проблема эксперта

Человек годами копит знания. Хочет поделиться, но:

  • Книга — проект на год, большинство не дописывают
  • Блог — нужно регулярно публиковать, пропустил месяц — читатели ушли
  • Курс — записать, смонтировать, продать, поддерживать
  • Telegram — один пост = одна мысль, сложную тему не раскроешь

Все форматы требуют линейного потока. А знания — это граф. Одна тема связана с десятью другими.

Третий путь

Что если писать не статьи, а заметки? Одна мысль — одна заметка. Десять минут, не час. Заметки связываются ссылками. Через полгода — 200 заметок. Это уже база знаний.

Подключаешь к сервису — получаешь сайт. Дизайн базовый, но контент уже работает. Красоту можно добавить потом.

Как писали текст

Использовали режим групповой дискуссии с AI-агентами. Каждый со своей специализацией:

  • Storyteller — нашёл крючок: «У тебя уже есть сайт. Ты просто этого не знаешь»
  • Innovation Strategist — добавил бизнес-логику: путь к монетизации, упущенная выгода
  • Design Thinking Coach — построил путь пользователя от боли к решению

Результат — структура страницы:

  1. Боль (знания застряли)
  2. Тупики (книга, блог, курс, канал)
  3. Решение (заметки + связи)
  4. Механика (как публиковать)
  5. Монетизация (три модели дохода)
  6. Примеры (кто так делает)
  7. Призыв (первый шаг)

Проверка на ясность

После написания прогнали текст через редактора информационного стиля. Нашёл:

  • Канцелярит («для использования» → убрать)
  • Абстракции без ссылок (упоминаем MCP — дай ссылку на документацию)
  • Слабый призыв (читатель дошёл до конца и не знает куда кликнуть)

Добавили 10 внутренних ссылок. Страница перестала быть тупиком.

Отдельный layout

Главная показывает возможности сеткой карточек. Для длинного текста это не работает — глаз скачет, сложно читать последовательно.

Создали отдельный шаблон:

  • Hero с заголовком под тему страницы
  • Контент как статья (prose), не карточки
  • CTA в конце — общий блок, переиспользуется

Вынесли повторяющиеся элементы в общие блоки: иконка Telegram, секция призыва к действию. Меньше копипасты, проще поддерживать.

Процесс для другой нейронки

Если делаешь похожую страницу:

  1. Определи аудиторию — кто конкретно, какая боль
  2. Найди тупики — что они уже пробовали, почему не сработало
  3. Предложи решение — как твой продукт решает именно эту боль
  4. Покажи путь к результату — от первого шага до цели
  5. Добавь монетизацию — если применимо, покажи как это приносит деньги
  6. Проверь на ясность — убери канцелярит, добавь ссылки
  7. Выбери layout — карточки для обзора, prose для истории

Главное: страница должна отвечать на вопрос читателя, а не рассказывать про фичи продукта.

Отладка Jet-блоков: почему выводится false

При создании переиспользуемого CTA-блока столкнулись с багом: вместо заголовка и подзаголовка выводилось false false.

Симптом

{{ block cta_section(title, subtitle) }}
  <h2>{{ title }}</h2>
  <p>{{ subtitle }}</p>
{{ end }}

{{ yield cta_section(title="Готовы?", subtitle="Напишите нам") }}

Результат: <h2>false</h2><p>false</p>

Причина

Jet требует значения по умолчанию для параметров блока. Без них именованные аргументы не связываются с параметрами.

Решение

{{ block cta_section(title="", subtitle="") }}
  ...
{{ end }}

Добавили ="" — заработало.

Альтернатива: механизм content

Для длинного текста лучше использовать встроенный механизм content:

{{ block cta_section(title="") }}
  <h2>{{ title }}</h2>
  <p>{{ yield content }}</p>
{{ end }}

{{ yield cta_section(title="Готовы?") content }}
  Напишите в Telegram — поможем настроить.
{{ end }}

content — зарезервированное слово в Jet. Нельзя использовать как имя параметра (ошибка парсинга), но можно передавать вложенный HTML через yield ... content ... end.

Как нашли

  1. Написали минимальный тест с jet.NewInMemLoader()
  2. Увидели, что без дефолтов — false
  3. Проверили content как параметр — ошибка парсинга
  4. Задокументировали в лучших практиках

Три теста теперь фиксируют поведение Jet: именованные параметры, зарезервированный content, механизм yield content.

Ссылки