Розробка сайту документації на 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 три активні версії, а документація загальна — плутанина неминуча. 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+ успішних проєктів. Ми гарантуємо дотримання термінів і високу якість коду. Надаємо постпроєктну підтримку.