איך האתר הזה בנוי
קודם מילון מונחים בשפה פשוטה, ואז המבנה האמיתי — מה יש בכל תיקייה, ומה קורה מרגע שנכתב קוד ועד שהוא באוויר.
שלושת המדריכים הקודמים עסקו בכלים — שלושת הכלים של Claude, המדריך ל-Claude Code, וSkills ושגרות. המדריך הזה עוסק בתוצר: האתר שאתם קוראים בו עכשיו, מבפנים.
אין צורך בשום רקע טכני. החלק הראשון הוא מילון — כל מונח בשפה פשוטה, עם דימוי מהחיים. החלק השני הוא המבנה בפועל, כפי שהוא בקוד.
הערה על המקורות: המילון נולד בתרשים שנבנה ב-Cowork. התרשים עצמו נכתב כאן מחדש מקריאה בקוד — כי ל-Cowork אין חיבור ל-GitHub, ולכן הוא שיער את מבנה התיקיות. זו בדיוק הנקודה של המדריך השלישי, והפעם היא קרתה לנו בשידור חי.
חלק א׳ — מילון מונחים
כל מילה שמופיעה בהמשך, בשפה פשוטה. אפשר גם לדלג ולחזור לכאן כשנתקלים במונח.
📦 איפה הקוד חי
ריפו Repository
התיקייה הראשית של הפרויקט — כל הקבצים שמרכיבים את האתר, במקום אחד.
כמו: קלסר אחד שבו נמצאים כל דפי החוברת.גיט Git
מערכת שמתעדת כל שינוי בקבצים ושומרת את ההיסטוריה. תמיד אפשר לראות מה השתנה, מתי, ולחזור אחורה.
כמו: "מעקב אחר שינויים" בוורד — רק חזק בהרבה.גיטהאב GitHub
האתר שבו הריפו מאוחסן בענן. משם הוא זמין מכל מחשב או טלפון, בלי תלות במכשיר אחד.
כמו: גוגל דרייב, אבל לקוד.ענף ראשי main branch
הגרסה הרשמית של הפרויקט — זו שרצה באתר האמיתי. אפשר לפתוח ענפים צדדיים ולנסות דברים בלי לסכן אותה.
כמו: הטיוטה הסופית מול טיוטות עבודה בצד.דחיפה Push
העלאת השינויים מהמחשב אל הריפו בגיטהאב. עד שלא דוחפים — השינוי קיים רק אצלכם.
כמו: ללחוץ "שלח" אחרי שכתבתם מייל.בקשת מיזוג Pull Request
הצעה לשינוי שממתינה לאישור לפני שהיא נכנסת לגרסה הרשמית — הזדמנות לבדוק לפני שמשהו עולה לאוויר.
כמו: להגיש מסמך לאישור לפני הפצה.🚀 איך הקוד הופך לאתר חי
ורסל Vercel
השירות שמאחסן את האתר ומגיש אותו לגולשים. הוא גם מזהה שינוי בקוד ומעלה גרסה חדשה לבד.
כמו: בית דפוס שגם מדפיס וגם מחלק — אוטומטית, בכל עדכון.בנייה Build
התהליך שממיר את קוד המקור לקבצים שדפדפן יודע להציג. קורה אוטומטית ולוקח כדקה.
כמו: לייצא מסמך וורד ל-PDF לפני ששולחים.פריסה Deploy
הרגע שבו הגרסה החדשה מחליפה את הישנה ועולה לאוויר בפועל.
כמו: להחליף את השלט בחלון הראווה.בדיקה מול חי Preview / Production
Preview היא כתובת זמנית לבדיקה, שרק מי שיש לו הקישור רואה. Production היא הגרסה החיה שכל הגולשים מגיעים אליה.
כמו: חזרה גנרלית מול הצגה מול קהל.דומיין ו-DNS Domain / DNS
הדומיין הוא הכתובת שאנשים מקלידים. DNS מתרגמת אותה לשרת שבו האתר באמת יושב.
כמו: ספר טלפונים — שם קריא במקום מספר.בדיקות אוטומטיות CI
סדרת בדיקות שרצה על כל שינוי לפני שהוא נכנס. אם משהו נשבר — השינוי נעצר ולא מגיע לאתר.
כמו: בקרת איכות בסוף פס הייצור.🧱 מה יש בתוך הקוד
עמוד סטטי Static page
עמוד שכתוב מראש ומוגש לגולש כמו שהוא. מהיר, פשוט, ולא דורש חישוב בזמן אמת.
כמו: דף מודפס — מוכן, פשוט לוקחים אותו.אפליקציית דפדפן SPA
עמוד אחד שמחליף תוכן בתוך עצמו בלי לטעון מחדש. מתאים למשהו אינטראקטיבי כמו קורס עם התקדמות.
כמו: קלסר עם לשוניות — מדפדפים בלי לצאת ולחזור.קבצים סטטיים Static files
תמונות, קול, מצגות — כל מה שמוגש לגולש כמו שהוא, בלי שהמחשב צריך לחשב משהו.
כמו: ספרים על מדף — פשוט לוקחים.הפרדת תוכן מקוד
שמירת הטקסטים בקובץ נתונים נפרד, ולא בתוך הקוד. אז אפשר לתקן ניסוח בלי לגעת בלוגיקה.
כמו: להחליף את הטקסט בשלט בלי לבנות מחדש את המסגרת.🔌 חיבורים לשירותים חיצוניים
ממשק תכנות API
דרך שבה האתר מבקש שירות ממערכת אחרת ומקבל תשובה — למשל לבקש מבינה מלאכותית להקריא טקסט.
כמו: חלון הזמנות — מוסרים בקשה, מקבלים תוצאה.פונקציה בענן Serverless function
פיסת קוד קטנה שרצה בענן רק כשקוראים לה. שם שומרים סודות כמו מפתחות, שאסור שיגיעו לדפדפן.
כמו: עובד מאחורי הדלפק — קוראים לו רק כשצריך.מפתח משלך BYOK
"הבא את המפתח שלך" — גולש שמזין מפתח אישי שנשמר אצלו בדפדפן, כך שהשימוש על חשבונו ולא על חשבון בעל האתר.
כמו: מכונת קפה משותפת — כל אחד מביא קפסולה משלו.שגרה מתוזמנת Scheduled task
משימה שרצה לבד בשעה קבועה בלי שאף אחד לוחץ על כלום — למשל לאסוף חדשות כל בוקר.
כמו: שעון מעורר שמבצע פעולה במקום רק לצלצל.חלק ב׳ — הדרך מקוד לאתר
חמישה שלבים, מהמקום שבו נכתב השינוי ועד למסך של הגולש.
-
איפה העבודה נעשית
שלושה גורמים כותבים לפרויקט הזה, וכל אחד מגיע ממקום אחר:
Claude Codeכותב ומשנה קוד — מהמחשב או מהטלפוןגונןמבקש, מחליט ומאשר מה עולההרמססוכן שמייצר את עדכוני החדשות היומיים -
GitHub — מקור האמת
כל שינוי נדחף לענף צדדי ונפתחת עליו בקשת מיזוג. אי אפשר לדחוף ישירות ל-
main— הוא נעול, וזו הגנה מכוונת: שום דבר לא מגיע לאתר בלי לעבור בדיקה. -
הבדיקות האוטומטיות
על כל בקשת מיזוג רצה סדרת בדיקות. אם אחת נכשלת — השינוי נעצר שם ולא ממשיך.
בנייה ותקינותשהקוד בכלל נבנה ואין בו שגיאותבדיקות תוכנה78 בדיקות לוגיקה ו-39 בדיקות בדפדפן אמיתישומרי התוכןשלושה שומרים שמוודאים שחדשות ישנות לא נמחקו -
Vercel — בנייה ואירוח
ברגע שהשינוי מאושר ונכנס ל-
main, Vercel בונה את האתר מחדש ומעלה אותו. אף אחד לא "מעלה קבצים" ידנית.Previewלכל בקשת מיזוג נוצרת כתובת בדיקה נפרדתProductionהגרסה החיה, שאליה מצביע הדומיין דרך DNS -
מה שהגולש מקבל
רוב העמודים מוגשים מוכנים מראש ולכן נטענים מהר. שלושה דברים פונים בזמן אמת לשירות חיצוני, וכולם עוברים דרך פונקציות בענן כדי שהמפתחות לא ייחשפו בדפדפן:
🗣️ האווטאר המדברמנסח תשובה, מקריא אותה בקול, ומסנכרן את השפתיים🎁 הברכה הקוליתכותבים טקסט, בוחרים קול, ומורידים קובץ מוכן🎙️ הפודקאסטהופך ידיעת חדשות להקראה מלאההאווטאר והברכה חולקים בדיוק את אותו קוד הקראה —
api/tts.js. ההבדל הוא רק מה עושים עם התוצאה: אצל האווטאר היא מתנגנת מיד, ואצל הברכה היא יורדת כקובץ.
איפה הבינה המלאכותית נכנסת: האתר משתמש ב-Gemini של גוגל לאווטאר ולהקראה. יש מפתח של האתר, מוגבל ל-15 בקשות בדקה כדי שגולש אחד לא ינצל את המכסה לכולם — ובנוסף כל גולש יכול להזין מפתח משלו, שנשמר רק אצלו בדפדפן ואף פעם לא מגיע לשרת.
חלק ג׳ — מה יש בתוך הריפו
המבנה בפועל, נכון להיום. כל שורה היא תיקייה או קובץ אמיתי בפרויקט.
נקודה שכדאי להכיר: הפרדת התוכן מהקוד נכונה כאן חלקית. החדשות, הכלים והפרומפטים אכן יושבים בקובץ נפרד — data.json — ואפשר לעדכן אותם בלי לגעת בשום קוד.
אבל טקסט 39 השיעורים של הלומדה נמצא בתוך הקוד עצמו, בקובץ אחד בן כ-2,800 שורות. זה עובד, אבל זה אומר שתיקון ניסוח בשיעור דורש נגיעה בקוד — בניגוד לתיקון ניסוח בידיעת חדשות.
חלק ד׳ — מה שקורה מעצמו
שלושה דברים באתר רצים בלי שאף אחד נוגע בהם.
📰 החדשות מתעדכנות
הרמס מייצר ידיעות חדשות ודוחף אותן לענף נפרד. אוטומציה פותחת בקשת מיזוג, והיא ממזגת את עצמה ברגע שהבדיקות עוברות.
🛡️ הארכיון נשמר
שומר אוטומטי בודק בכל שינוי שאף ידיעה ישנה לא נמחקה. אם משהו נעלם — השינוי נחסם ולא עולה לאוויר.
⏰ שגרה יומית שומרת
כשגיטהאב דורש אישור ידני והמיזוג נתקע בשקט, שגרה יומית מזהה, משחררת ומדווחת.
⭐ שלוש נקודות לזכור
- הריפו הוא המקור. האתר החי הוא רק תוצר של מה שיושב בגיטהאב. שינוי שלא נדחף לשם — לא קיים.
- לא מעלים קבצים — דוחפים קוד. הבנייה והפריסה קורות לבד, וכל מה שנכנס עובר קודם דרך בקשת מיזוג ובדיקות.
- רוב האתר מוכן מראש. רק האווטאר, הברכה הקולית והפודקאסט פונים לשירות חיצוני בזמן אמת — ולכן שאר האתר מהיר, וממשיך לעבוד גם אם שירות חיצוני נופל.