メニュー
Build modern documentation websites with Docusaurus. Covers docs, blog, pages, versioning, i18n, search integration, and deployment patterns. React-based with MDX support for interactive documentation.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/vamseeachanta/workspace-hub --skill docusaurusコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Write outbound email and external messages in Vamsee Achanta's voice — a subtle offer to help, never bold or rash claims. Load before drafting ANY email, LinkedIn/Collide reply, proposal note, or outreach sent under his name.
Save/publish analysis or computation results from ANY ecosystem repo to Hugging Face as a queryable, viewer-renderable dataset. Use when the user wants to "save results to hugging face", "publish dataset to HF", "hugging face data saving", "save analysis results", "hf dataset", "make results queryable", or "render via datasets-server API". Reshapes nested results into flat parquet tables, writes a dataset card with a viewer `configs:` block and provenance, applies license/public-vs-private routing, enforces a domain data-quality gate (faithful-to-source != correct), publishes to `aceengineer/<repo>-<projection>`, and verifies via the datasets-server API.
Clone, create, fork, configure, and manage GitHub repositories. Manage remotes, secrets, releases, and workflows. Works with gh CLI or falls back to git + GitHub REST API via curl.
SOC 職業分類に基づく
| name | docusaurus |
| description | Build modern documentation websites with Docusaurus. Covers docs, blog, pages, versioning, i18n, search integration, and deployment patterns. React-based with MDX support for interactive documentation. |
| version | 1.0.0 |
| category | documentation |
| type | skill |
| capabilities | ["React-based documentation sites","MDX for interactive content","Docs, blog, and pages","Multi-version documentation","Internationalization (i18n)","Algolia DocSearch integration","Plugin ecosystem","Theme customization","SEO optimization","GitHub Pages deployment"] |
| tools | ["docusaurus","node","npm","react","mdx","algolia"] |
| tags | ["documentation","react","static-site","mdx","versioning","i18n","search"] |
| platforms | ["linux","macos","windows"] |
| related_skills | ["mkdocs","sphinx","gatsby"] |
Build fast, optimized documentation websites with Docusaurus. This skill covers project setup, versioning, internationalization, and search integration.
# Create new Docusaurus project
npx create-docusaurus@latest my-website classic
# With TypeScript
npx create-docusaurus@latest my-website classic --typescript
cd my-website
npm start
my-website/
├── blog/ # Blog posts
├── docs/ # Documentation
│ ├── intro.md
│ └── tutorial-basics/
├── src/
│ ├── components/ # React components
│ ├── css/ # Custom styles
│ └── pages/ # Custom pages
├── static/ # Static assets
├── docusaurus.config.js # Main configuration
└── sidebars.js # Sidebar configuration
// docusaurus.config.js
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'My Project',
tagline: 'A powerful documentation framework',
favicon: 'img/favicon.ico',
: ,
: ,
: ,
: ,
: ,
: ,
: {
: ,
: [],
},
: [
[, {
: {
: ,
: ,
: ,
},
: {
: ,
: ,
},
: {
: ,
},
}],
],
: {
: {
: ,
: { : , : },
: [
{ : , : , : },
{ : , : },
{ : },
{ : , : },
],
},
: {
: ,
: [
{ : , : [{ : , : }] },
{ : , : [{ : , : }] },
],
: ,
},
: {
: ()..,
: ()..,
: [, , ],
},
},
};
. = config;
// sidebars.js
const sidebars = {
tutorialSidebar: [
'intro',
{
type: 'category',
label: 'Getting Started',
collapsed: false,
items: [
'getting-started/installation',
'getting-started/quick-start',
],
},
{
type: 'category',
label: 'Guides',
link: { type: 'doc', id: 'guides/index' },
items: ['guides/basic-usage', 'guides/advanced'],
},
{
type: 'category',
label: 'Examples',
items: [{ type: 'autogenerated', dirName: 'examples' }],
},
],
};
module.exports = sidebars;
<!-- docs/intro.md -->
---
id: intro
title: Introduction
sidebar_position: 1
description: Introduction to My Project
---
# Introduction
Welcome to **My Project** documentation!
## Quick Example
```javascript
import { MyProject } from 'my-project';
const project = new MyProject();
:::tip Did you know? You can use admonitions for callouts! :::
### 5. MDX and React Components
```jsx
// docs/interactive-example.mdx
---
id: interactive-example
title: Interactive Example
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Interactive Example
<Tabs>
<TabItem value="js" label="JavaScript" default>
```javascript
function hello() {
console.log('Hello!');
}
def hello():
print("Hello!")
export const Highlight = ({children, color}) => ( <span style={{ backgroundColor: color, padding: '0.2rem', borderRadius: '4px' }}> {children} );
This is highlighted text.
### 6. Admonitions
```markdown
:::note
This is a note.
:::
:::tip Pro Tip
Use tips for helpful suggestions.
:::
:::info
Informational content.
:::
:::caution
Warnings about potential issues.
:::
:::danger Critical
Critical warnings.
:::
:::note Custom Title
Admonition with custom title.
:::
<!-- blog/2024-01-15-release-v2.md -->
---
slug: release-v2
title: Releasing Version 2.0
authors:
- name: John Doe
title: Lead Developer
image_url: https://github.com/johndoe.png
tags: [release, announcement]
image: /img/blog/v2-release.png
---
# Releasing Version 2.0
We are excited to announce v2.0!
<!-- truncate -->
## What's New
- Feature 1
- Feature 2
## Migration Guide
See our [migration guide](/docs/migration/v2).
# Create a new version
npm run docusaurus docs:version 1.0
# Creates:
# - versioned_docs/version-1.0/
# - versioned_sidebars/version-1.0-sidebars.json
# - versions.json
// docusaurus.config.js
module.exports = {
presets: [['@docusaurus/preset-classic', {
docs: {
lastVersion: 'current',
versions: {
current: { label: '2.0 (Next)', path: 'next' },
'1.0': { label: '1.0', path: '1.0' },
},
},
}]],
};
// docusaurus.config.js
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr', 'de'],
localeConfigs: {
en: { label: 'English', htmlLang: 'en-US' },
fr: { label: 'Francais', htmlLang: 'fr-FR' },
},
},
};
# Generate translation files
npm run write-translations -- --locale fr
# Copy docs to translate
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current
cp -r docs/* i18n/fr/docusaurus-plugin-content-docs/current/
# Start in French
npm run start -- --locale fr
// docusaurus.config.js
module.exports = {
themeConfig: {
algolia: {
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_SEARCH_API_KEY',
indexName: 'your_index_name',
contextualSearch: true,
},
},
};
# Alternative: Local search plugin
npm install @easyops-cn/docusaurus-search-local
/* src/css/custom.css */
:root {
--ifm-color-primary: #2e8555;
--ifm-code-font-size: 95%;
--ifm-font-family-base: 'Inter', sans-serif;
}
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
}
.navbar { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [main]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- run: npm ci
- run: npm run build
- uses: actions/upload-pages-artifact@v3
with:
path: build
deploy:
environment:
name: github-pages
runs-on: ubuntu-latest
needs: build
steps:
- uses: actions/deploy-pages@v4
# Manual deployment
npm run build
npm run deploy
// vercel.json
{
"buildCommand": "npm run build",
"outputDirectory": "build",
"framework": "docusaurus-2"
}
# netlify.toml
[build]
command = "npm run build"
publish = "build"
npm install typedoc docusaurus-plugin-typedoc
module.exports = {
plugins: [
['docusaurus-plugin-typedoc', {
entryPoints: ['../src/index.ts'],
tsconfig: '../tsconfig.json',
out: 'api',
}],
],
};
npm install docusaurus-plugin-openapi-docs docusaurus-theme-openapi-docs
module.exports = {
plugins: [
['docusaurus-plugin-openapi-docs', {
id: 'openapi',
config: {
petstore: {
specPath: 'api/openapi.yaml',
outputDir: 'docs/api',
},
},
}],
],
themes: ['docusaurus-theme-openapi-docs'],
};
docs/
├── intro.md
├── getting-started/
│ ├── _category_.json
│ ├── installation.md
│ └── quick-start.md
├── guides/
│ ├── _category_.json
│ ├── index.md
│ └── advanced.md
├── api/
│ └── reference.md
├── faq.md
└── changelog.md
// docs/getting-started/_category_.json
{
"label": "Getting Started",
"position": 1,
"collapsible": true,
"collapsed": false
}
---
title: My Page | Brand Name
description: Description for search engines (150-160 chars)
keywords: [keyword1, keyword2]
image: /img/og/my-page.png
---
---
id: unique-id
title: Clear Title
sidebar_label: Short Label
description: SEO description
---
# Page Title (H1 - only one)
## Section (H2)
### Subsection (H3)
:::tip Best Practice
Use admonitions appropriately.
:::
See also: [Related Page](./related.md)
rm -rf node_modules .docusaurus build
npm install
npm run build
npm run clear
npm run start
module.exports = {
onBrokenLinks: 'warn', // Change from 'throw' for debugging
};
npm run build -- --locale en
npm run write-translations -- --locale fr
DEBUG=docusaurus* npm run build
npm run start -- --port 3001
// Check Algolia configuration
module.exports = {
themeConfig: {
algolia: {
appId: 'YOUR_APP_ID', // Not the API key
apiKey: 'SEARCH_ONLY_KEY', // Search-only API key
indexName: 'your_index',
debug: true, // Enable debug mode
},
},
};
// Ensure versions.json exists and navbar is configured
module.exports = {
themeConfig: {
navbar: {
items: [
{ type: 'docsVersionDropdown', position: 'right' },
],
},
},
};
// src/pages/index.js
import React from 'react';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={styles.heroBanner}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<a className="button button--primary button--lg" href="/docs/intro">
Get Started
</a>
</div>
</div>
</header>
);
}
export default function Home() {
return (
<Layout title="Home" description="Welcome to our documentation">
<HomepageHeader />
<main>
<section className={styles.features}>
<div className="container">
<div className="row">
<Feature title="Easy to Use" description="Simple setup and configuration" />
<Feature title="Powerful" description="Full React and MDX support" />
<Feature title="Fast" description="Optimized for performance" />
</div>
</div>
</section>
</main>
</Layout>
);
}
// plugins/my-plugin/index.js
module.exports = function myPlugin(context, options) {
return {
name: 'my-plugin',
async loadContent() {
return { data: 'example' };
},
async contentLoaded({ content, actions }) {
const { createData, addRoute } = actions;
const dataPath = await createData('my-data.json', JSON.stringify(content));
addRoute({
path: '/custom-page',
component: '@site/src/components/CustomPage',
modules: { data: dataPath },
exact: true,
});
},
configureWebpack(config, isServer) {
return {
resolve: {
alias: { '@data': path.resolve(__dirname, 'data') },
},
};
},
};
};
Build blazing-fast documentation websites with React and MDX.