כדי לבנות אתר עם Claude Code תצטרכו להשקיע כ-100 שקלים לשנה על דומיין, להחזיק מנוי בתשלום או חשבון פעיל ב-Anthropic Console, ולעבוד ישירות מול הטרמינל במחשב. אין כאן שום כפתור קסם שמייצר אתר ברבע שעה. מדובר בעוזר פיתוח שמבין פקודות טקסט, מתחבר לכלים המקומיים שלכם, כותב קוד על פני כמה קבצים במקביל, ומסוגל להרים אתר שלם מתיקייה ריקה לגמרי. אבל אם לא תספקו לו גבולות ברורים, הוא יבזבז לכם קרדיטים ויכתוב קוד שלא עובד.
זה דורש משמעת.
Claude Code רץ בארבע צורות שונות: כלי שורת פקודה בטרמינל, הרחבה לעורכי קוד כמו VS Code או סביבות JetBrains, אפליקציית שולחן עבודה עצמאית, וממשק ווב בדפדפן. לרוב המשתמשים שרוצים שליטה מלאה על הקבצים, הטרמינל הוא הבחירה הנכונה. ההתקנה הטבעית שלו ב-macOS או Linux מתבצעת בפקודת curl פשוטה שמתעדכנת ברקע לבד, וב-Windows מריצים שורת התקנה דרך PowerShell או WinGet. אם אתם עובדים על מחשב Windows, Git for Windows מומלץ כדי שהכלי יוכל להריץ פקודות במעטפת Bash במקום ליפול על תחביר של PowerShell.
הקמת הפרויקט והכנת התיקייה
יוצרים תיקייה חדשה, נכנסים אליה בטרמינל, ומריצים את הפקודה claude. בהפעלה הראשונה הוא יבקש מכם להתחבר לחשבון שלכם, או שיזהה אוטומטית מפתח שהוגדר מראש במשתנה הסביבה ANTHROPIC_API_KEY. במקום להגיד לו לבנות אתר כללי, הצעד הראשון הוא להגדיר לו את השלד הטכנולוגי. בקשו ממנו להקים פרויקט של Next.js, הפריימוורק המרכזי של React שמתוחזק על ידי Vercel, יחד עם תמיכה ב-TypeScript וב-Tailwind לעיצוב. הוא ייצר את כל קובצי התשתית הדרושים, כולל הגדרות התלויות שלכם.
החלק החשוב ביותר בתהליך נקרא קובץ CLAUDE.md. זהו קובץ טקסט שיושב בשורש הפרויקט ונקרא על ידי הכלי בכל תחילת שיחה. אם לא תגדירו אותו, Claude Code ייקח החלטות שרירותיות על דעת עצמו. בקובץ הזה אתם מכתיבים את הארכיטקטורה, את הספריות המותרות, ואיך האתר צריך להיראות. מי שמדלג על הגדרת CLAUDE.md מדויקת מקבל קוד מבולגן שדורש שעות של תיקונים ידניים. הוא מסוגל לקרוא גם קובץ AGENTS.md קיים, וצובר לעצמו זיכרון אוטומטי לאורך המפגשים, אבל את החוקים הנוקשים שלכם אתם חייבים לקבוע שם.
אל תסמכו על הזיכרון שלו.
צעדי הקמה מתיקייה ועד רשת
- התקנת Claude Code בטרמינל
- יצירת תיקייה והרצת פרויקט
- הגדרת קובץ חוקים מפורט
- בניית ממשק מותאם לכיווניות
- דחיפת קוד לתוך GitHub
- חיבור פריסה ישירה מול Vercel
שליטה בעיצוב והתאמה לעברית
עיצוב ממשק עברי דורש דיוק, כי כלי בינה מלאכותית נוטים להתעלם מכיווניות טבעית ויוצרים הזיות בתצוגה. ברגע שמשלבים את Tailwind, אתם חייבים להורות לו במפורש בקובץ ההנחיות להשתמש אך ורק במאפיינים לוגיים כמו ps ו-pe במקום שוליים קבועים משמאל או מימין, ולהגדיר את תגית ה-HTML הראשית עם מאפיין כיוון מימין לשמאל. אם לא תגדירו זאת מראש, תמצאו כפתורים שיושבים הפוך, תיבות טקסט שנצמדות לצד הלא נכון, ומסכים שבורים במכשירים ניידים. תבדקו את התצוגה המקומית.
כדי לבנות מסכים, פשוט מתארים בשפה פשוטה מה נחוץ. Claude Code יתכנן את הפתרון, יפצל אותו לקבצים הנכונים, ויבנה את ה-Frontend, שהוא החלק שמוצג בדפדפן. במידה ואתם מציגים רשימות של מוצרים או תוכן שמשתנה, Next.js תומך במנגנוני טעינה מהירים כמו רינדור חלקי, שיוצר מעטפת עמוד סטטית ומזרים את הנתונים המשתנים לתוכה בחלקים קטנים. מנגנון כזה מאפשר לעמוד הראשי לעלות מיד בלי לחכות לתשובות אטיות של שרתים מרוחקים.
לא הייתי משתמש ב-Claude Code לבניית אתר תדמית אם אתם מצפים ממנו לנחש את הטקסטים והתמונות שלכם. הוא מתכנת, הוא לא כותב תוכן. אם תיתנו לו תיאור כללי, תקבלו דף ריקני עם שורות דמה באנגלית. תנו לו קובצי טקסט מוכנים בפורמט JSON, הגדירו לו מראש אילו נתונים צריכים להופיע בכל עמוד, והורו לו לבדוק שגיאות בנייה לפני שהוא מסיים את המשימה. פקודת הרצה פשוטה שלו יכולה לבצע בדיקות קוד מלאות ולתקן כשלים לפני שהם מגיעים לענן.
תוכן מכינים מראש.
| משטח עבודה | שיטת עדכון | דרישת מנוי | יתרון מרכזי |
|---|---|---|---|
| Terminal CLI | אוטומטי בהתקנה טבעית | מנוי או חשבון קונסול | שליטה מלאה בפקודות |
| Homebrew | ידני דרך brew upgrade | מנוי או חשבון קונסול | בחירה בין גרסה יציבה לעדכנית |
| Desktop App | אוטומטי דרך היישום | מנוי בתשלום בלבד | השוואת שינויים חזותית |
| Web Interface | ללא התקנה מקומית | מנוי בתשלום | ריצה ברקע על מאגרים בענן |
חיבור לניהול גרסאות והפצה
כשהאתר שלכם בנוי ועובד מקומית, אתם חייבים לחבר אותו למערכת Git. המערכת הזו מתעדת כל שינוי שבוצע בקוד ושומרת את ההיסטוריה המלאה שלו. אפשר פשוט לכתוב לכלי לבצע commit עם תיאור ברור של העבודה שנעשתה, והוא ייצור את נקודת השמירה בעצמו. השלב הבא הוא העלאת המאגר לחשבון GitHub שנמצא בבעלותכם הבלעדית. לעולם אל תשאירו את הקבצים בחשבונות של מפתחים חיצוניים. תתעקשו שהגישה הראשית תהיה שלכם.
זה שווה את זה רק אם אתם באמת שומרים על סדר בגרסאות. GitHub מאפשר לכם להריץ בדיקות אוטומטיות בכל שינוי ולחבר פלטפורמות ענן חיצוניות. מכאן, החיבור לשרת נעשה ללא צורך בהקמת שרתי ענק מורכבים. במקום להתעסק עם תשתיות כבדות של שרתים וירטואליים שגוזלים זמן ותחזוקה, Vercel מתממשקת ישירות לחשבון ה-GitHub שלכם, מושכת את השינויים ברגע שאתם מעלים קוד, ופורסת את האתר ברשת שרתים עולמית בתוך שניות ספורות.
עלויות תשתית וחיבור דומיין
מבחינת הוצאות כספיות, המסלול מתחיל כמעט באפס ומגיע למאות שקלים בודדים בחודש. הרישום של כתובת ישראלית בסיומת co.il או org.il עולה כ-100 שקלים לשנה דרך רשם מורשה. Claude Code דורש מנוי בתשלום או תשלום לפי שימוש מול חשבון Anthropic Console, ואילו הפריסה של האתר ב-Vercel מתחילה מחשבון חינמי שמספיק לרוב הפרויקטים הראשונים שלכם, כולל תעודת SSL חינמית שמופעלת מיד ומאבטחת את הגלישה ללא תשלום נוסף. אל תשלמו על הצפנה בנפרד.
כשהפריסה הסתיימה, תקבלו כתובת רשת זמנית. כדי לחבר את הכתובת האמיתית שלכם, נכנסים לניהול ה-DNS ברשם שבו קניתם את הדומיין ומעדכנים את הרשומות לפי ההנחיות של שירות האחסון. הרשומות האלה הן שמפנות את הגולשים שמקלידים את שם העסק שלכם ישירות אל שרתי האתר. ברגע שהרשומות מתעדכנות, האתר שלכם נמצא באוויר, מאובטח ומגיב במהירות לגולשים מכל מקום.
מקורות
- docs.anthropic.comhttps://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview
- vercel.comhttps://vercel.com/docs/frameworks/nextjs
המדריך נכתב מהמקורות שלמעלה בתאריך הפרסום. מחירים ותנאים משתנים; לפני החלטה כספית בודקים מול המקור. מצאתם טעות? כתבו.