HIT · המכון הטכנולוגי של חולון · מפגש 5 · האחרון

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

דף הסיכום של המפגש האחרון, וזה שכדאי לשמור הכי קרוב: כל התהליך לבניית אתר פורטפוליו עם Claude Code והעלאה שלו לאינטרנט עם Netlify, עם ה-prompt המלא מוכן להעתקה. תחזרו לדף הזה בכל פעם שתרצו לעדכן את האתר.

מפגש
5 מתוך 5 · האחרון
פורמט
אונליין · מוקלט
התוצאה
אתר חי עם כתובת משלכם
קישור להקלטה. יישלח במייל בשעות הקרובות וגם יוטמע כאן

תיאור נכנס, אתר חי יוצא: המתכון בשלושה שלבים

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

Claude Code בונה

שלבים 1-2 · תיאור ובנייה
  • תיקייה חדשה וריקה, פותחים בה את Claude Code
  • נותנים את ה-prompt הפותח (למטה) עם הפרטים שלכם
  • מקבלים אתר שלם בקובץ index.html אחד
  • משפרים: בקשה קטנה אחת בכל פעם, רענון, ושוב

Netlify מעלה לאוויר

שלב 3 · דיפלוי בגרירה
  • נרשמים בחינם, פעם אחת, בלי כרטיס אשראי
  • גוררים את תיקיית האתר לדפדפן
  • מקבלים כתובת חיה תוך שניות
  • עדכון עתידי: גוררים שוב, אותה כתובת מתעדכנת

למה קובץ אחד? אתר של index.html יחיד קל לפתוח, קל לתקן, וקל להעלות. כשהאתר יגדל ויהיה מורכב יותר, Claude כבר יפצל אותו לקבצים לבד. מתחילים פשוט.

התבנית: 4 שורות שבונות אתר

פתחו תיקייה חדשה (למשל my-site), הריצו בה claude, והדביקו את התבנית אחרי שהחלפתם את הסוגריים המרובעים בפרטים שלכם:

ה-prompt הפותח · מחליפים את הסוגרייםהעתיקו ומלאו
בנה לי אתר פורטפוליו אישי בקובץ index.html יחיד, בעברית, RTL. עליי: [שם מלא, מה אתם לומדים ובאיזו שנה, משפט אחד עליכם] הפרויקטים: [פרויקט 1: שם + משפט על מה הוא עושה ובמה נבנה] · [פרויקט 2: ...] · [פרויקט 3: ...] מטרה וסגנון: [למי האתר מיועד, למשל: מעסיקים]. [נקי ומודרני / צבעוני / כהה], צבע מוביל אחד.

יש לכם חומרים? שימו תמונה שלכם או צילומי מסך של הפרויקטים בתיקייה, וכתבו ל-Claude: "יש בתיקייה תמונה בשם photo.jpg, שלב אותה באתר". קישורים ל-GitHub ול-LinkedIn משדרגים מאוד. ואם אין העדפת סגנון, כתבו: "בחר אתה סגנון נקי שמתאים לפורטפוליו של סטודנט להנדסה".

רואים בדפדפן, מבקשים תיקון אחד, חוזרים

פותחים את index.html בדפדפן (דאבל-קליק על הקובץ), מסתכלים, ומבקשים שינוי אחד בכל פעם. אחרי כל בקשה: F5 בדפדפן ורואים את השינוי. 3-4 סבבים כאלה והאתר נראה מקצועי. בקשות לדוגמה, מוכנות להעתקה:

פריסה "הפוך את כרטיסי הפרויקטים לשלושה טורים במקום רשימה."
ניווט "הוסף למעלה תפריט עם קישורים לחלקים של הדף."
יצירת קשר "תוסיף בסוף חלק יצירת קשר עם המייל וה-LinkedIn שלי."
מובייל "תבדוק שהאתר נראה טוב גם במובייל, ותקן אם צריך." (מעסיקים פותחים בטלפון)
סגנון "החלף את הצבע המוביל לכחול כהה, ותגדיל את הכותרת הראשית."

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

Netlify: גוררים תיקייה, מקבלים כתובת

1
נרשמים בחינם ל-Netlify (פעם אחת)
בכתובת netlify.com, הכי מהיר עם חשבון Google. בלי כרטיס אשראי. החבילה החינמית מספיקה בשפע לאתר אישי.
2
גוררים את תיקיית האתר לאזור ההעלאה
נכנסים ל-app.netlify.com/drop וגוררים את כל התיקייה (זו שמכילה את index.html, לא את הקובץ לבד) אל הדפדפן.
3
מקבלים כתובת, והאתר באוויר
תוך שניות יש URL חי. פתחו אותו בטלפון כדי להרגיש שזה אמיתי, ושלחו למי שתרצו.
4
בונוס: כתובת עם השם שלכם
הכתובת הראשונית אקראית. משנים אותה בהגדרות האתר: Site configuration ← Site details ← Change site name, ובוחרים למשל yourname-portfolio.netlify.app. זו הכתובת ששמים בקורות חיים.
5
עדכון האתר בעתיד
מבקשים שינוי מ-Claude, בודקים בדפדפן, ואז בעמוד האתר שלכם ב-Netlify, לשונית Deploys, גוררים את התיקייה המעודכנת. אותה כתובת, גרסה חדשה.

זה כל התהליך. בלי git, בלי טרמינל, בלי הגדרות DNS. יש גם חלופות (GitHub Pages, Vercel) והעיקרון זהה: תיקייה נכנסת, כתובת יוצאת.

התקלות הנפוצות והתיקון של כל אחת

Claude בנה הרבה קבצים / React בקשו ממנו: "תאחד הכל לקובץ index.html יחיד, בלי frameworks."
העברית הפוכה או מיושרת שמאלה בקשו: "תוודא שה-html מוגדר dir="rtl" ו-lang="he"."
Netlify לא מקבל את הגרירה ודאו שאתם גוררים את התיקייה (או zip שלה), לא את קובץ ה-index.html לבד.
Netlify מבקש התחברות באמצע דלגתם על ההרשמה. הירשמו ב-netlify.com עם Google, וחזרו ל-app.netlify.com/drop.
אין לכם 3 פרויקטים מוכנים פרויקט מקורס, תחביב אחד, והקורס הזה עצמו. שלושה משפטים של שורה אחת מספיקים לגרסה ראשונה.
האתר מכוער בגרסה הראשונה נורמלי לגמרי. זה מה שסבבי השיפור פותרים. תקנו את הדבר הכי צורם קודם, ותמשיכו.

המסע שעברתם

מפגש 1
התקנה ושפה
Claude Code על המחשב. לתאר משימות במילים.
מפגש 2
Skills וסוכנים
ללמד אותו טריקים ולתת לו תפקידים.
מפגש 3
מוח שני
CLAUDE.md וזיכרון. הוא יודע מי אתם.
מפגש 4
MCP · ידיים
מחובר ל-Excel, ל-Excalidraw, ולעולם.
מפגש 5
שיפינג
אתר חי באינטרנט, עם כתובת משלכם.

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

3 הרגלים שישאירו אתכם חדים

1
משימה אמיתית אחת בשבוע
סיכום חומר לפני מבחן, ניתוח גיליון, סקריפט קטן שחוסך עבודה. הכלי נשאר חד רק אם משתמשים בו על דברים אמיתיים.
2
תחזקו את המוח השני
תיקנתם את Claude פעמיים על אותו דבר? זה שייך ל-CLAUDE.md. ככה הוא נהיה יותר שלכם עם כל שבוע.
3
עדכנו את האתר
פרויקט חדש נגמר? באותו יום הוא באתר: שלוש שורות ל-Claude, גרירה אחת ל-Netlify. הפורטפוליו החי שלכם הוא עכשיו כרטיס הביקור שלכם.

והכי חשוב: האתר שהעליתם היום הוא לא סוף הקורס, הוא נקודת הפתיחה. כל מה שתבנו מכאן והלאה, יש לו עכשיו בית עם כתובת.

איפה להמשיך