בניית אתר עם Claude Code: איך בנוי האתר שלי

בקצרה: אפשר לבנות אתר עם Claude Code גם בלי לכתוב קוד בעצמכם. מתארים בעברית מה האתר צריך, Claude Code כותב את הקבצים, ואתם בודקים ומאשרים. הדוגמה במדריך היא האתר שאתם קוראים עכשיו, mmn.co.il, ואני מראה איך הוא בנוי בפועל.

מה זה Claude Code, במשפט

Claude Code הוא כלי של Anthropic שקורא את קבצי הפרויקט, עורך אותם ומריץ פקודות. הוא עובד בטרמינל, בתוך עורך קוד, באפליקציית הדסקטופ ובדפדפן. בפשטות: מתכנת שמבין עברית ועובד בתוך התיקייה של האתר שלכם.

הוא כלול בתוכניות בתשלום של Claude (Pro ו-Max), ולא בתוכנית החינמית. השימוש בו נספר מאותה מכסה של הצ'אט הרגיל.

איך בנוי mmn.co.il

• Next.js: הטכנולוגיה שעליה בנוי האתר. כל עמוד נבנה מראש לקובץ HTML מוכן, ולכן הוא נטען מהר וגוגל קורא אותו בקלות.
• פוסטים כקבצי JSON: כל מדריך בבלוג הוא קובץ אחד בתיקייה content/blog. אין מערכת ניהול תוכן. כדי להוסיף מדריך, מוסיפים קובץ.
• GitHub: כל הקוד שמור בריפו ב-GitHub. כל שינוי נכנס כבקשת שינוי (Pull Request) שאפשר לבדוק לפני שהוא עולה.
• Vercel: כשהשינוי מאושר ב-GitHub, Vercel בונה את האתר ומעלה אותו לאוויר לבד.
• SEO אוטומטי: מפת האתר, נתוני schema לגוגל ועותק Markdown של כל מדריך בשביל מנועי AI נוצרים בזמן הבנייה.
• בדיקות לפני פרסום: סקריפט בודק בכל בנייה שלכל עמוד יש כותרת אחת, תיאור, כתובת קנונית וקישורים פנימיים תקינים.
• קובץ CLAUDE.md: קובץ בתיקיית הפרויקט עם הכללים שלו. Claude Code קורא אותו בתחילת כל עבודה.

צעד אחר צעד: בונים אתר משלכם

1. קודם תוכנית

בפשטות: לפני שכותבים שורת קוד, מבקשים מ-Claude Code תוכנית. ב-Claude Code בטרמינל לוחצים Shift+Tab עד שמופיע plan mode on. במצב הזה הוא מציע תוכנית ולא נוגע בקבצים.

איך בודקים: התוכנית מפרטת אילו עמודים יהיו באתר, מה בכל עמוד ואיך יוצרים איתכם קשר.

2. קובץ כללים לפרויקט

בפשטות: כותבים ב-CLAUDE.md את הכללים שחשובים לכם: השפה, הטון, מה אסור לכתוב באתר. כך לא צריך להזכיר אותם בכל פעם.

3. תוכן כקבצים

בפשטות: מבקשים שכל עמוד או מדריך יהיה קובץ נפרד ופשוט, כמו אצלי. ככה קל להוסיף תוכן בלי לגעת בקוד.

4. GitHub ו-Vercel

בפשטות: שומרים את הפרויקט ב-GitHub ומחברים אותו ל-Vercel. מעכשיו כל שינוי שמאשרים עולה לאתר לבד.

איך בודקים: אחרי שינוי, נכנסים לאתר ורואים שהוא התעדכן.

5. SEO מההתחלה

בפשטות: מבקשים כותרת ותיאור לכל עמוד, מפת אתר ונתוני schema. בניתי לזה פרומפט SEO מלא לאתר שנבנה בוויב קודינג.

6. בדיקה לפני כל פרסום

בפשטות: מבקשים מ-Claude Code סקריפט שבודק את האתר לפני שהוא עולה, ומריצים אותו בכל שינוי.

הפרומפט המלא

אני רוצה לבנות אתר לעסק שלי: [סוג העסק, למי הוא מיועד, מה הלקוחות צריכים למצוא באתר].
לפני שאתה כותב קוד, תציע לי תוכנית: אילו עמודים יהיו, מה בכל עמוד, ואיך יוצרים איתי קשר (וואטסאפ).
דרישות:
1. Next.js, כשכל עמוד נבנה מראש כ-HTML.
2. כל מדריך או עמוד תוכן הוא קובץ JSON נפרד, כדי שאוכל להוסיף תוכן בלי לגעת בקוד.
3. כותרת ותיאור לכל עמוד, מפת אתר, robots.txt ונתוני schema.
4. סקריפט בדיקה שרץ לפני כל פרסום ובודק כותרות, תיאורים וקישורים שבורים.
5. קובץ CLAUDE.md עם הכללים של הפרויקט.
אל תמציא תוכן או נתונים. אם חסר לך מידע, תשאל אותי.

טעויות נפוצות

• מתחילים לבנות בלי תוכנית, ואחרי שעה יש אתר שלא ברור מה הוא אמור לעשות.
• נותנים ל-AI להמציא טקסטים על העסק. כל עובדה באתר צריכה לבוא מכם.
• מעלים לאוויר בלי לבדוק בטלפון.
• שוכחים כותרת ותיאור לגוגל.

רוצים להעמיק? מה זה וייב קודינג, בניית אפליקציה עם AI ב-7 שלבים , מילון מונחי פיתוח לבעלי עסקים וקידום במנועי AI.

מקורות: Claude Code Docs: Overview (נפתח בלשונית חדשה), Claude: Plans & pricing (נפתח בלשונית חדשה).