Разработка сайта документации на Docusaurus
Документация вашего проекта разрослась, а разработчики тратят часы на поиск нужной информации? Мы создаём единый сайт документации на Docusaurus — React-фреймворке от Meta. Он генерирует быстрые HTML-страницы из Markdown/MDX, поддерживает версионирование, многоязычность и полнотекстовый поиск. Наш опыт — более 30 успешных проектов для стартапов и enterprise-компаний. Гарантируем качество и соблюдение сроков.
В отличие от Confluence или Google Docs, Docusaurus даёт полный контроль над структурой и дизайном. Версионирование встроено: каждая версия API хранится в отдельной папке, пользователи не путаются. i18n — переключатель языка добавляется за пару строк конфига. А поиск Algolia находит даже с опечатками. Эти возможности экономят часы вашей команды. Закажите разработку сайта документации — получите надёжный ресурс, который масштабируется вместе с продуктом.
Мы не просто ставим шаблон — мы анализируем вашу документацию, проектируем навигацию, пишем кастомные MDX-компоненты под ваши задачи. Например, для fintech-стартапа за 10 дней развернули 3 версии API с русским и английским, Algolia и CI/CD. Результат: LCP < 1.5 с, время поиска < 200 мс.
Почему Docusaurus лучше альтернатив?
| Критерий | Docusaurus | VuePress | MkDocs |
|---|---|---|---|
| Версионирование | Встроено | Через плагин | Нет |
| i18n | Встроено | Через плагин | Плагин (не очень гибкий) |
| Поиск | Algolia (интеграция) | Algolia или локальный | Плагины |
| Кастомные компоненты | React/MDX | Vue/SFC | HTML/JS |
| Сообщество | Meta, активное | Vue, активное | Python, среднее |
| Производительность (Lighthouse) | 95-100 | 90-100 | 85-90 |
Типовые сроки разработки
| Объём документации | Срок | Сложность кастомизации |
|---|---|---|
| до 20 страниц | 5–7 дней | Минимальная |
| 20–50 страниц | 8–12 дней | Средняя |
| 50+ страниц, несколько версий | 12–20 дней | Высокая |
Проблемы, которые решает Docusaurus
Версионирование. Когда у API три active версии, а документация общая — путаница неизбежна. Docusaurus позволяет хранить документацию для каждой версии в отдельной папке, а навигация автоматически переключает версии. Мы помогали fintech-стартапу развернуть документацию для 3 версий API за 4 дня.
Поиск. Стандартный поиск по документации часто не находит нужное. Мы интегрируем Algolia DocSearch: индексация происходит автоматически, поиск учитывает синонимы, опечатки и ранжирует результаты. Пользователи находят ответ за секунду.
Многоязычность. Документация на русском и английском — стандарт. Docusaurus поддерживает i18n из коробки: достаточно добавить папки с локалями. Мы настраиваем переключатель языка, url-ы и автоматическую синхронизацию переводов.
Кастомизация. Стандартных компонентов иногда не хватает. MDX позволяет писать React-компоненты прямо в документации. Мы создаём вкладки для языков программирования, интерактивные примеры, встроенные демо. Например, для клиента из EdTech мы сделали компонент "живой пример кода" с возможностью запуска в браузере.
Как мы разрабатываем сайт на Docusaurus?
Процесс: анализ → проектирование → разработка → наполнение → тестирование → деплой.
Подробнее о каждом этапе
- Анализ — изучаем вашу документацию, аудиторию, требования к версиям и языкам.
- Проектирование — создаём структуру разделов, карту сайта, выбираем плагины.
- Разработка — настраиваем Docusaurus, пишем кастомные компоненты, интегрируем поиск.
- Наполнение — переносим контент из исходных источников, проверяем ссылки.
- Тестирование — прогоняем на broken links, проверяем производительность (Core Web Vitals).
- Деплой — настраиваем CI/CD, заливаем на ваш хостинг (Vercel, Netlify, GitHub Pages, собственный сервер).
Что входит в работу
- Исходный код репозитория (Docusaurus с конфигурацией)
- Документация по структуре и настройке
- Обучение контент-менеджеров (работа с MDX, публикация версий)
- 2 недели поддержки после запуска
Сроки и стоимость
Сроки зависят от объёма: от 5 дней (до 20 страниц, без кастомизации) до 15 дней (50+ страниц, сложные компоненты, несколько версий). Стоимость рассчитывается индивидуально — оценим ваш проект бесплатно и назовём сроки. Получите консультацию — просто свяжитесь с нами.
Инициализация (для понимания)
npx create-docusaurus@latest my-docs classic --typescript cd my-docs npm run start Структура проекта
my-docs/ ├── docusaurus.config.ts # основной конфиг ├── sidebars.ts # конфиг sidebar ├── docs/ # документация │ ├── intro.md │ ├── getting-started/ │ │ ├── installation.md │ │ └── configuration.md │ └── api/ │ └── reference.md ├── blog/ # блог (опционально) ├── src/ │ ├── components/ │ ├── css/custom.css │ └── pages/ # кастомные страницы (React) └── static/ # статические файлы docusaurus.config.ts (пример)
import type { Config } from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; const config: Config = { title: 'My Project', tagline: 'Simple and fast', url: 'https://docs.myproject.com', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', i18n: { defaultLocale: 'ru', locales: ['ru', 'en'] }, presets: [['classic', { docs: { sidebarPath: './sidebars.ts', editUrl: 'https://github.com/my-org/my-docs/tree/main/', showLastUpdateTime: true, showLastUpdateAuthor: true, }, theme: { customCss: './src/css/custom.css' }, } satisfies Preset.Options]], themeConfig: { algolia: { appId: 'YOUR_APP_ID', apiKey: 'YOUR_SEARCH_KEY', indexName: 'my-project-docs', }, navbar: { title: 'My Project', items: [ { type: 'docSidebar', sidebarId: 'tutorialSidebar', label: 'Docs' }, { type: 'docsVersionDropdown' }, { type: 'localeDropdown' }, ], }, } satisfies Preset.ThemeConfig, }; export default config; MDX-компоненты (пример)
--- title: API Reference description: Complete API reference for My Project --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock'; # API Reference <Tabs> <TabItem value="curl" label="cURL"> ```bash curl -X POST https://api.myproject.com/v1/users \ -H "Authorization: Bearer TOKEN" \ -d '{"name": "John"}' ``` </TabItem> <TabItem value="js" label="JavaScript"> ```typescript const user = await client.users.create({ name: 'John' }); ``` </TabItem> </Tabs> Опыт и гарантии: Наша команда имеет 5 лет опыта в разработке технической документации и 30+ успешных проектов. Мы гарантируем соблюдение сроков и высокое качество кода. Предоставляем постпроектную поддержку.