איך לבנות אתר כמו שצריך

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

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

התמונה הגדולה: מה כל כלי עושה

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

• VS Code: שולחן העבודה. התוכנה שבה פותחים את קבצי האתר.
• Claude Code או Codex: הקבלן. עוזר AI שכותב ומתקן את הקוד לפי מה שאתם מבקשים בעברית פשוטה.
• GitHub: הכספת. שומר את כל הקבצים ואת כל ההיסטוריה של השינויים.
• Vercel: הבית עצמו ברחוב. מעלה את האתר לאינטרנט כדי שכל אחד יוכל להיכנס.
• Supabase: המחסן. מסד נתונים לשמירת מידע, כמו פניות, משתמשים ותכנים.
• Namecheap: הכתובת. קונים שם דומיין כמו mybusiness.com.

1. VS Code: שולחן העבודה

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

1. מורידים את VS Code מהאתר code.visualstudio.com ומתקינים.
2. מתקינים גם את Node.js (הגרסה המומלצת, LTS) מ-nodejs.org. זה המנוע שמריץ את האתר על המחשב.
3. מתקינים את Git מ-git-scm.com. זה הכלי ששומר גרסאות ומדבר עם GitHub.
4. יוצרים תיקייה חדשה לאתר ופותחים אותה ב-VS Code (File ← Open Folder).

2. Claude Code ו-Codex: המתכנתים שלכם

זה החלק שמשנה את כל המשחק. Claude Code (של Anthropic) ו-Codex (של OpenAI) הם סוכני AI לתכנות: לא רק צ'אט שעונה על שאלות, אלא עוזר שקורא את כל הפרויקט, כותב קבצים, מריץ פקודות, בודק שהכול עובד ומתקן שגיאות בעצמו.

• Claude Code: עובד כתוסף ב-VS Code או בטרמינל (החלון השחור שבו כותבים פקודות). צריך מנוי Claude בתשלום.
• Codex: הסוכן של OpenAI, עובד גם הוא כתוסף ב-VS Code. מתחברים עם חשבון ChatGPT בתשלום.
• אפשר לעבוד עם אחד מהם או עם שניהם. יש מי שבונה עם אחד ונותן לשני לבדוק את העבודה.

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

Build a fast, mobile-first website for my business using Next.js.
Business: [what you do, in one sentence]
Audience: [who your customers are]
Pages: Home, About, Services, Contact
Style: dark background, green accents, clean and modern
The main goal of every page: get the visitor to message me on WhatsApp.
Before writing code, show me a short plan and wait for my approval.

3. GitHub: הכספת והמכונה של הזמן

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

• commit: שמירה של נקודה בזמן, עם הודעה קצרה שמסבירה מה השתנה.
• push: שליחה של השמירות שלכם מהמחשב ל-GitHub.
• pull: הורדה של שינויים שאחרים העלו, אל המחשב שלכם.

לא צריך לזכור את הפקודות. אומרים ל-Claude Code או ל-Codex "תשמור ותעלה ל-GitHub", והוא עושה את זה.

4. Vercel: מעלים את האתר לאוויר

Vercel הוא השרת שמריץ את האתר ומגיש אותו לגולשים בכל העולם, מהר. הקסם הוא החיבור ל-GitHub: כל פעם שאתם מעלים שינוי ל-GitHub, Vercel בונה ומפרסם את האתר מחדש, לבד, תוך דקה או שתיים.

1. נרשמים ל-Vercel עם חשבון ה-GitHub.
2. לוחצים Add New ← Project ובוחרים את הפרויקט מ-GitHub.
3. לוחצים Deploy. אחרי דקה יש לכם אתר חי עם כתובת זמנית שמסתיימת ב-vercel.app.
4. מפתחות וסיסמאות מוסיפים ב-Settings ← Environment Variables.

Vercel גם יוצר תצוגה מקדימה (Preview) לכל ענף עבודה, כך שאפשר לבדוק שינוי בכתובת נפרדת לפני שהוא עולה לאתר האמיתי.

5. Supabase: כשהאתר צריך לזכור דברים

אתר תדמית פשוט לא חייב מסד נתונים. אבל ברגע שהאתר צריך לשמור מידע, נכנס Supabase: פניות מטפסים, משתמשים שנרשמים ומתחברים, מדריכים ומוצרים שמנהלים מתוך האתר, או מאגר ידע לצ'אטבוט.

• Database: טבלאות מסודרות, כמו אקסל חכם.
• Auth: הרשמה והתחברות של משתמשים, כולל כניסה עם Google.
• Storage: אחסון תמונות וקבצים שמעלים דרך האתר.

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

6. Namecheap: קונים את הכתובת

הכתובת הזמנית של Vercel עובדת, אבל לעסק צריך כתובת משלו. ב-Namecheap קונים דומיין, בדרך כלל בכמה עשרות שקלים לשנה, וכדאי לבדוק גם את מחיר החידוש ולא רק את המבצע לשנה הראשונה.

1. מחפשים ב-Namecheap את השם שאתם רוצים וקונים אותו.
2. ב-Vercel נכנסים לפרויקט ← Settings ← Domains ומוסיפים את הדומיין.
3. Vercel מציג בדיוק אילו רשומות DNS (ההגדרות שמפנות את הכתובת לשרת) להוסיף. מעתיקים אותן ל-Namecheap, תחת Domain List ← Manage ← Advanced DNS.
4. מחכים קצת, לפעמים כמה שעות. Vercel מוסיף לבד את המנעול (HTTPS).

איך הכול עובד ביחד

1. פותחים את הפרויקט ב-VS Code.
2. מבקשים מ-Claude Code או מ-Codex שינוי, בודקים אותו על המחשב.
3. אומרים לו לשמור ולהעלות ל-GitHub.
4. Vercel מזהה את השינוי ומעלה את האתר המעודכן לבד.
5. אחרי דקה-שתיים השינוי חי בכתובת שקניתם ב-Namecheap.
6. וכשהאתר צריך לשמור מידע, הוא שומר אותו ב-Supabase.

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