מ-⁨Claude Code⁩ לקישור חי: להעלות אתר לאוויר ב-⁨Vercel⁩

מה צריך לפני שמתחילים

שלושה דברים, וכולם לוקחים כמה דקות.

הראשון הוא קלוד קוד מותקן ועובד. קלוד קוד כלול במנויים בתשלום של קלוד, ואם עוד לא התקנתם אותו, יש לי מדריך התקנה מלא שעובר על זה צעד אחרי צעד.

השני הוא חשבון ב-Vercel, החברה שתאחסן לכם את האתר. נכנסים ל-vercel.com, נרשמים בחינם עם מייל או עם חשבון גיטהאב, ובוחרים במנוי החינמי, שנקרא Hobby.

השלישי הוא תוכנה בשם Node.js (סביבה שמריצה כלים שכתובים בשפת ג'אווה סקריפט). הכלי של Vercel שקלוד קוד משתמש בו כדי להעלות את האתר צריך אותה. אם היא לא מותקנת אצלכם, אל תדאגו, קלוד קוד יגלה את זה לבד בשלב ההעלאה ויבקש אישור להתקין.

לבנות את האתר בתיקייה

תפתחו תיקייה חדשה וריקה, ותפתחו בה את קלוד קוד.

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

לדוגמא:

תבנה לי אתר של עמוד אחד בתיקייה הזאת: תיק עבודות אישי של צלם. בראש העמוד השם שלי ומשפט אחד עליי, אחריו גלריה של שש תמונות, ובסוף כפתור ליצירת קשר בוואטסאפ. עיצוב כהה ונקי, בעברית, מימין לשמאל. הקובץ הראשי ייקרא index.html, והכל יישב בתוך התיקייה הזאת, בלי שרת ובלי מסד נתונים. כשתסיים, תפתח לי את האתר בדפדפן כדי שאראה אותו.

שימו לב לשורה על index.html. זה השם שאתרים מחפשים כשנכנסים לכתובת, ואם הקובץ הראשי ייקרא אחרת, הקישור החי יפתח לכם דף ריק או שגיאה.

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

להעלות לאוויר בבקשה אחת

זה השלב שמפחיד את כולם, והוא הכי קצר במדריך.

אתם כותבים לקלוד קוד:

תעלה את האתר שבתיקייה הזאת לאוויר ב-Vercel, לפרודקשן. אם חסר משהו במחשב כדי לעשות את זה, תגיד לי מה חסר ותבקש אישור לפני שאתה מתקין. כשצריך להתחבר לחשבון, תגיד לי. בסוף תן לי את הקישור הקצר של הפרויקט, זה שנגמר ב-vercel.app בלי אותיות אקראיות, ותוודא שהוא נפתח בלי בקשת התחברות.

פרודקשן (Production) הוא הגרסה הרשמית של האתר, זאת שכל העולם רואה. בלי המילה הזאת, Vercel יוצר גרסת ניסיון, ואליה אנשים אחרים לא יוכלו להיכנס.

מה שיקרה עכשיו: קלוד קוד יתקין את הכלי של Vercel אם צריך, ואז יבקש מכם להתחבר. ייפתח לכם דפדפן, אתם מאשרים את החיבור לחשבון שפתחתם, וחוזרים לקלוד קוד. את זה עושים רק בפעם הראשונה.

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

בסוף קלוד קוד מחזיר לכם קישור חי. תפתחו אותו בטלפון, ותשלחו אותו לחבר.

איזה קישור לשלוח

זה הדבר שהכי פחות אנשים יודעים, והוא שובר את רוב הניסיונות הראשונים.

Vercel נותן לכל העלאה שתי כתובות. אחת ארוכה, עם שם הפרויקט ואחריו אותיות ומספרים אקראיים. והשנייה קצרה, שם הפרויקט ואחריו vercel.app.

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

הקצרה היא הכתובת הרשמית של האתר, והיא פתוחה לכולם.

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

לעדכן את האתר החי

כאן מגיע החלק שהופך את כל זה לנוח באמת.

רוצים לשנות משהו? אתם כותבים לקלוד קוד מה לשנות, ומבקשים להעלות שוב באותה הודעה:

תחליף את צבע הכפתורים לכחול, ותעלה את האתר שוב לאוויר ב-Vercel, לפרודקשן.

הוא משנה את הקבצים, מעלה גרסה חדשה, והקישור הקצר מתחיל להציג אותה. אותו קישור, בלי לשלוח לאף אחד משהו חדש.

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

ואם בכל זאת העליתם משהו שבור, יש דרך חזרה:

האתר החי נשבר אחרי העדכון האחרון. תחזיר את הפרודקשן ב-Vercel לגרסה הקודמת, ותגיד לי מה השתנה בין שתי הגרסאות.

לחבר דומיין משלכם

הקישור של vercel.app עובד מצוין, אבל אם יש לכם דומיין (כתובת אתר משלכם, כמו השם שלכם ואחריו co.il), אפשר לחבר אותו.

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

תחבר את הדומיין example.co.il לפרויקט שלי ב-Vercel, ותגיד לי בדיוק אילו רשומות DNS להגדיר בחברה שממנה קניתי אותו, שדה אחרי שדה.

במקום example.co.il כותבים את הדומיין שלכם.

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

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

מתי המנוי החינמי לא מתאים

את זה חשוב לדעת לפני שמעלים, ולא אחרי.

המנוי החינמי של Vercel מיועד לשימוש אישי ולא מסחרי בלבד. לדוגמא: תיק עבודות אישי, אתר לאירוע משפחתי, פרויקט שאתם לומדים עליו.

ולפי ההנחיות שלהם, מסחרי זה רחב יותר ממה שנדמה. אתר של עסק, אתר שמוכר משהו או מציג פרסומות, וגם אתר שמישהו קיבל כסף כדי לבנות, נחשבים מסחריים. לכל אלה צריך מנוי בתשלום, ואת המחיר העדכני תבדקו בעמוד התמחור של Vercel לפני שאתם מחליטים.

עוד שני דברים שכדאי לדעת על המנוי החינמי. אם אתר עובר את מגבלות השימוש שלו, Vercel עוצר אותו, וברוב המקרים צריך לחכות שלושים יום עד שהוא חוזר. ולפי תנאי השימוש של Vercel, תוכן שמעלים במנוי החינמי יכול לשמש אותם לאימון מודלים של בינה מלאכותית. אם יש באתר משהו שאתם לא רוצים שיצא החוצה, תחשבו על זה לפני שאתם מעלים.

תקלות נפוצות, ומה עושים

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

הקישור החי מציג דף ריק או שגיאה 404 (שגיאה שאומרת שהדף לא נמצא). כמעט תמיד הקובץ הראשי לא נקרא index.html, או שהוא יושב בתוך תיקייה פנימית. תבקשו מקלוד קוד לבדוק איפה הקובץ הראשי, ולהעלות שוב.

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

ההתקנה של הכלי של Vercel נכשלת. ברוב המקרים חסרה התוכנה Node.js, או שהטרמינל (החלון שבו מריצים פקודות) נפתח לפני שהיא הותקנה. תסגרו את קלוד קוד, תפתחו אותו מחדש באותה תיקייה, ותבקשו שוב.

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

ההעלאה הגיעה לחשבון הלא נכון. זה קורה למי שיש לו יותר מחשבון אחד ב-Vercel. במסך האישור בדפדפן כתוב לאיזה חשבון אתם מתחברים, ושווה לקרוא את זה לפני שלוחצים.

סיכום

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

הצעד הבא הוא לגרום לאתר להיראות כמו שעיצבו אותו ולא כמו ברירת מחדל, ועל זה כתבתי את המדריך על ערכת העיצוב של Claude Code.

אהבתם את המדריך? מוזמנים לעקוב אחריי באינסטגרם ⁨@moshe.elkrief⁩ לעוד תכנים.