Claude Code CLI Guide - Project Documentation

Complete technical documentation for the Claude Code CLI tutorial website.

Project Overview

Property	Value
Project Name	Claude Code CLI Guide
Live URL	https://cc.kunsttrans.hr
Purpose	Interactive tutorial guide for Claude Code CLI
Target Audience	Developers learning Claude Code CLI
Technology Stack	MkDocs + Material Theme
Hosting	Apache on Ubuntu Linux

Quick Start

Local Development

# Clone/navigate to project
cd /root/claude-n8n/claude-howto

# Install MkDocs (if not installed)
pip3 install mkdocs-material

# Serve locally with hot reload
mkdocs serve

# Access at http://localhost:8000

Build & Deploy

# Build static site
mkdocs build

# Deploy to production
sudo cp -r site/* /var/www/cc.kunsttrans.hr/

---

Project Structure

claude-howto/
├── mkdocs.yml                    # MkDocs configuration
├── README.md                     # Project README (also in docs/)
├── CLAUDE.md                     # Claude Code context file
├── PROJECT-DOCUMENTATION.md      # This file
├── APPENDIX-CHEATSHEET.md        # CLI command reference
│
├── docs/                         # MkDocs source (deployed content)
│   ├── index.md                  # Homepage
│   ├── APPENDIX-CHEATSHEET.md    # Cheat sheet
│   ├── assets/                   # Static assets
│   │   └── claude-logo.svg       # Site logo
│   ├── stylesheets/
│   │   └── extra.css             # Custom CSS (video styling)
│   ├── tutorials/                # Tutorial content
│   │   ├── 01-beginner/          # 4 tutorials
│   │   ├── 02-intermediate/      # 4 tutorials
│   │   ├── 03-advanced/          # 4 tutorials
│   │   └── 04-expert/            # 8 tutorials
│   └── exercises/                # Hands-on exercises
│       ├── 01-hello-claude/
│       ├── 02-bug-hunter/
│       └── 03-auto-reviewer/
│
├── tutorials/                    # Backup/source tutorials
├── exercises/                    # Backup/source exercises
│
├── site/                         # Built static site (gitignored)
│
└── .claude/
    └── settings.local.json       # Claude Code local settings

---

Content Inventory

Tutorials (20 total)

Level 1: Beginner (4 tutorials)

File	Title	Topics
01-getting-started.md	Installation & Setup	npm install, authentication, first session
02-basic-commands.md	Basic Commands	Session commands, navigation, help
03-file-operations.md	File Operations	Read, write, edit files
04-asking-questions.md	Effective Prompting	How to ask Claude effectively

Level 2: Intermediate (4 tutorials)

File	Title	Topics
01-code-exploration.md	Code Exploration	Navigating codebases, grep, glob
02-debugging.md	Debugging	Finding and fixing bugs
03-git-workflows.md	Git Workflows	Commits, branches, PRs
04-testing.md	Testing	Writing and running tests

Level 3: Advanced (4 tutorials)

File	Title	Topics
01-custom-commands.md	Custom Commands	Creating slash commands
02-hooks.md	Hooks	Lifecycle automation
03-mcp-servers.md	MCP Servers	Model Context Protocol
04-multi-agent.md	Multi-Agent	Subagent patterns

Level 4: Expert (8 tutorials)

File	Title	Topics
01-sdk-integration.md	SDK Integration	Claude Agent SDK
02-enterprise-patterns.md	Enterprise Patterns	Team workflows, governance
03-performance.md	Performance	Context management, costs
04-n8n-integration.md	n8n Integration	Workflow automation
05-development-environment.md	Dev Environment	Terminal, tools, IDE
06-toolchain-integration.md	Toolchain	CI/CD, databases, APIs
07-debugging-mastery.md	Debug Mastery	TDD, troubleshooting
08-cli-power-user.md	CLI Power User	Advanced CLI techniques

Exercises (3 total)

Exercise	Level	Description
01-hello-claude	Beginner	First Claude Code project
02-bug-hunter	Intermediate	Debug a buggy Node.js app
03-auto-reviewer	Advanced	Build code review automation

---

Video Resources

Each tutorial includes: - 1 Featured Video - Embedded YouTube iframe - 5 Additional Resources - Links table with icons

Video Sources Used

Channel	Subscribers	Videos Used
NetworkChuck	3.6M	AI in Terminal (primary)
Fireship	3M+	MCP explanation
freeCodeCamp	10M+	n8n tutorial
GitHub Official	-	TDD with Copilot
All About AI	-	Claude Code tutorials
Edmund Yong	-	800+ Hours Claude Code

Video IDs Reference

MsQACpcuTkU - NetworkChuck: AI in the Terminal
HyzlYwjoXOQ - Fireship: MCP Explained
GIZzRGYpCbM - freeCodeCamp: n8n Tutorial
n0NlxUyA7FI - GitHub: TDD with Copilot
U_vwfQBhVSY - All About AI: Claude Code Beginners
qsdikjJmg08 - All About AI: MCP Workflows
Ffh9OeJ7yxw - Edmund Yong: 800+ Hours Claude Code

---

Configuration Files

mkdocs.yml

site_name: Claude Code CLI Guide
site_url: https://cc.kunsttrans.hr

theme:
  name: material
  palette:
    - scheme: default (light mode)
    - scheme: slate (dark mode)
  primary: deep purple
  accent: amber
  features:
    - navigation.instant
    - navigation.tabs
    - navigation.sections
    - search.suggest
    - content.code.copy
  logo: assets/claude-logo.svg
  favicon: assets/claude-logo.svg

plugins:
  - search

markdown_extensions:
  - pymdownx.highlight
  - pymdownx.superfences
  - admonition
  - tables
  - attr_list
  - md_in_html

Custom CSS (extra.css)

Provides: - Responsive video container (16:9 aspect ratio) - Video shadow and rounded corners - Dark mode adjustments - Resource list styling

---

Server Configuration

Production Server

Property	Value
Server	Apache2 on Ubuntu
Document Root	/var/www/cc.kunsttrans.hr/
SSL	Let's Encrypt (certbot)
Domain	cc.kunsttrans.hr

Apache Virtual Host

<VirtualHost *:443>
    ServerName cc.kunsttrans.hr
    DocumentRoot /var/www/cc.kunsttrans.hr

    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/cc.kunsttrans.hr/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/cc.kunsttrans.hr/privkey.pem
</VirtualHost>

---

Deployment Process

Standard Deployment

# 1. Make changes to docs/ files

# 2. Build the site
cd /root/claude-n8n/claude-howto
mkdocs build

# 3. Deploy to server
sudo cp -r site/* /var/www/cc.kunsttrans.hr/

# 4. Verify
curl -s https://cc.kunsttrans.hr/ | head -20

Full Rebuild (if needed)

# Clean build
rm -rf site/
mkdocs build
sudo cp -r site/* /var/www/cc.kunsttrans.hr/

---

Maintenance Guide

Adding a New Tutorial

1. Create markdown file in appropriate docs/tutorials/XX-level/ directory
2. Follow naming: NN-topic-name.md
3. Include standard sections:
4. H1 title
5. "What You'll Learn" list
6. Content with examples
7. "Try It Yourself" exercise
8. "What's Next?" link
9. "Learning Resources" with video + table
10. Add to mkdocs.yml nav section
11. Rebuild and deploy

Tutorial Template

# Tutorial Title

Description of what this tutorial covers.

## What You'll Learn

- Point 1
- Point 2
- Point 3

## Section 1

Content...

## Section 2

Content...

## Try It Yourself

### Exercise

Instructions...

## What's Next?

Link to next tutorial.

---

**Summary:**
- Key point 1
- Key point 2

---

## Learning Resources

### Featured Video

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

**Channel: Video Title** *(subscriber count)*

Description.

### Additional Resources

| Type | Resource | Description |
|------|----------|-------------|
| Video | <a href="URL" target="_blank">Title</a> | Description |
| Official Docs | <a href="URL" target="_blank">Title</a> | Description |
| Tutorial | <a href="URL" target="_blank">Title</a> | Description |
| Free Course | <a href="URL" target="_blank">Title</a> | Description |
| Commercial | <a href="URL" target="_blank">Title</a> | Description |

Updating Videos

1. Find new video on YouTube
2. Extract video ID from URL: youtube.com/watch?v=VIDEO_ID
3. Update iframe src: https://www.youtube.com/embed/VIDEO_ID
4. Update title and description
5. Rebuild and deploy

Common Issues

Issue	Solution
Video not showing	Check video ID, ensure video is public
Styles not applying	Check extra.css is in docs/stylesheets/
Links not opening in new tab	Add target="_blank" to anchor tags
Navigation not updating	Check mkdocs.yml nav section
Build warnings	Usually safe to ignore INFO messages

---

File Locations Summary

Purpose	Location
Project root	/root/claude-n8n/claude-howto/
Source content	/root/claude-n8n/claude-howto/docs/
Configuration	/root/claude-n8n/claude-howto/mkdocs.yml
Custom CSS	/root/claude-n8n/claude-howto/docs/stylesheets/extra.css
Logo	/root/claude-n8n/claude-howto/docs/assets/claude-logo.svg
Built site	/root/claude-n8n/claude-howto/site/
Production	/var/www/cc.kunsttrans.hr/

---

Technology Reference

MkDocs Material Theme

• Documentation: https://squidfunk.github.io/mkdocs-material/
• Features used: Dark mode, tabs, search, code copy
• Version: Latest (pip installed)

YouTube Embed

Standard iframe format:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Title"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

External Links

Use target="_blank" for all external links:

<a href="https://example.com" target="_blank">Link Text</a>

---

Changelog

December 2024

• Initial project creation
• 20 tutorials (Beginner to Expert)
• 3 hands-on exercises
• Embedded video tutorials for all topics
• Deployed to https://cc.kunsttrans.hr
• Added Claude logo
• Complete documentation

---

Contact & Support

• Claude Code Official: https://docs.anthropic.com/en/docs/claude-code
• GitHub Issues: https://github.com/anthropics/claude-code/issues
• Anthropic: https://anthropic.com

---

Documentation generated December 2024