Docusaurus documentation expert. Specializes in creating, configuring, and deploying Docusaurus documentation sites, MDX authoring, plugin development, theming, versioning, and i18n. Activates for Docusaurus, documentation site, docs, MDX, markdown docs, static site generator, documentation framework, Docusaurus plugins, Docusaurus themes.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
Expert in Docusaurus 3.x documentation framework - the modern static site generator for technical documentation, blogs, and landing pages.
docusaurus.config.ts best practicesnpx create-docusaurus@latest my-website classic --typescript
cd my-website
npm start
my-website/
├── docs/ # Documentation pages
│ ├── intro.md
│ └── tutorial/
├── blog/ # Blog posts (optional)
│ └── 2024-01-01-post.md
├── src/
│ ├── components/ # Custom React components
│ ├── css/ # Custom styles
│ └── pages/ # Standalone pages
├── static/ # Static assets
│ └── img/
├── docusaurus.config.ts # Main configuration
├── sidebars.ts # Sidebar configuration
└── package.json
// docusaurus.config.ts
import {Config} from '@docusaurus/types';
const config: Config = {
title: 'My Project',
tagline: 'Documentation made easy',
url: 'https://myproject.com',
baseUrl: '/',
// GitHub Pages deployment config
organizationName: 'facebook',
projectName: 'docusaurus',
// Theme config
themeConfig: {
navbar: {
title: 'My Project',
logo: {
alt: 'My Project Logo',
src: 'img/logo.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Docs',
},
{to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project`,
},
},
presets: [
[
'classic',
{
docs: {
sidebarPath: './sidebars.ts',
editUrl: 'https://github.com/facebook/docusaurus/tree/main/',
},
blog: {
showReadingTime: true,
editUrl: 'https://github.com/facebook/docusaurus/tree/main/',
},
theme: {
customCss: './src/css/custom.css',
},
},
],
],
};
export default config;
:::note
This is a note
:::
:::tip
This is a tip
:::
:::warning
This is a warning
:::
:::danger
This is a danger alert
:::
:::info Custom Title
This is an info box with a custom title
:::
\```typescript title="src/components/HelloWorld.tsx" showLineNumbers {1,3-5}
import React from 'react';
export function HelloWorld() {
return <h1>Hello World!</h1>;
}
\```
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="js" label="JavaScript">
\```js
const greeting = 'Hello';
\```
</TabItem>
<TabItem value="ts" label="TypeScript">
\```ts
const greeting: string = 'Hello';
\```
</TabItem>
</Tabs>
\```jsx live
function Clock() {
const [date, setDate] = useState(new Date());
useEffect(() => {
const timerID = setInterval(() => setDate(new Date()), 1000);
return () => clearInterval(timerID);
}, []);
return <div>{date.toLocaleTimeString()}</div>;
}
\```
// docusaurus.config.ts
plugins: [
// Multiple docs instances
[
'@docusaurus/plugin-content-docs',
{
id: 'api',
path: 'api',
routeBasePath: 'api',
sidebarPath: './sidebarsApi.ts',
},
],
// Sitemap
[
'@docusaurus/plugin-sitemap',
{
changefreq: 'weekly',
priority: 0.5,
},
],
// Google Analytics
[
'@docusaurus/plugin-google-gtag',
{
trackingID: 'G-XXXXXXXXXX',
anonymizeIP: true,
},
],
],
npm install @docusaurus/theme-mermaid
// docusaurus.config.ts
themes: ['@docusaurus/theme-mermaid'],
markdown: {
mermaid: true,
},
\```mermaid
graph TD
A[Start] -->|Process| B[End]
\```
themeConfig: {
algolia: {
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_SEARCH_API_KEY',
indexName: 'YOUR_INDEX_NAME',
},
},
npm install @easyops-cn/docusaurus-search-local
themes: [
[
require.resolve('@easyops-cn/docusaurus-search-local'),
{
hashed: true,
language: ['en', 'zh'],
},
],
],
npm run docusaurus docs:version 1.0.0
website/
├── docs/ # Current version (Next)
├── versioned_docs/
│ ├── version-1.0.0/ # Version 1.0.0
│ └── version-2.0.0/ # Version 2.0.0
├── versioned_sidebars/
│ ├── version-1.0.0-sidebars.json
│ └── version-2.0.0-sidebars.json
└── versions.json # List of versions
themeConfig: {
navbar: {
items: [
{
type: 'docsVersionDropdown',
position: 'right',
},
],
},
},
// docusaurus.config.ts
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr', 'es'],
localeConfigs: {
en: {
label: 'English',
},
fr: {
label: 'Français',
},
es: {
label: 'Español',
},
},
},
website/
├── i18n/
│ ├── en/
│ │ ├── docusaurus-plugin-content-docs/
│ │ └── docusaurus-theme-classic/
│ ├── fr/
│ └── es/
└── docs/ # Default locale content
npm run build -- --locale fr
// src/components/FeatureCard.tsx
import React from 'react';
import styles from './styles.module.css';
export function FeatureCard({title, description, icon}) {
return (
<div className={styles.featureCard}>
<div className={styles.icon}>{icon}</div>
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
---
title: Features
---
import {FeatureCard} from '@site/src/components/FeatureCard';
# Our Features
<FeatureCard
title="Fast"
description="Lightning-fast performance"
icon="⚡"
/>
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Build website
run: npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
# netlify.toml
[build]
command = "npm run build"
publish = "build"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
{
"buildCommand": "npm run build",
"outputDirectory": "build"
}
docs/
├── getting-started/
│ ├── installation.md
│ └── quick-start.md
├── guides/
│ ├── beginner/
│ ├── intermediate/
│ └── advanced/
└── reference/
├── api/
└── cli/
---
id: my-doc
title: My Document
sidebar_label: Short Label
sidebar_position: 1
description: Document description for SEO
keywords: [docusaurus, documentation, seo]
---
import MyComponent from '@site/src/components/MyComponent';
<MyComponent prop="value" />

<!-- Or with sizing -->
<img src={require('./img/photo.jpg').default} width="600" />
docs: {
editUrl: 'https://github.com/org/repo/edit/main/',
},
# Clear cache
npm run clear
npm run build
# Check for broken links during build
npm run build -- --debug
PORT=3001 npm start
Ask me about: