Insights / Технические материалы
Как развивать сайт на Astro + Cloudflare по функциям
Как мы объединили Astro и Cloudflare Pages с AI-чатом для обращений, Sveltia CMS, многоязычным блогом, CTA услуг, безопасным Markdown-рендерингом и комментариями без внешнего сервиса.
Содержание
Когда сайт начинается с Astro и Cloudflare Pages, обычно достаточно быстрой и безопасной статической публикации.
Со временем появляются новые задачи: редактирование из браузера, локализованные страницы, навигация через AI-чат, передача контекста услуги в форму и комментарии.
Эта статья служит индексом внедрения: помогает решить, к какому слою относится функция, в каком порядке ее добавлять и какую подробную статью читать дальше. Пример взят с сайта Acecore, но подход переносится на другие сайты Astro + Cloudflare.
Кратко
Роли разделены так:
| Слой | Ответственность |
|---|---|
| Astro | Страницы, блог, OGP, RSS, sitemap и UI |
| Cloudflare | Pages, Pages Functions, D1 и Turnstile |
| GitHub | PR, CMS-diff, переводы и история |
| Sveltia CMS | Японский source, авторы, теги, изображения |
| OpenAI API | Ответы AI-чата |
| Pagefind | Индекс поиска для проверенного HTML |
То, что можно сделать статическим, остается статическим. Runtime нужен только для небольших API.
Маленькие API на Cloudflare
AI-чат и комментарии используют один паттерн.
Astro рисует UI. Pages Functions держит API-границу. Secrets, D1 bindings, Turnstile, Origin checks и rate limits остаются на серверной стороне.
CMS как интерфейс редактирования
Sveltia CMS не является runtime-базой данных. Он создает Git-изменения.
Японские статьи, авторы, теги, изображения и JSON-тексты проходят через PR, build и review.
Перевод как статический контент
Локализация не сводится к переводу интерфейса в браузере.
Каждый язык получает URL, title, description, OGP, JSON-LD, RSS, sitemap и hreflang.
Каналы обращения разделены
AI-чат помогает выбрать услугу. CTA услуги сохраняет контекст. Форма фиксирует официальное обращение.
Вывод AI не является доверенным HTML
Markdown-ссылки из AI сначала валидируются.
Только ссылки из allowlist становятся DOM-элементами.
Комментарии остаются в Cloudflare
Комментарии не используют внешний виджет.
Pages Functions принимает GET/POST, D1 хранит комментарии, Turnstile защищает отправку.
Читать по цели
Не нужно сначала читать все подряд. Начните с функции, которую хотите добавить.
| Цель | Что читать первым |
|---|---|
| Редактировать статьи и изображения из браузера | Руководство по внедрению Sveltia CMS |
| Публиковать индексируемые многоязычные страницы | Как вести многоязычный блог с Sveltia CMS |
| Направлять посетителей через AI-чат | Технический дизайн AI-чата для обращений |
| Безопасно рендерить ссылки в ответах AI | Безопасный рендеринг Markdown-ссылок в ответах AI-чата |
| Передавать контекст услуги в форму | Передача контекста CTA услуги в форму обращения |
| Добавить комментарии без внешнего сервиса | Комментарии блога Astro только на Cloudflare |
Порядок внедрения
Для похожего сайта практичный порядок такой:
- Закрепить статические страницы, блог, RSS, sitemap и OGP в Astro.
- Добавить Sveltia CMS для редактирования японского source.
- Генерировать локализованные страницы как статический HTML.
- Добавить навигацию через AI-чат и CTA услуг.
- Зафиксировать безопасные границы для Markdown-ссылок, prefill формы, Origin checks и rate limits.
- Добавить комментарии внутри Cloudflare только тогда, когда они действительно нужны.
Итог
Astro + Cloudflare позволяют расширять корпоративный сайт, не теряя преимуществ статической доставки.
Используйте эту страницу как входную точку и добавляйте только те части, которые нужны вашему сайту, не ослабляя статическую основу.
Site Architecture
Слои расширения сайта
По умолчанию оставлять сайт статическим и добавлять динамику только там, где она нужна.
Доставка
Генерировать HTML в Astro и отдавать через Cloudflare Pages.
Редактирование
Редактировать японский source в Sveltia CMS и проверять через PR.
Перевод
Держать переводы в PR, а не показывать все языки в CMS.
Навигация
AI-чат и CTA услуг ведут посетителя к правильной форме.
Разница между простым добавлением функций и их внедрением как части общей архитектуры
Добавлять каждую функцию отдельно
- ИИ, CMS, комментарии и формы начинают следовать разным принципам проектирования
- Скриптов и панелей внешних сервисов становится больше, а ответственность за объяснение распределяется
- Многоязычные URL, поисковый индекс и preview-окружение легко расходятся
- Связи между функциями не видны, поэтому трудно определить порядок внедрения
Добавлять по слоям
- Роли Astro, Cloudflare, GitHub и OpenAI API можно объяснить по отдельности
- Динамические API сосредоточены в Pages Functions, а хранение приближено к Cloudflare с помощью D1
- Обновления CMS, переводы, поиск, RSS и sitemap используют одну структуру контента
- Материал удобно читать как указатель по назначению и порядку внедрения
Проверка архитектуры при переносе на другой сайт
- Отделить то, что можно сгенерировать статически, от того, для чего нужен API
- Разделить CMS как точку редактирования, перевод как PR и решение о публикации как build
- Не передавать персональные данные ИИ-консультанту и разрешать ему отвечать только по опубликованной информации
- Передавать контекст формы через URL-параметры, сохраняя стабильные категории принимаемых значений
- Для отправляемых данных, таких как комментарии, явно указать физическое имя D1 и binding
- Не считать вывод ИИ и пользовательские публикации доверенным HTML, а обрабатывать их по allowlist
Связанные страницы
- Технический дизайн AI-чата для обращенийAPI-границы и контроль ответов на основе информации сайта.
- Руководство по внедрению Sveltia CMSCMS, GitHub backend, OAuth и PR-процесс для статического сайта.
- Многоязычный блог с Sveltia CMSПубликация локализованных статических страниц вместо перевода только в UI.
- Передача контекста CTA в формуПередать контекст услуги в категорию и тему формы обращения.
- Безопасный Markdown-рендеринг ссылок AI-чатаРендерить только разрешенные ссылки и не считать вывод AI доверенным HTML.
- Комментарии блога только на CloudflareКомментарии без внешнего сервиса, с Pages Functions, D1 и Turnstile.
Часто задаваемые вопросы
С чего начать внедрение?
Сначала закрепите статические страницы Astro, блог, RSS, sitemap и OGP. Затем добавьте CMS и многоязычность; когда потребуется путь обращения, внедряйте ИИ-чат, CTA услуг и комментарии.
Следует ли всё создавать только на Cloudflare?
Нет. Некоторые части, например ИИ-консультант, используют OpenAI API. Важно сосредоточить в Cloudflare доставку, границу API, базу данных и защиту от ботов, осознанно разделив места с внешними сервисами и без них.
Нужен ли весь этот набор небольшому сайту?
С самого начала нужен не весь набор. Но если вы планируете CMS, путь обращения, многоязычность или комментарии, раннее решение по URL, хранилищу, preview-окружению и поисковому индексу упростит дальнейшую работу.