Loading...
Loading...
Build project documentation sites with MkDocs static site generator. USE WHEN user mentions mkdocs, documentation site, docs site, project documentation, OR wants to create, configure, build, or deploy documentation using Markdown. Covers installation, configuration, theming, plugins, and deployment.
npx skill4agent add julianobarbosa/claude-code-skills mkdocsmkdocs.yml# Install MkDocs
pip install mkdocs
# Verify installation
mkdocs --version# Create project structure
mkdocs new my-project
cd my-project
# Start development server
mkdocs servemy-project/
├── mkdocs.yml # Configuration file
└── docs/
└── index.md # Homepage# mkdocs.yml
site_name: My Project
site_url: https://example.com/
nav:
- Home: index.md
- About: about.md| Command | Purpose |
|---|---|
| Create new project |
| Start dev server (localhost:8000) |
| Build static site to |
| Deploy to GitHub Pages |
| Show required packages |
-f, --config-file FILE-s, --strict-d, --site-dir DIR--dirty--cleanproject/
├── mkdocs.yml # Configuration (required)
├── docs/
│ ├── index.md # Homepage
│ ├── about.md # Additional pages
│ ├── user-guide/
│ │ ├── index.md # Section homepage
│ │ ├── getting-started.md
│ │ └── configuration.md
│ ├── img/ # Images
│ │ └── logo.png
│ └── css/ # Custom CSS
│ └── extra.css
└── custom_theme/ # Theme customizations (optional)
└── main.html# Automatic navigation (alphabetically sorted)
# Omit nav key to auto-generate
# Explicit navigation with sections
nav:
- Home: index.md
- User Guide:
- Getting Started: user-guide/getting-started.md
- Configuration: user-guide/configuration.md
- API Reference: api/
- External Link: https://example.com/# Link to another page
[See Configuration](configuration.md)
# Link to page in another directory
[Installation](../getting-started/installation.md)
# Link to section anchor
[See Options](configuration.md#options)---
title: Custom Page Title
description: Page description for SEO
authors:
- John Doe
date: 2024-01-01
---
# Page Content Here```python
def hello():
print("Hello, World!")
```| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1 | Cell 2 |# Default MkDocs theme
theme:
name: mkdocs
color_mode: auto # light, dark, auto
user_color_mode_toggle: true
nav_style: primary # primary, dark, light
highlightjs: true
navigation_depth: 2
locale: en
# ReadTheDocs theme
theme:
name: readthedocs
prev_next_buttons_location: bottom
navigation_depth: 4
collapse_navigation: truepip install mkdocs-materialtheme:
name: material
palette:
primary: indigo
accent: indigo
features:
- navigation.tabs
- navigation.sections
- search.suggestextra_css:
- css/extra.css
extra_javascript:
- js/extra.js
- path: js/analytics.mjs
type: moduleplugins:
- search:
lang: en
min_search_length: 3
- tags
- blogsearchblogtagssocialNote: Definingdisables defaults. Addpluginsexplicitly.- search
markdown_extensions:
- toc:
permalink: true
separator: "-"
- tables
- fenced_code
- admonition
- pymdownx.highlight
- pymdownx.superfences# Deploy to gh-pages branch
mkdocs gh-deploy
# With options
mkdocs gh-deploy --force --message "Deploy docs"# Build static files
mkdocs build
# Files output to site/ directory
# Upload to any static hostdocs/CNAMEdocs.example.commkdocs new my-docsmkdocs.ymldocs/mkdocs servemkdocs buildmkdocs gh-deployBash(mkdocs build --dry-run)Bash(mkdocs serve -v)docs/new-section/index.mdnavmkdocs.ymltheme.custom_dir: custom_theme/Bash(which mkdocs || echo "Install: pip install mkdocs")Bash(mkdocs build --dry-run)Grep -r "ERROR" site/