Разработка сайта документации на 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+ успешных проектов. Мы гарантируем соблюдение сроков и высокое качество кода. Предоставляем постпроектную поддержку.