איך בונים אתר בעצמכם עם Claude Code, GitHub, Vercel ו-Supabase

4 הכלים ומה כל אחד עושה

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

איך הכול מתחבר

שלב 1: מתקינים את הכלים הבסיסיים

1. 01

   מתקינים VS Code

   נכנסים ל-code.visualstudio.com ולוחצים Download. פותחים את הקובץ שירד וממשיכים לפי ההוראות. ב-Windows משאירים את ברירת המחדל, ומסמנים Add "Open with Code" action אם מופיע. פותחים את VS Code. אפשר לסגור את לשונית Welcome.

2. 02

   מתקינים Node.js

   נכנסים ל-nodejs.org. מורידים את הגרסה שמסומנת LTS (הגרסה היציבה). מריצים את ההתקנה עם ברירות המחדל.

3. 03

   מתקינים Git

   Windows: מורידים את Git for Windows מ-git-scm.com/downloads/win ומתקינים עם ברירות המחדל. גם Claude Code עובד טוב יותר ב-Windows כש-Git מותקן. Mac: בדרך כלל Git כבר מותקן. אם לא, הבדיקה למטה תציע להתקין אותו.

4. 04

   בודקים שהכול עובד

   ב-VS Code יש טרמינל מובנה: חלון שבו מקלידים פקודות. פותחים אותו מהתפריט למעלה: Terminal ← New Terminal. מקלידים כל שורה ולוחצים Enter:

node --version

npm --version

git --version

כל פקודה צריכה להדפיס מספר גרסה, למשל v22.x.x. אם מופיע "not recognized" או "command not found", סוגרים את VS Code לגמרי ופותחים מחדש. תוכנות שהותקנו כש-VS Code היה פתוח מופיעות רק אחרי פתיחה מחדש.

שלב 3: מתכננים את האתר

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

1. 01

   תדריך לאתר

   כמה שורות על כל נקודה:

   למי האתר?

   שם העסק, מה הוא עושה ואיפה

   מי המבקרים?

   למשל: בעלי בתים באזור שמחפשים שרברב

   מה המבקרים צריכים לעשות?

   להתקשר, לקבוע תור, לשלוח הודעה או לקנות

   עמודים וחלקים

   בית, אודות, שירותים, המלצות, יצירת קשר

   עיצוב

   צבעים, אווירה (מודרני, חברותי, יוקרתי), אתר שאתם אוהבים את העיצוב שלו

   תוכן

   הטקסט האמיתי שלכם, טלפון, מייל, שעות פעילות ותמונות

1. 02

   מבקשים מ-Claude תוכנית קודם

   עוברים למצב Plan ושולחים משהו כזה (עם התדריך שלכם):

אני רוצה לבנות אתר פשוט ומודרני. הנה התדריך:
עסק: מרפאת שיניים משפחתית ברחובות.
מבקרים: משפחות באזור שמחפשות רופא שיניים נעים.
מטרה: שהמבקרים ישלחו הודעה בטופס או יתקשרו.
חלקים: כותרת ראשית ברורה עם כפתור, אודות, שירותים, למה אנחנו, טופס יצירת קשר, פוטר עם טלפון, מייל וכתובת.
עיצוב: נקי ורגוע, תכלת בהיר ולבן, מותאם לטלפון. האתר בעברית, מימין לשמאל.
תשתמש ב-Next.js עם Tailwind CSS. עדיין לא לחבר מסד נתונים, רק לעצב את הטופס.
תסביר לי את התוכנית במילים פשוטות לפני שאתה מתחיל.

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

שלב 5: מוסיפים מסד נתונים עם Supabase

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

1. 01

   פותחים פרויקט ב-Supabase

   נכנסים ל-supabase.com עם Continue with GitHub. לוחצים New project. נותנים שם (למשל my-website), יוצרים סיסמה חזקה למסד הנתונים ושומרים אותה במקום בטוח, ובוחרים אזור קרוב למבקרים. לוחצים Create new project ומחכים דקה-שתיים.

1. 02

   יוצרים טבלה להודעות

   טבלה היא כמו גיליון בתוך מסד הנתונים. כל הודעה היא שורה. בפרויקט פותחים את SQL Editor מהתפריט השמאלי, פותחים שאילתה חדשה, מדביקים את הקוד למטה ולוחצים Run.

-- Create a table to store contact form messages
create table contact_messages (
  id bigint primary key generated always as identity,
  created_at timestamptz not null default now(),
  name text not null,
  email text not null,
  message text not null
);

-- Let website visitors ADD a message (but not read others)
grant insert on public.contact_messages to anon;

-- Turn on security rules for this table
alter table contact_messages enable row level security;

-- Rule: anyone can send a message
create policy "visitors can send messages"
on public.contact_messages
for insert to anon
with check (true);

במילים פשוטות: זה יוצר טבלה בשם contact_messages עם כלל אבטחה. מבקרים יכולים לשלוח הודעה, אבל לא לקרוא הודעות של אחרים. רק אתם קוראים אותן, מלוח הבקרה של Supabase.

1. 03

   מעתיקים את המפתחות של הפרויקט

   ב-Supabase לוחצים על כפתור Connect בראש הדף. מעתיקים שני ערכים: Project URL ו-publishable key (מתחיל ב-sb_publishable_). בפרויקטים ישנים יופיע במקום זה anon key, וזה עובד אותו דבר.

1. 04

   מחברים את הטופס עם Claude Code

   חוזרים ל-VS Code:

תחבר את טופס יצירת הקשר ל-Supabase.
הטבלה נקראת contact_messages עם העמודות name, email ו-message.
תשתמש בחבילה @supabase/supabase-js.
תיצור קובץ .env.local עם NEXT_PUBLIC_SUPABASE_URL ו-NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ותשאיר את הערכים ריקים שאמלא בעצמי.
תוודא ש-.env.local נמצא ב-.gitignore כדי שלעולם לא יעלה ל-GitHub.
תציג הודעת הצלחה נעימה אחרי שליחה, והודעת שגיאה ברורה אם משהו נכשל. תבדוק גם שהמייל תקין לפני השליחה.

כש-Claude מסיים, פותחים את הקובץ .env.local (ברשימת הקבצים משמאל) ומדביקים את הערכים אחרי סימן ה-=:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxxxxxxxxxx

שומרים (Ctrl+S / Cmd+S), ומבקשים מ-Claude להפעיל מחדש את התצוגה כדי שיקלוט את הערכים.

1. 05

   בודקים

   פותחים את http://localhost:3000, ממלאים את הטופס ושולחים. ב-Supabase פותחים את Table Editor ולוחצים על contact_messages. ההודעה צריכה להופיע שם כשורה חדשה.

לא עובד? מעתיקים את השגיאה מהדף או מהטרמינל ומדביקים ל-Claude: "טופס יצירת הקשר מחזיר את השגיאה הזו. תמצא ותתקן את הבעיה."

שלב 7: מעלים את האתר לאוויר עם Vercel

1. 01

   מייבאים את הפרויקט

   נכנסים ל-vercel.com עם Continue with GitHub. לוחצים Add New… ← Project. אם מתבקש, מאשרים ל-Vercel גישה ל-GitHub (אפשר לבחור רק את הפרויקט הזה). מוצאים את הפרויקט ולוחצים Import. Vercel מזהה לבד שזה אתר Next.js. אין צורך לשנות הגדרות.

2. 02

   מוסיפים את מפתחות ה-Supabase

   הקובץ .env.local לא ב-GitHub (וזה טוב), אז Vercel עדיין לא מכיר את המפתחות. לפני ההעלאה, פותחים באותו דף את Environment Variables ומוסיפים:

   NEXT_PUBLIC_SUPABASE_URL

   ה-Project URL שלכם

   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

   ה-publishable key שלכם

   שכחתם? ב-Vercel נכנסים לפרויקט ← Settings ← Environment Variables, מוסיפים, ואז ב-Deployments לוחצים Redeploy על האחרון.

3. 03

   מעלים

   לוחצים Deploy ומחכים בערך דקה. במסך הברכות לוחצים על התצוגה ופותחים את האתר החי. הכתובת נראית כמו my-website.vercel.app. בודקים את הטופס באתר החי, ושההודעה מופיעה ב-Supabase.

האתר שלכם באינטרנט. אפשר לשתף את הלינק עם כולם.

פתרון בעיות

• "node", "npm" או "git" לא מזוהים

  פותחים מחדש את VS Code (או את המחשב) אחרי ההתקנה. עדיין לא עובד? מתקינים שוב עם ברירות המחדל.

• הפאנל של Claude Code או אייקון ה-Spark לא מופיעים

  פותחים מחדש את VS Code, או Ctrl+Shift+P ומריצים Developer: Reload Window. מוודאים ש-VS Code מעודכן (Help ← Check for Updates).

• Claude מבקש להתחבר שוב ("Not logged in")

  לוחצים Sign in ומסיימים בדפדפן. מוודאים שהמנוי כולל את Claude Code.

• הטופס מציג "Something went wrong"

  בודקים את שני הערכים ב-.env.local (בלי רווחים ובלי מרכאות), מפעילים מחדש את התצוגה ומוודאים שהרצתם את ה-SQL משלב 5.2. מדביקים את השגיאה המדויקת ל-Claude.

• הטופס עובד במחשב אבל לא באתר החי

  חסרים המפתחות ב-Vercel. מוסיפים ב-Settings ← Environment Variables ומעלים מחדש.

• ההעלאה ל-Vercel נכשלה

  פותחים את ההעלאה שנכשלה, מעתיקים את השגיאה מה-build log ומדביקים ל-Claude: "ההעלאה ל-Vercel נכשלה עם השגיאה הזו. תתקן." ואז commit ו-push שוב.

• לא הבנתי מה Claude עשה

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

הרגלים טובים וכללי בטיחות

• סודות נשארים סודייםלעולם לא שמים סיסמאות, את ה-secret key של Supabase או פרטי בנק בקוד או ב-GitHub.
• קוראים לפני שמאשריםכש-Claude מבקש להריץ פקודה או לשנות קובץ, קוראים רגע מה זה.
• שינוי אחד בכל פעםבודקים בתצוגה לפני שמבקשים את הבא.
• שומרים הרבהגרסאות קטנות מקלות לחזור אחורה.
• בודקים את התוכן בעצמכםאתם אחראים למחירים, למספרי טלפון, להבטחות ולמידע המשפטי באתר.
• אוספים רק מה שצריךבטפסים, ומוסיפים הערת פרטיות קצרה אם אוספים פרטים אישיים.