@knowcode/doc-builder 1.5.15 → 1.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,667 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Generated: 2025-01-22 UTC">
7
+ <title>Windows Setup Guide for Claude Code &amp; @knowcode/do...</title>
8
+
9
+ <meta name="author" content="Lindsay Smith">
10
+ <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, code">
11
+ <meta name="robots" content="index, follow">
12
+ <link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/windows-setup-guide.html">
13
+
14
+ <!-- Open Graph / Facebook -->
15
+ <meta property="og:type" content="article">
16
+ <meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/windows-setup-guide.html">
17
+ <meta property="og:title" content="Windows Setup Guide for Claude Code &amp; @knowcode/do...">
18
+ <meta property="og:description" content="Generated: 2025-01-22 UTC">
19
+ <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
20
+ <meta property="og:site_name" content="Doc Builder">
21
+ <meta property="og:locale" content="en_US">
22
+
23
+ <!-- Twitter Card -->
24
+ <meta name="twitter:card" content="summary_large_image">
25
+ <meta name="twitter:site" content="@planbbackups">
26
+ <meta name="twitter:creator" content="@planbbackups">
27
+ <meta name="twitter:title" content="Windows Setup Guide for Claude Code &amp; @knowcode/do...">
28
+ <meta name="twitter:description" content="Generated: 2025-01-22 UTC">
29
+ <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
30
+
31
+ <!-- Custom Meta Tags -->
32
+ <meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
33
+
34
+ <!-- Fonts -->
35
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
36
+
37
+ <!-- Icons -->
38
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
39
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
40
+
41
+ <!-- Mermaid -->
42
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
43
+
44
+ <!-- Styles -->
45
+ <link rel="stylesheet" href="/css/notion-style.css">
46
+
47
+ <!-- Favicon -->
48
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
49
+
50
+ <script type="application/ld+json">
51
+ {
52
+ "@context": "https://schema.org",
53
+ "@type": "TechArticle",
54
+ "headline": "Windows Setup Guide for Claude Code & @knowcode/doc-builder",
55
+ "description": "Generated: 2025-01-22 UTC",
56
+ "author": {
57
+ "@type": "Person",
58
+ "name": "Lindsay Smith"
59
+ },
60
+ "publisher": {
61
+ "@type": "Organization",
62
+ "name": "Knowcode Ltd",
63
+ "url": "https://knowcode.tech"
64
+ },
65
+ "datePublished": "2025-07-22T15:31:48.178Z",
66
+ "dateModified": "2025-07-22T15:31:48.178Z",
67
+ "mainEntityOfPage": {
68
+ "@type": "WebPage",
69
+ "@id": "https://doc-builder-delta.vercel.app/guides/windows-setup-guide.html"
70
+ },
71
+ "breadcrumb": {
72
+ "@type": "BreadcrumbList",
73
+ "itemListElement": [
74
+ {
75
+ "@type": "ListItem",
76
+ "position": 1,
77
+ "name": "Doc Builder",
78
+ "item": "https://doc-builder-delta.vercel.app"
79
+ },
80
+ {
81
+ "@type": "ListItem",
82
+ "position": 2,
83
+ "name": "Guides",
84
+ "item": "https://doc-builder-delta.vercel.app/guides/"
85
+ },
86
+ {
87
+ "@type": "ListItem",
88
+ "position": 3,
89
+ "name": "Windows Setup Guide",
90
+ "item": "https://doc-builder-delta.vercel.app/guides/windows-setup-guide.html"
91
+ }
92
+ ]
93
+ }
94
+ }
95
+ </script>
96
+ </head>
97
+ <body>
98
+ <!-- Header -->
99
+ <header class="header">
100
+ <div class="header-content">
101
+ <a href="/index.html" class="logo">Doc Builder</a>
102
+
103
+ <div class="header-actions">
104
+ <div class="deployment-info">
105
+ <span class="deployment-date" title="Built with doc-builder v1.5.16">Last updated: Jul 22, 2025, 03:31 PM UTC</span>
106
+ </div>
107
+
108
+
109
+
110
+ <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
111
+ <i class="fas fa-moon"></i>
112
+ </button>
113
+
114
+ <button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
115
+ <i class="fas fa-bars"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </header>
120
+
121
+ <!-- Preview Banner -->
122
+ <div id="preview-banner" class="preview-banner">
123
+ <div class="banner-content">
124
+ <i class="fas fa-exclamation-triangle banner-icon"></i>
125
+ <span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
126
+ <button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
127
+ <i class="fas fa-times"></i>
128
+ </button>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Breadcrumbs -->
133
+ <nav class="breadcrumbs" id="breadcrumbs">
134
+ <!-- Breadcrumbs will be generated by JavaScript -->
135
+ </nav>
136
+
137
+ <!-- Main Content -->
138
+ <div class="main-wrapper">
139
+ <!-- Sidebar -->
140
+ <aside class="sidebar">
141
+ <div class="sidebar-header">
142
+ <div class="filter-box">
143
+ <input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
144
+ <i class="fas fa-search filter-icon"></i>
145
+ </div>
146
+ </div>
147
+ <nav class="navigation">
148
+
149
+ <div class="nav-section" data-level="0">
150
+ <a class="nav-title" href="/README.html" >
151
+ <i class="fas fa-home"></i> Documentation
152
+ </a>
153
+ <div class="nav-content" >
154
+ <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
155
+ <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
156
+ <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
157
+ <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the streamlined Vercel deployment process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
158
+ <div class="nav-section" data-level="1">
159
+ <a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
160
+ <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
161
+ </a>
162
+ <div class="nav-content" id="nav-guides-1">
163
+ <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
164
+ <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
165
+ <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
166
+ <a href="/guides/google-site-verification-guide.html" class="nav-item" data-tooltip="Google Search Console verification allows you to: Monitor your site&#039;s performance in Google Search Submit sitemaps for better indexing View search..."><i class="fas fa-file-alt"></i> Google Site Verification Guide</a>
167
+ <a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
168
+ <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
169
+ <a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
170
+ <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a>
171
+ <a href="/guides/windows-setup-guide.html" class="nav-item active" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="fas fa-file-alt"></i> Windows Setup Guide</a></div></div>
172
+ </nav>
173
+ <div class="resize-handle"></div>
174
+ </aside>
175
+
176
+ <!-- Content Area -->
177
+ <main class="content">
178
+ <div class="content-inner">
179
+ <h1>Windows Setup Guide for Claude Code &amp; @knowcode/doc-builder</h1>
180
+ <p><strong>Generated</strong>: 2025-01-22 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: <i class="ph ph-check-circle" aria-label="checked"></i></p>
181
+ <h2>Overview</h2>
182
+ <p>This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel. Based on real troubleshooting experience, this guide addresses common Windows-specific challenges and provides clear solutions.</p>
183
+ <h2>Quick Prerequisites Overview</h2>
184
+ <p><strong>Required Accounts:</strong></p>
185
+ <ul>
186
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Claude Pro or Max</strong> subscription ($20-200/month) - <a href="https://claude.ai">claude.ai</a></li>
187
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Vercel</strong> account (free Hobby plan) - <a href="https://vercel.com">vercel.com</a></li>
188
+ <li><i class="ph ph-star" aria-label="star"></i> <strong>GitHub</strong> account (optional but recommended) - <a href="https://github.com">github.com</a></li>
189
+ </ul>
190
+ <p><strong>Required Software:</strong></p>
191
+ <ul>
192
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Windows 10/11 with Administrator access</li>
193
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Node.js 14+ and npm - <a href="https://nodejs.org">nodejs.org</a></li>
194
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Git for Windows - <a href="https://gitforwindows.org">gitforwindows.org</a></li>
195
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> PowerShell 5.1+ (included with Windows)</li>
196
+ <li><i class="ph ph-star" aria-label="star"></i> Visual Studio Code (recommended) - <a href="https://code.visualstudio.com">code.visualstudio.com</a></li>
197
+ </ul>
198
+ <h2>The Three-Part System</h2>
199
+ <p>Understanding the conceptual separation is crucial:</p>
200
+ <table>
201
+ <tr>
202
+ <td width="33%">
203
+
204
+ <h3>1. Claude Code</h3>
205
+ <p><strong>Purpose</strong>: Create markdown content<br><strong>What it does</strong>: AI-powered content generation<br><strong>Output</strong>: <code>.md</code> files with documentation</p>
206
+ </td>
207
+ <td width="33%">
208
+
209
+ <h3>2. doc-builder</h3>
210
+ <p><strong>Purpose</strong>: Convert MD to HTML<br><strong>What it does</strong>: Beautiful static site generation<br><strong>Output</strong>: Styled HTML website</p>
211
+ </td>
212
+ <td width="33%">
213
+
214
+ <h3>3. Vercel</h3>
215
+ <p><strong>Purpose</strong>: Host the website<br><strong>What it does</strong>: Free web hosting<br><strong>Output</strong>: Live URL for your docs</p>
216
+ </td>
217
+ </tr>
218
+ </table>
219
+
220
+ <h2>Complete Prerequisites Summary</h2>
221
+ <h3>Required Accounts</h3>
222
+ <table>
223
+ <thead>
224
+ <tr>
225
+ <th>Service</th>
226
+ <th>Purpose</th>
227
+ <th>Requirements</th>
228
+ <th>Sign Up Link</th>
229
+ </tr>
230
+ </thead>
231
+ <tbody><tr>
232
+ <td><strong>Claude</strong></td>
233
+ <td>AI content generation</td>
234
+ <td>Pro ($20/mo) or Team ($30/mo) plan</td>
235
+ <td><a href="https://claude.ai">claude.ai</a></td>
236
+ </tr>
237
+ <tr>
238
+ <td><strong>Vercel</strong></td>
239
+ <td>Free web hosting</td>
240
+ <td>Free Hobby account sufficient</td>
241
+ <td><a href="https://vercel.com">vercel.com</a></td>
242
+ </tr>
243
+ <tr>
244
+ <td><strong>GitHub</strong></td>
245
+ <td>Version control (optional)</td>
246
+ <td>Free account for Vercel integration</td>
247
+ <td><a href="https://github.com">github.com</a></td>
248
+ </tr>
249
+ </tbody></table>
250
+ <h3>Software Requirements</h3>
251
+ <table>
252
+ <thead>
253
+ <tr>
254
+ <th>Software</th>
255
+ <th>Version</th>
256
+ <th>Purpose</th>
257
+ <th>Required?</th>
258
+ </tr>
259
+ </thead>
260
+ <tbody><tr>
261
+ <td><strong>Windows</strong></td>
262
+ <td>10 or 11</td>
263
+ <td>Operating system</td>
264
+ <td><i class="ph ph-check-circle" aria-label="checked"></i> Required</td>
265
+ </tr>
266
+ <tr>
267
+ <td><strong>Node.js</strong></td>
268
+ <td>14.0+</td>
269
+ <td>JavaScript runtime</td>
270
+ <td><i class="ph ph-check-circle" aria-label="checked"></i> Required</td>
271
+ </tr>
272
+ <tr>
273
+ <td><strong>npm</strong></td>
274
+ <td>(included)</td>
275
+ <td>Package manager</td>
276
+ <td><i class="ph ph-check-circle" aria-label="checked"></i> Required</td>
277
+ </tr>
278
+ <tr>
279
+ <td><strong>Git</strong></td>
280
+ <td>Latest</td>
281
+ <td>Version control</td>
282
+ <td><i class="ph ph-check-circle" aria-label="checked"></i> Required</td>
283
+ </tr>
284
+ <tr>
285
+ <td><strong>PowerShell</strong></td>
286
+ <td>5.1+</td>
287
+ <td>Command line</td>
288
+ <td><i class="ph ph-check-circle" aria-label="checked"></i> Required</td>
289
+ </tr>
290
+ <tr>
291
+ <td><strong>VS Code</strong></td>
292
+ <td>Latest</td>
293
+ <td>Code editor</td>
294
+ <td><i class="ph ph-star" aria-label="star"></i> Recommended</td>
295
+ </tr>
296
+ </tbody></table>
297
+ <h3>Administrative Requirements</h3>
298
+ <ul>
299
+ <li><strong>Administrator access</strong> on Windows (for PowerShell execution policy)</li>
300
+ <li><strong>Internet connection</strong> for downloading tools and deploying</li>
301
+ <li><strong>Email address</strong> for account creation</li>
302
+ </ul>
303
+ <h3>Installation Order</h3>
304
+ <table>
305
+ <thead>
306
+ <tr>
307
+ <th>Step</th>
308
+ <th>Component</th>
309
+ <th>Required For</th>
310
+ <th>Download Link</th>
311
+ </tr>
312
+ </thead>
313
+ <tbody><tr>
314
+ <td>1</td>
315
+ <td>Node.js &amp; npm</td>
316
+ <td>doc-builder</td>
317
+ <td><a href="https://nodejs.org/en/download/">Download Node.js</a></td>
318
+ </tr>
319
+ <tr>
320
+ <td>2</td>
321
+ <td>Git for Windows</td>
322
+ <td>Claude Code</td>
323
+ <td><a href="https://gitforwindows.org/">Download Git</a></td>
324
+ </tr>
325
+ <tr>
326
+ <td>3</td>
327
+ <td>Visual Studio Code</td>
328
+ <td>Development</td>
329
+ <td><a href="https://code.visualstudio.com/">Download VS Code</a></td>
330
+ </tr>
331
+ <tr>
332
+ <td>4</td>
333
+ <td>Claude Code CLI</td>
334
+ <td>AI content</td>
335
+ <td>Via npm (see below)</td>
336
+ </tr>
337
+ <tr>
338
+ <td>5</td>
339
+ <td>Vercel CLI</td>
340
+ <td>Deployment</td>
341
+ <td>Via npm (see below)</td>
342
+ </tr>
343
+ </tbody></table>
344
+ <h3>Account Setup Checklist</h3>
345
+ <ul>
346
+ <li><p><input disabled="" type="checkbox">
347
+ <strong>Claude Account</strong></p>
348
+ <ul>
349
+ <li><input disabled="" type="checkbox"> Sign up at <a href="https://claude.ai">claude.ai</a></li>
350
+ <li><input disabled="" type="checkbox"> Subscribe to Pro ($20/mo) or Team ($30/mo) plan</li>
351
+ <li><input disabled="" type="checkbox"> Verify email</li>
352
+ </ul>
353
+ </li>
354
+ <li><p><input disabled="" type="checkbox">
355
+ <strong>Vercel Account</strong></p>
356
+ <ul>
357
+ <li><input disabled="" type="checkbox"> Sign up at <a href="https://vercel.com">vercel.com</a></li>
358
+ <li><input disabled="" type="checkbox"> Choose Hobby (free) plan</li>
359
+ <li><input disabled="" type="checkbox"> Verify email</li>
360
+ </ul>
361
+ </li>
362
+ <li><p><input disabled="" type="checkbox">
363
+ <strong>GitHub Account</strong> (Optional but recommended)</p>
364
+ <ul>
365
+ <li><input disabled="" type="checkbox"> Sign up at <a href="https://github.com">github.com</a></li>
366
+ <li><input disabled="" type="checkbox"> Configure username and email</li>
367
+ <li><input disabled="" type="checkbox"> Enable 2FA (recommended)</li>
368
+ </ul>
369
+ </li>
370
+ </ul>
371
+ <h2>Step 1: Enable PowerShell Script Execution</h2>
372
+ <p><strong><i class="ph ph-warning-circle" aria-label="warning"></i> IMPORTANT</strong>: This must be done FIRST as Administrator</p>
373
+ <h3>Open PowerShell as Administrator</h3>
374
+ <ol>
375
+ <li>Press <code>Windows + X</code></li>
376
+ <li>Select <strong>Terminal (Admin)</strong> or <strong>Windows PowerShell (Admin)</strong></li>
377
+ <li>Click <strong>Yes</strong> when prompted by User Account Control</li>
378
+ </ol>
379
+ <h3>Enable Script Execution</h3>
380
+ <p>Run this command in the Administrator PowerShell:</p>
381
+ <pre><code class="language-powershell">Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
382
+ </code></pre>
383
+ <p>When prompted, type <code>Y</code> and press Enter.</p>
384
+ <h3>Verify the Change</h3>
385
+ <pre><code class="language-powershell">Get-ExecutionPolicy
386
+ </code></pre>
387
+ <p>Should return: <code>RemoteSigned</code></p>
388
+ <h2>Step 2: Install Node.js and npm</h2>
389
+ <h3>Download and Install</h3>
390
+ <ol>
391
+ <li>Go to <a href="https://nodejs.org/en/download/">Node.js Downloads</a></li>
392
+ <li>Download the <strong>Windows Installer (.msi)</strong> for your system (64-bit recommended)</li>
393
+ <li>Run the installer with these settings:<ul>
394
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Accept the license agreement</li>
395
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Default installation location</li>
396
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>IMPORTANT</strong>: Ensure &quot;npm package manager&quot; is checked</li>
397
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Add to PATH (should be checked by default)</li>
398
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Automatically install necessary tools (optional but recommended)</li>
399
+ </ul>
400
+ </li>
401
+ </ol>
402
+ <h3>Verify Installation</h3>
403
+ <p>Open a <strong>new</strong> PowerShell window (not as admin) and run:</p>
404
+ <pre><code class="language-powershell">node -v
405
+ npm -v
406
+ </code></pre>
407
+ <p>You should see version numbers for both commands.</p>
408
+ <h3>Troubleshooting npm Issues</h3>
409
+ <p>If you get &quot;running scripts is disabled&quot; error:</p>
410
+ <ol>
411
+ <li>You didn&#39;t enable PowerShell execution policy (go back to Step 1)</li>
412
+ <li>You need to close and reopen PowerShell after installing Node.js</li>
413
+ <li>Try running PowerShell as Administrator</li>
414
+ </ol>
415
+ <h2>Step 3: Install Git for Windows</h2>
416
+ <h3>Download and Install</h3>
417
+ <ol>
418
+ <li>Go to <a href="https://gitforwindows.org/">Git for Windows</a></li>
419
+ <li>Download the installer</li>
420
+ <li>Run with these recommended settings:<ul>
421
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use Visual Studio Code as default editor</li>
422
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Git from the command line and also from 3rd-party software</li>
423
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use bundled OpenSSH</li>
424
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Checkout Windows-style, commit Unix-style line endings</li>
425
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use Windows&#39; default console window</li>
426
+ </ul>
427
+ </li>
428
+ </ol>
429
+ <h3>Verify Installation</h3>
430
+ <pre><code class="language-powershell">git --version
431
+ </code></pre>
432
+ <h2>Step 4: Set Up Claude Code</h2>
433
+ <h3>Understanding Claude Plans</h3>
434
+ <p>Claude Code requires a Claude Pro or Team plan subscription:</p>
435
+ <table>
436
+ <thead>
437
+ <tr>
438
+ <th>Plan</th>
439
+ <th>Price</th>
440
+ <th>Best For</th>
441
+ <th>Details</th>
442
+ </tr>
443
+ </thead>
444
+ <tbody><tr>
445
+ <td><strong>Claude Pro</strong></td>
446
+ <td>$20/month</td>
447
+ <td>Individual developers</td>
448
+ <td>Personal use, full Claude Code access</td>
449
+ </tr>
450
+ <tr>
451
+ <td><strong>Claude Team</strong></td>
452
+ <td>$30/month/user</td>
453
+ <td>Teams &amp; businesses</td>
454
+ <td>Shared workspace, higher limits</td>
455
+ </tr>
456
+ </tbody></table>
457
+ <p><strong>Note</strong>: Your Pro/Max plan subscription enables Claude Code usage. See <a href="https://support.anthropic.com/en/articles/11145838-using-claude-code-with-your-pro-or-max-plan">Using Claude Code with Pro/Max Plans</a></p>
458
+ <h3>Install Claude Code CLI</h3>
459
+ <pre><code class="language-powershell">npm install -g @anthropic/claude-code
460
+ </code></pre>
461
+ <h3>Initialize Claude Code</h3>
462
+ <pre><code class="language-powershell">claude
463
+ </code></pre>
464
+ <p>Follow the prompts:</p>
465
+ <ol>
466
+ <li>Choose <strong>Dark mode</strong> or <strong>Light mode</strong></li>
467
+ <li>Select <strong>Login with Claude account</strong></li>
468
+ <li>Authorize in your browser</li>
469
+ <li>Return to terminal when complete</li>
470
+ </ol>
471
+ <h3>Verify Setup</h3>
472
+ <pre><code class="language-powershell">claude --version
473
+ </code></pre>
474
+ <h2>Step 5: Install @knowcode/doc-builder</h2>
475
+ <h3>Global Installation (Recommended)</h3>
476
+ <pre><code class="language-powershell">npm install -g @knowcode/doc-builder@latest
477
+ </code></pre>
478
+ <h3>Verify Installation</h3>
479
+ <pre><code class="language-powershell">doc-builder --version
480
+ </code></pre>
481
+ <h3>Create Project Folder</h3>
482
+ <pre><code class="language-powershell">cd Documents
483
+ mkdir my-docs-project
484
+ cd my-docs-project
485
+ </code></pre>
486
+ <h2>Step 6: Set Up Vercel</h2>
487
+ <h3>Understanding Vercel Plans</h3>
488
+ <table>
489
+ <thead>
490
+ <tr>
491
+ <th>Plan</th>
492
+ <th>Price</th>
493
+ <th>Features</th>
494
+ <th>Best For</th>
495
+ </tr>
496
+ </thead>
497
+ <tbody><tr>
498
+ <td><strong>Hobby</strong></td>
499
+ <td>Free</td>
500
+ <td>Unlimited static sites, HTTPS, Global CDN</td>
501
+ <td>Personal projects, documentation</td>
502
+ </tr>
503
+ <tr>
504
+ <td><strong>Pro</strong></td>
505
+ <td>$20/month</td>
506
+ <td>Team features, analytics, support</td>
507
+ <td>Professional use</td>
508
+ </tr>
509
+ </tbody></table>
510
+ <p>The free Hobby plan is perfect for documentation sites!</p>
511
+ <h3>Create Vercel Account</h3>
512
+ <ol>
513
+ <li>Go to <a href="https://vercel.com">Vercel</a></li>
514
+ <li>Click <strong>Sign Up</strong></li>
515
+ <li>Choose <strong>Continue with Google</strong> or email</li>
516
+ <li>Select <strong>Hobby</strong> plan (free)</li>
517
+ </ol>
518
+ <h3>Install Vercel CLI</h3>
519
+ <pre><code class="language-powershell">npm install -g vercel@latest
520
+ </code></pre>
521
+ <h3>Login to Vercel</h3>
522
+ <pre><code class="language-powershell">vercel login
523
+ </code></pre>
524
+ <p>This will open your browser for authentication.</p>
525
+ <h2>Step 7: Complete Workflow Example</h2>
526
+ <h3>1. Create Documentation with Claude Code</h3>
527
+ <p>In Visual Studio Code terminal:</p>
528
+ <pre><code class="language-powershell">claude
529
+ </code></pre>
530
+ <p>Then ask Claude to create documentation:</p>
531
+ <pre><code>Create a comprehensive technical documentation for my API including authentication, endpoints, and examples
532
+ </code></pre>
533
+ <h3>2. Build HTML with doc-builder</h3>
534
+ <pre><code class="language-powershell">doc-builder build
535
+ </code></pre>
536
+ <h3>3. Deploy to Vercel</h3>
537
+ <pre><code class="language-powershell">doc-builder deploy
538
+ </code></pre>
539
+ <p>First deployment prompts:</p>
540
+ <ul>
541
+ <li><strong>Set up and deploy?</strong> → Yes (Y)</li>
542
+ <li><strong>Project name?</strong> → my-api-docs (use lowercase, hyphens)</li>
543
+ <li><strong>Link to existing project?</strong> → No (N)</li>
544
+ <li><strong>Modify settings?</strong> → No (N)</li>
545
+ </ul>
546
+ <h3>4. Make Site Public</h3>
547
+ <p>After deployment:</p>
548
+ <ol>
549
+ <li>Go to <a href="https://vercel.com/dashboard">Vercel Dashboard</a></li>
550
+ <li>Click your project</li>
551
+ <li>Go to <strong>Settings</strong> → <strong>Deployment Protection</strong></li>
552
+ <li>Set <strong>Vercel Authentication</strong> to <strong>Disabled</strong></li>
553
+ <li>Click <strong>Save</strong></li>
554
+ </ol>
555
+ <p>Your documentation is now live at <code>https://your-project.vercel.app</code>!</p>
556
+ <h2>Common Windows Issues &amp; Solutions</h2>
557
+ <h3>PowerShell Execution Policy Error</h3>
558
+ <p><strong>Error</strong>: &quot;running scripts is disabled on this system&quot;</p>
559
+ <p><strong>Solution</strong>:</p>
560
+ <pre><code class="language-powershell"># Run PowerShell as Administrator
561
+ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
562
+ </code></pre>
563
+ <p>See detailed guide: <a href="https://dev.to/jackfd120/resolving-npm-execution-policy-error-in-powershell-a-step-by-step-guide-for-developers-32ip">Resolving npm Execution Policy Error</a></p>
564
+ <h3>npm Command Not Found</h3>
565
+ <p><strong>Causes</strong>:</p>
566
+ <ol>
567
+ <li>Node.js not installed properly</li>
568
+ <li>PATH not updated</li>
569
+ <li>Need to restart PowerShell</li>
570
+ </ol>
571
+ <p><strong>Solution</strong>:</p>
572
+ <ol>
573
+ <li>Reinstall Node.js using the official installer</li>
574
+ <li>Ensure &quot;Add to PATH&quot; is checked during installation</li>
575
+ <li>Close all PowerShell windows and open new ones</li>
576
+ </ol>
577
+ <h3>Git Bash Required Error</h3>
578
+ <p><strong>Error</strong>: &quot;Claude Code requires Git bash&quot;</p>
579
+ <p><strong>Solution</strong>:<br>Install Git for Windows from <a href="https://gitforwindows.org/">gitforwindows.org</a></p>
580
+ <h3>Vercel CLI Authentication Issues</h3>
581
+ <p><strong>Error</strong>: &quot;Please login to Vercel&quot;</p>
582
+ <p><strong>Solution</strong>:</p>
583
+ <pre><code class="language-powershell">vercel logout
584
+ vercel login
585
+ </code></pre>
586
+ <h2>Best Practices</h2>
587
+ <h3>Folder Structure</h3>
588
+ <pre><code>Documents/
589
+ ├── my-projects/
590
+ │ ├── project1-docs/
591
+ │ │ ├── docs/ # Markdown files
592
+ │ │ ├── html/ # Generated HTML
593
+ │ │ └── doc-builder.config.js
594
+ │ └── project2-docs/
595
+ </code></pre>
596
+ <h3>Workflow Tips</h3>
597
+ <ol>
598
+ <li><strong>Use Visual Studio Code</strong> - Better terminal integration</li>
599
+ <li><strong>Create separate folders</strong> for each documentation project</li>
600
+ <li><strong>Use @latest</strong> - Always use <code>@latest</code> to avoid npm cache issues</li>
601
+ <li><strong>Regular commits</strong> - Use Git to track changes</li>
602
+ </ol>
603
+ <h3>Security Notes</h3>
604
+ <ol>
605
+ <li><strong>Run as Admin only when required</strong> - Only for PowerShell policy changes</li>
606
+ <li><strong>Keep credentials secure</strong> - Don&#39;t share Claude or Vercel tokens</li>
607
+ <li><strong>Use .gitignore</strong> - Exclude sensitive files from Git</li>
608
+ </ol>
609
+ <h2>Quick Reference Commands</h2>
610
+ <h3>Daily Workflow</h3>
611
+ <pre><code class="language-powershell"># 1. Create/edit content
612
+ claude
613
+
614
+ # 2. Build HTML
615
+ doc-builder build
616
+
617
+ # 3. Deploy updates
618
+ doc-builder deploy --prod
619
+ </code></pre>
620
+ <h3>Troubleshooting Commands</h3>
621
+ <pre><code class="language-powershell"># Check installations
622
+ node -v
623
+ npm -v
624
+ git --version
625
+ claude --version
626
+ vercel --version
627
+
628
+ # Update tools
629
+ npm update -g @knowcode/doc-builder@latest
630
+ npm update -g vercel@latest
631
+
632
+ # Clear npm cache
633
+ npm cache clean --force
634
+ </code></pre>
635
+ <h2>Additional Resources</h2>
636
+ <h3>Official Documentation</h3>
637
+ <ul>
638
+ <li><a href="https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows">Node.js on Windows Guide</a></li>
639
+ <li><a href="https://vercel.com/docs/cli">Vercel CLI Documentation</a></li>
640
+ <li><a href="https://support.anthropic.com/en/articles/11145838-using-claude-code-with-your-pro-or-max-plan">Claude Code with Pro/Max Plans</a></li>
641
+ <li><a href="https://www.npmjs.com/package/@knowcode/doc-builder">@knowcode/doc-builder on npm</a></li>
642
+ </ul>
643
+ <h3>Troubleshooting Guides</h3>
644
+ <ul>
645
+ <li><a href="https://dev.to/jackfd120/resolving-npm-execution-policy-error-in-powershell-a-step-by-step-guide-for-developers-32ip">PowerShell Execution Policy</a></li>
646
+ <li><a href="https://gitforwindows.org/">Git for Windows Setup</a></li>
647
+ </ul>
648
+ <h2>Conclusion</h2>
649
+ <p>With this setup, you can create professional documentation in minutes:</p>
650
+ <ol>
651
+ <li><strong>Claude Code</strong> generates the content</li>
652
+ <li><strong>doc-builder</strong> makes it beautiful</li>
653
+ <li><strong>Vercel</strong> shares it with the world</li>
654
+ </ol>
655
+ <p>The initial setup takes about 30 minutes, but once configured, you can create and deploy documentation sites in under 5 minutes!</p>
656
+ <hr>
657
+ <p><strong>Need help?</strong> File issues at the respective project repositories or check the troubleshooting sections above.</p>
658
+
659
+ </div>
660
+ </main>
661
+ </div>
662
+
663
+ <!-- Scripts -->
664
+ <script src="/js/main.js"></script>
665
+
666
+ </body>
667
+ </html>