简体中文 · English · 日本語 · 한국어 · Español · Français · Deutsch · Português · Русский · 繁體中文

• ❌ Official docs lag behind, following tutorials but can't get it working?
• ❌ Online tutorials are just copy-paste, code won't run?
• ❌ Encounter errors, search everywhere but can't find solutions?
• ❌ Want to advance, but can't find practical guidance diving into source code?

OpenCodeDocs is specifically designed to solve these problems.

Not copied from the internet, but core logic derived from real source code

We deeply analyze open source project source code, ensuring every line of code passes automated verification. Tutorials specify the exact Git Commit version, so you know exactly which version the code is based on.

When tools update, tutorials update automatically

When projects release new versions, our tutorials update synchronously. You don't need to worry about outdated tutorials—always learn the latest content.

💡 Our tutorials are rapidly updating, continuously adding more high-quality projects!

Chinese, English, Japanese, Korean, Spanish, French, German, Portuguese, Russian, Traditional Chinese...

No matter where you're from, learn AI tools in your native language.

Follow along, succeed on the first try, no guessing, no trial and error

Every step of our tutorials is verified, from installation to deployment. Just follow along and it will work. No frustration, no pitfalls, no detours.

Can't install? Can't configure? Don't worry, we have step-by-step tutorials

• Zero knowledge needed to get started
• Detailed explanations for every step
• Solutions for common errors

Want to advance? Let's dive deep into source code

• Multi-account rotation techniques
• Token-saving secrets
• Agent automation in practice
• Deep analysis at source code level

Need unified standards for team collaboration?

• Reusable best practices
• Complete project structure
• Production deployment guide

git clone https://github.com/vbgate/opencodedocs.git
cd opencodedocs/site

npm install

npm run dev

Visit http://localhost:5173 and start your AI tool learning journey! 🎉

💡 Tip: You can also visit opencodedocs.com to view online documentation.

site/
├── docs/                      # Documentation root
│   ├── zh/                    # Chinese tutorials 🇨🇳
│   ├── en/                    # English tutorials 🇺🇸
│   ├── ja/                    # Japanese tutorials 🇯🇵
│   ├── ko/                    # Korean tutorials 🇰🇷
│   ├── es/                    # Spanish tutorials 🇪🇸
│   ├── fr/                    # French tutorials 🇫🇷
│   ├── de/                    # German tutorials 🇩🇪
│   ├── pt/                    # Portuguese tutorials 🇵🇹
│   ├── ru/                    # Russian tutorials 🇷🇺
│   ├── zh-tw/                 # Traditional Chinese tutorials 🇹🇼
│   ├── .vitepress/            # VitePress configuration
│   │   ├── config.mts         # Main config file
│   │   ├── sidebar.config.ts  # Sidebar auto-generation
│   │   └── theme/             # Custom theme components
│   ├── about.md               # About us
│   └── terms.md               # Terms of service
├── scripts/                   # Utility scripts
│   ├── add-order-to-md.ts     # Add order field
│   ├── check-frontmatter.ts   # Check Frontmatter
│   └── create-category-indexes.ts  # Create category indexes
├── package.json               # Project configuration
├── tailwind.config.js         # Tailwind CSS configuration
└── postcss.config.js          # PostCSS configuration

Technology	Version	Description
	1.x	Static site generator · Lightning-fast builds
	3.4+	Frontend framework · Composition API
	4.x	Styling system · CSS-first configuration
	5.9+	Type safety · Compile-time checking
	11.x	Diagram support · Flowchart visualization
	Pages	Global CDN · 200+ edge nodes

1. Create directory structure

   docs/zh/[owner]/[repo]/
   ├── index.md          # Project homepage
   ├── start/            # Quick start
   ├── features/         # Feature introduction
   └── faq/              # FAQ
   

2. Write Frontmatter

   ---
   title: "Tutorial Title"              # 2-6 Chinese characters or 4-12 English words
   order: 10                            # Sort order (10, 20, 30...)
   sidebarTitle: "Sidebar Title"        # Optional
   description: "SEO description"       # Search engine optimization
   ---

3. Verify Build

   npm run docs:build

Add project in docs/.vitepress/sidebar.config.ts:

const projects = [
  'owner/repo',  // Add your project
]

Then translate home-config.[lang].json files.

• Component location: docs/.vitepress/theme/components/
• Style file: docs/.vitepress/theme/custom.css
• Tailwind v4: Use CSS-first configuration

npm run docs:build

Build output is located in docs/.vitepress/dist/ directory.

# Auto deploy
npm run deploy

npm run docs:preview

• Image optimization: Use WebP format, compress under 200KB
• Code splitting: VitePress automatically splits by route
• CDN acceleration: Static assets automatically uploaded to Cloudflare CDN
• Prerendering: Core pages prerendered, first-screen load < 500ms

✅ Our site is deployed on a global CDN with lightning-fast access speed!

We welcome community contributions! Submit your tutorials, fix bugs, add new features.

1. Fork this repository

   # Click the Fork button on GitHub page

2. Create feature branch

   git checkout -b feature/amazing-feature

3. Commit changes

   git commit -m 'Add amazing feature'

4. Push to branch

   git push origin feature/amazing-feature

5. Submit Pull Request

   • Click the "Pull Request" button on GitHub
   • Fill in PR description, explain your changes

🌟 Your contribution will help developers worldwide better use AI tools!

Want high-quality tutorials for your project? Just 3 steps!

Step 1: Submit Issue

1. Visit GitHub Issues
2. Click "New Issue"
3. Use the following template:

**Project Name**: [Project Name]
**GitHub Repository**: https://github.com/[owner]/[repo]
**Project Description**: [1-2 sentences describing project purpose]
**Target Audience**: [Beginner/Intermediate/Expert/All]
**Tutorial Language**: [Chinese/English/Other]
**Notes**: [Additional information]

Step 2: Team Review

• We review your application within 1-3 business days
• Evaluate whether the project is suitable for inclusion
• Confirm project source code quality and activity

Step 3: Tutorial Launch

• After approval, we automatically generate tutorials
• Verify runnable nature of every step
• Publish to official website, support multiple languages

• Review cycle: 1-3 business days
• Tutorial generation: 3-7 business days
• Launch time: Immediately published after approval

Q: What types of projects are suitable for inclusion? A: Open source AI tools, development tools, libraries, frameworks, etc. Must have certain technical depth and usage value.

Q: Are tutorials free? A: Yes, our tutorials are completely free and will be continuously updated and maintained.

Q: Can I specify tutorial language? A: Yes, we support 10 languages. You can specify needed language in Issue.

🎯 Submit now: Create Issue →

MIT License

CC-BY-NC-SA 4.0

Attribution - NonCommercial - ShareAlike

✅ You can:

• 📋 Share: Freely share and adapt
• 🔧 Modify: Create derivative works based on tutorial content
• 👥 Contribute: Submit your improvements

❌ You cannot:

• 💰 Commercial use: Unauthorized use for commercial purposes is prohibited

💡 If you want to use tutorials for commercial purposes, please contact us: vbgatecom@gmail.com

Any questions or suggestions? Feel free to contact us!

• 📧 Email: vbgatecom@gmail.com
• 🐦 Twitter: @codingzys
• 💻 GitHub: vbgate/opencodedocs
• 📥 Submit Tutorial: GitHub Issues
• 🌐 Website: opencodedocs.com