מדריך לבניית אתרים ב ai
-
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS 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
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
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 URLgit 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
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
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
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
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 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
-
-
@עניו-כמשה מדריך שלם שנבנה עם AI, מה הקטע? כל אחד יכול לבקש כזה בעצמו...
-
@עניו-כמשה מדריך שלם שנבנה עם AI, מה הקטע? כל אחד יכול לבקש כזה בעצמו...
@אברהם-גלסר כתב במדריך לבניית אתרים ב ai:
מה הקטע? כל אחד יכול לבקש כזה בעצמו...
תכלס... הוא חסך לך זמן.
לא?
(מותר גם לפרגן, לאדם שהקדיש מזמנו האישי למשהו שחשב בכל אופן שיכול להועיל ולסייע ולעזור לאי מי ברחבי הקוסמוס)
-
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS 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
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
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 URLgit 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
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
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
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
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 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
קודם כל תודה רבה על המדריך!
@עניו-כמשה כתב במדריך לבניית אתרים ב ai:
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
למה בעצם אני צריך את גיטהב? למה לא להשאיר על המחשב? מה הערך המוסף שגיטהב נותן לי חוץ מאחסון?
-
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS 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
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
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 URLgit 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
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
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
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
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 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
@עניו-כמשה אני חושב שהמדריך נפלא
עושה סדר לאנשים בראש מה התבנית אחר כך עם AI אפשר לשנות להחליף שירותים העיקר שלפחות הרעיון הבסיסי מובן בראש -
האמת שאני הרגשתי מאוד לא נעים לקרוא את השרשור הזה, למה לתקוף מיד? בן אדם שעבד קשה על משהו, מן הראוי קודם לשבח ואז לכתוב לו הערות והארות, ממש חבל שככה ענו לו, (וחוץ מזה אפשר לכתוב לו הערות באישי).
חוץ מזה יש כאן באתר שני סוגי אנשים 1. אנשים שכבר בתוך הענינים כמה שנים ומבינים הכל ולהם באמת לא מועיל כאלו פרוקטים והסברים, אבל מצד שני יש כאלו שרק עכשיו מתחילים או מדי פעם רוצים להתעסק בזה ואינם 'מבינים' ולהם זה יועיל כנראה.אבל מכיון שמי שכתב את המדריך הוא "עניו כמשה" מסתמא הוא לא כועס.......
-
האמת שאני הרגשתי מאוד לא נעים לקרוא את השרשור הזה, למה לתקוף מיד? בן אדם שעבד קשה על משהו, מן הראוי קודם לשבח ואז לכתוב לו הערות והארות, ממש חבל שככה ענו לו, (וחוץ מזה אפשר לכתוב לו הערות באישי).
חוץ מזה יש כאן באתר שני סוגי אנשים 1. אנשים שכבר בתוך הענינים כמה שנים ומבינים הכל ולהם באמת לא מועיל כאלו פרוקטים והסברים, אבל מצד שני יש כאלו שרק עכשיו מתחילים או מדי פעם רוצים להתעסק בזה ואינם 'מבינים' ולהם זה יועיל כנראה.אבל מכיון שמי שכתב את המדריך הוא "עניו כמשה" מסתמא הוא לא כועס.......
@ר-יענקל-ה כתב במדריך לבניית אתרים ב ai:
מסתמא הוא לא כועס
אין מה לכעוס בכלל
רשות הדיבור ניתנה לכל אחד
אבל בטח לא רשות הזלזול
בכל אופן כמו שכתבתי זה מיועד למתחילים ממש לקבל את המושגים בלבד ואת ההתאמה האישית כל אחד יעשה לעצמו
-
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS 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
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
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 URLgit 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
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
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
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
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 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
@עניו-כמשה קודם כל מצטער מאוד שהשתמע מדברי שזלזלתי.
התכוונתי לומר שלא נראה לי שלזה מיועד הפורום.
לא נראה שניכרת השקעה כל כך ב"כתיבת המדריך" שנכתב על ידי AI.
גם אם עברת על מה שהAI כתב כדי לתקן קצת, זה עדיין מדריך שנכתב 90/100% על ידי AI וזה בדיוק מסוג הדברים שמספימים את הפורום.
תחשוב על זה; בן אדם יכול לשאול "למה בכלל צריך את הפורום עכשיו אם יש AI? כל אחד יכול פשוט לשאול אותו והוא יענה על הכל..."
התשובה הפשוטה בעיניי היא שניסיון שווה המון. אנשים פה באו לקרוא ולהחכים וללמוד מאנשים שיש להם ניסיון ולא מAI שכל אחד יכול פשוט לשאול אותו בעצמו.
דעתי בפועל לא משנה פה ואני לא צוות פיקוח ובטח לא האחראי על הסדר פה בפורום ובכל זאת זה צרם לי.
אשאיר את ההחלטה כמו שכתבתי ל @צוות-פיקוח המדהימים.
אם יש בעיה עם הפוסט שלי תמחקו אותו. -
@עניו-כמשה קודם כל מצטער מאוד שהשתמע מדברי שזלזלתי.
התכוונתי לומר שלא נראה לי שלזה מיועד הפורום.
לא נראה שניכרת השקעה כל כך ב"כתיבת המדריך" שנכתב על ידי AI.
גם אם עברת על מה שהAI כתב כדי לתקן קצת, זה עדיין מדריך שנכתב 90/100% על ידי AI וזה בדיוק מסוג הדברים שמספימים את הפורום.
תחשוב על זה; בן אדם יכול לשאול "למה בכלל צריך את הפורום עכשיו אם יש AI? כל אחד יכול פשוט לשאול אותו והוא יענה על הכל..."
התשובה הפשוטה בעיניי היא שניסיון שווה המון. אנשים פה באו לקרוא ולהחכים וללמוד מאנשים שיש להם ניסיון ולא מAI שכל אחד יכול פשוט לשאול אותו בעצמו.
דעתי בפועל לא משנה פה ואני לא צוות פיקוח ובטח לא האחראי על הסדר פה בפורום ובכל זאת זה צרם לי.
אשאיר את ההחלטה כמו שכתבתי ל @צוות-פיקוח המדהימים.
אם יש בעיה עם הפוסט שלי תמחקו אותו.@אברהם-גלסר כתב במדריך לבניית אתרים ב ai:
שניסיון שווה המון.
וזה בדיוק מה שיש פה
כי לא כל אחד מבין את מה שכותב הAI ויודע להחליט שזה דבר נכון במאה אחוז
אני לא רואה פסול במדריך מ AI שאתה אישרת אותו כי הנסיון שלך הראה לך שזה מדריך מצוין
-
@אברהם-גלסר כתב במדריך לבניית אתרים ב ai:
שניסיון שווה המון.
וזה בדיוק מה שיש פה
כי לא כל אחד מבין את מה שכותב הAI ויודע להחליט שזה דבר נכון במאה אחוז
אני לא רואה פסול במדריך מ AI שאתה אישרת אותו כי הנסיון שלך הראה לך שזה מדריך מצוין
-
פוסט זה נמחק!
-
@עניו-כמשה להגיד לך משהו
אם כמו שאמרת שזה המדריך הראשון שלך
לי ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
וכשאני רואה כאלה קיצורי דרך וזה מראה שהשלב הבא של הפורום יהיה כולו AI -
@עניו-כמשה להגיד לך משהו
אם כמו שאמרת שזה המדריך הראשון שלך
לי ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
וכשאני רואה כאלה קיצורי דרך וזה מראה שהשלב הבא של הפורום יהיה כולו AI@לנציצ כתב במדריך לבניית אתרים ב ai:
ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
אפשר להגיד על אותו דרך /שאין להעלות לפורום תוכנות שנוצרו ע"י AI בגלל שכל אחד יכול ליבקש מהAI לבד
אבל כל אחד מבין שמותר להעזר בבינה בשביל ליצור דברים וגם מדריכיםלגבי מה שכתוב בהוראות לשימוש בפורום זה לא לענות תשובות של הAI אבל מותר ליצור דברים ולהעלות לפורום
-
@לנציצ כתב במדריך לבניית אתרים ב ai:
ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
אפשר להגיד על אותו דרך /שאין להעלות לפורום תוכנות שנוצרו ע"י AI בגלל שכל אחד יכול ליבקש מהAI לבד
אבל כל אחד מבין שמותר להעזר בבינה בשביל ליצור דברים וגם מדריכיםלגבי מה שכתוב בהוראות לשימוש בפורום זה לא לענות תשובות של הAI אבל מותר ליצור דברים ולהעלות לפורום
@יוסף-הכהן אז חבל שאתה לא קורא את חוקים לפני שאתה מדבר
תקרא ותפנים ונדבר -
@יוסף-הכהן אז חבל שאתה לא קורא את חוקים לפני שאתה מדבר
תקרא ותפנים ונדבר@לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
-
@לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
ועד שם את זה בספוילר פתאום
אם לא אנחנו זה היה בראשי ולא בספויילר
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין -
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
ועד שם את זה בספוילר פתאום
אם לא אנחנו זה היה בראשי ולא בספויילר
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין -
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS 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
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
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 URLgit 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
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
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
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
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 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
@עניו-כמשה כתב במדריך לבניית אתרים ב ai:
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.אולי תסביר לנו מה ההבדל אני תמיד משתמש בCSS לא ידעתי שזה לא טוב
-
@עניו-כמשה כתב במדריך לבניית אתרים ב ai:
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.אולי תסביר לנו מה ההבדל אני תמיד משתמש בCSS לא ידעתי שזה לא טוב
@עמי-מחשבים זה כן טוב.
Tailwind זה פרמוורק לCSS.
זה די לא נכון לכתוב ש'במקום' CSS משתמשים בו.
כי זה בס"ה עיצוב בלוקים של שפת העיצוב CSS..
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}