לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתרים
לא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאוד
כמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכם
נערך לרגל בקשת הוותיקים 
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
או
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
ChatGPT
או
Claude
עורך קוד
Visual Studio Code
ניהול קוד
GitHub
פריסה (Hosting)
Vercel
מסד נתונים
Supabase
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
GitHub
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-website
סמן:
Add README
ולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
Git Downloads
לאחר ההתקנה פתח Terminal:
git --version
אם מופיעה גרסה:
git version 2.xx
הכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
Node.js
בדיקה:
node -v
npm -v
פרק 6 - התקנת VS Code
מורידים:
Visual Studio Code
תוספים מומלצים:
- ESLint
- Prettier
- GitHub Copilot
- Tailwind CSS IntelliSense
פרק 7 - למה Next.js
ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.
יתרונות:
- SEO
- מהיר
- React מובנה
- קל להעלאה ל-Vercel
יצירת פרויקט:
npx create-next-app@latest
המערכת תשאל:
TypeScript? Yes
ESLint? Yes
Tailwind? Yes
App Router? Yes
פרק 8 - מבנה הפרויקט
לאחר ההתקנה:
app/
components/
public/
app
הדפים באתר.
components
חלקים חוזרים.
לדוגמה:
public
תמונות.
פרק 9 - שימוש נכון ב-AI
רוב המתחילים טועים כאן.
לא מבקשים:
תבנה לי אתר
מבקשים:
תבנה לי דף נחיתה לעסק צילום.
צבעים:
שחור וזהב
חלקים:
Hero
About
Gallery
Contact
תייצר קוד Next.js + Tailwind
ה-AI עובד טוב כשנותנים הוראות ברורות.
פרק 10 - Git בפועל
יצירת Commit ראשון:
git add .
git commit -m "initial project"
חיבור ל-GitHub:
git remote add origin URL
git push -u origin main
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.
דוגמה:
<div class="bg-black text-white p-8">
המשמעות:
bg-black = רקע שחור
text-white = טקסט לבן
p-8 = ריווח
פרק 12 - בניית דף בית
בקשה מומלצת ל-AI:
צור דף בית מודרני ב-Next.js
עם Tailwind.
כולל:
Hero
Services
Testimonials
Contact
Footer
הדבק את הקוד.
שמור.
הפעל:
npm run dev
האתר ירוץ ב:
localhost:3000
פרק 13 - מה זה Database
Database הוא מקום לשמירת מידע.
לדוגמה:
טופס צור קשר.
בלי DB:
המידע נעלם
עם DB:
המידע נשמר
פרק 14 - Supabase
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
Supabase
Create Project
לאחר יצירה:
תקבל:
Project URL
API KEY
פרק 15 - יצירת טבלה
לדוגמה:
create table contacts (
id bigint primary key generated always as identity,
name text,
email text,
message text
);
הטבלה תכיל:
שם
אימייל
הודעה
פרק 16 - חיבור האתר למסד הנתונים
התקנת SDK:
npm install @supabase/supabase-js
יצירת קובץ:
lib/supabase.ts
בקשת AI:
צור קובץ חיבור Supabase
ב-Next.js TypeScript
הוא יפיק את הקוד.
פרק 17 - Environment Variables
לעולם לא שומרים סיסמאות בקוד.
יוצרים:
.env.local
דוגמה:
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
פרק 18 - טופס צור קשר
המשתמש שולח:
שם
אימייל
הודעה
בעת לחיצה על Send:
המידע נשלח ל-Supabase.
פרק 19 - Authentication
אם רוצים הרשמה והתחברות.
Supabase כבר יודע:
- Login
- Signup
- Password Reset
בקשה ל-AI:
בנה מערכת הרשמה והתחברות
עם Supabase Auth
ל-Next.js
פרק 20 - העלאת תמונות
אפשר:
- Supabase Storage
- Cloudinary
למתחילים:
Supabase Storage.
פרק 21 - SEO
SEO = הופעה בגוגל.
חשוב מאוד.
דוגמאות:
כותרת:
<title>צלם אירועים בתל אביב</title>
תיאור:
<meta name="description" content="..." />
פרק 22 - אבטחה
לעולם לא:
לחשוף API Keys
לשמור סיסמאות גלויות
לתת הרשאות מלאות
פרק 23 - העלאה לפרודקשן
הדרך הקלה ביותר:
Vercel
כניסה:
Vercel
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
Cloudflare Registrar
או
Namecheap
דוגמא:
mybusiness.com
מחברים ל-Vercel.
פרק 25 - עדכון האתר
בכל פעם שאתה משנה קוד:
git add .
git commit -m "update homepage"
git push
Vercel יעדכן אוטומטית.
פרק 26 - זרימת עבודה מקצועית עם AI
כך עובדים כיום:
שלב 1
כותבים אפיון
אני רוצה אתר למאמן כושר.
שלב 2
מבקשים מה-AI:
צור PRD מלא.
שלב 3
מבקשים:
פרק את הפרויקט למשימות.
שלב 4
מבקשים:
צור את כל מבנה התיקיות.
שלב 5
מבקשים:
צור כל קומפוננטה בנפרד.
שלב 6
מבקשים:
בדוק ביצועים.
שלב 7
מבקשים:
בדוק SEO.
שלב 8
מבקשים:
בדוק אבטחה.
פרק 27 - מסלול מומלץ לפרויקט ראשון
אל תתחיל מסטארטאפ ענק.
תתחיל מ:
- אתר תיק עבודות
- אתר לעסק
- בלוג אישי
- אתר מתכונים
- אתר טיולים
- אתר אירועים
- אתר המלצות ספרים
- אתר המלצות מסעדות
אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.
פרק 28 - הנוסחה הפשוטה להצלחה
לכל אתר שתבנה:
רעיון
↓
אפיון
↓
AI
↓
Next.js
↓
GitHub
↓
Supabase
↓
Vercel
↓
דומיין
↓
פרודקשן
אם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.
המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.