בלוג
האזור האישי

אתר Astro באמצעות Claude Code: מתיקייה ועד לפרסום

Markdown

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

קריאת המאמר המלא

גם מי שמעולם לא כתב שורת קוד יכול לבנות אתר עם Astro באמצעות Claude Code. כבר מזמן הפסקתי לכתוב קוד ביד; אני עושה הכול במילים באמצעות AI, ובניית אתר עם Astro עובדת בדיוק באותה דרך: מסבירים מה צריך, ו-Claude כותב את הקוד.

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

על העבודה עם השירות — בתיעוד של Ailoot.

מה צריך לפני בניית אתר Astro באמצעות Claude Code?

הנקודות המרכזיות

שלושה דברים במחשב: גרסה עדכנית של Node.js, עורך קוד ומסוף. Node.js היא הסביבה שבה הכלים האלה פועלים; נכון למועד כתיבת המאמר, תיעוד Astro דורש גרסה 22.12.0 ומעלה ומזהיר שגרסאות אי-זוגיות, כמו 23, אינן נתמכות. העורך הוא בדרך כלל VS Code, שבו נמצא גם Claude Code. המסוף הוא חלון שחור להזנת פקודות; הוא כבר מובנה ב-VS Code. אין צורך להתקין את כל אלה בנפרד בשביל Astro: אם כבר בניתם משהו עם Claude Code, הסביבה שלכם מוכנה.

Astro עצמה אינה מבקשת להוריד דבר מראש — היא תורד באמצעות הפקודה בשלב הבא. אבל צריך את הסביבה שבה כל זה פועל. Astro מתארת את תחילת העבודה כך — דרושים שלושה דברים:

Node.js — גרסה v22.12.0 ומעלה. גרסאות אי-זוגיות, כמו v23, אינן נתמכות. עורך טקסט — אנחנו ממליצים על VS Code עם תוסף Astro הרשמי שלנו. מסוף — מנהלים את Astro דרך שורת הפקודה.

— תיעוד Astro, סעיף ההתקנה, https://docs.astro.build/en/install-and-setup/

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

  1. Node.js — תוכנה שבלעדיה לא Astro ולא רוב כלי ה-vibe-coding יפעלו. הורידו אותה מ-nodejs.org והתקינו אותה כמו כל יישום רגיל. מספר הגרסה שבתיעוד עולה עם הזמן, לכן לפני שמתחילים, בקרו בדף ההתקנה של Astro ובדקו את הדרישה. דרושה גרסה זוגית (22, 24); עדיף להימנע מגרסה אי-זוגית (23, 25).
  2. VS Code — עורך חינמי מבית Microsoft. פותחים בו את תיקיית הפרויקט, ו-Claude Code עובד גם שם; הוא יכתוב את הקוד.
  3. מסוף — חלון שבו מזינים פקודות. אין צורך להתקין אותו בנפרד: פותחים אותו מהתפריט ב-VS Code, ושם מזינים את כל הפקודות שבהמשך.

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

איך ליצור פרויקט Astro בפקודה אחת?

הנקודות המרכזיות

יוצרים פרויקט חדש באמצעות הפקודה npm create astro@latest במסוף. אשף נפתח ושואל כמה שאלות (היכן להתקין, באיזו תבנית להשתמש, האם להתקין תלויות), ואז יוצר עבורכם את שלד הפרויקט. אם תיקיית הפרויקט עדיין לא קיימת, האשף ייצור אותה. לאחר מכן עוברים לתיקיית הפרויקט באמצעות הפקודה cd ואפשר להתחיל. אין צורך ליצור תיקייה ריקה מראש.

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

npm create astro@latest

אשף ההתקנה יתחיל לפעול. כך מתאר אותו התיעוד:

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

— תיעוד Astro, סעיף ההתקנה, https://docs.astro.build/en/install-and-setup/

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

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

cd your-project-name

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

src/pages — תיקיית משנה נדרשת בפרויקט. בלעדיה, לא יהיו באתר דפים או נתיבים.

— תיעוד Astro, סעיף מבנה הפרויקט, https://docs.astro.build/en/basics/project-structure/

במילים אחרות, src/pages היא התיקייה שמכילה את דפי האתר: דף הבית, "אודות" ודפי יצירת קשר. בקרבתה נמצאות בדרך כלל src/components (רכיבים לשימוש חוזר, כמו כותרות וכפתורים), src/layouts (מבנה משותף לדפים) ותיקיית public לתמונות ולקבצים. אין צורך לשנן את המבנה — רק לזכור שהדפים נמצאים ב-src/pages, ולהזכיר זאת כשמבקשים מ-Claude: "הוסף דף יצירת קשר".

איך לבנות את האתר עצמו באמצעות Claude Code?

הנקודות המרכזיות

פתחו את תיקיית הפרויקט ב-VS Code, הפעילו את Claude Code, ואז הסבירו במילים מה אתם צריכים באתר. Claude עורך בעצמו את הקבצים ב-src/pages ובתיקיות הסמוכות. הוא עובד בצורה הטובה ביותר עם משימות קטנות וברורות: "צור דף בית עם כותרת, תיאור קצר וכפתור", ואז "הוסף דף שירותים", ואז "שנה את הצבעים לכהים". אחרי כל בקשה, בדקו את התוצאה בדפדפן והבהירו לפי הצורך. אין צורך לתכנת כאן. התפקיד שלכם הוא לתת הוראות ברורות ולבדוק מה מתקבל.

שלד האתר מוכן; עכשיו בונים ממנו את האתר, ו-Claude Code נכנס לפעולה. פתחו את תיקיית הפרויקט ב-VS Code, הפעילו את Claude Code, ותארו במילים מה אתם צריכים. הוא עורך בעצמו את הקבצים ב-src/pages ובתיקיות הסמוכות — אתם רק נותנים לו משימות ובודקים את התוצאה.

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

  1. "צור דף בית: כותרת גדולה, כמה משפטים על מה שאני עושה וכפתור המקשר לדף יצירת קשר."
  2. "הוסף דף שירותים עם רשימה של שלושה חלקים."
  3. "הוסף דף יצירת קשר עם מספר טלפון וקישור ל-Telegram."
  4. "שנה את העיצוב: רקע בהיר וגופן גדול וקריא."

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

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

איך אפשר לראות תצוגה מקדימה של האתר לפני הפרסום?

הנקודות המרכזיות

כדי לראות את האתר לפני שהוא עולה לאינטרנט, יש ל-Astro שרת פיתוח. הזינו את הפקודה npm run dev במסוף שבתוך תיקיית הפרויקט, ו-Astro תפעיל תצוגה מקדימה מקומית — בדרך כלל ב-localhost בפורט 4321. פתחו את הכתובת הזאת בדפדפן וצפו באתר בזמן אמת. השינויים ש-Claude מבצע בקבצים נקלטים תוך כדי עבודה: משנים טקסט, והדף מתעדכן מעצמו. השרת הזה גלוי רק לכם במחשב; הוא אינו מפרסם את האתר באינטרנט.

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

npm run dev

Astro תפעיל תצוגה מקדימה מקומית ותציג את הכתובת במסוף. כברירת מחדל, זו localhost:4321. העתיקו את הכתובת, פתחו אותה בדפדפן ותראו את האתר שלכם. בשלב הזה רק אתם יכולים לפתוח את הכתובת — אף אחד מחוץ למחשב שלכם אינו יכול לגשת אליה; זוהי הטיוטה שלכם.

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

איך לפרסם אתר Astro באינטרנט בחינם?

הנקודות המרכזיות

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

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

  1. יצירת מאגר ב-GitHub. מאגר הוא מקום מקוון לאחסון קוד, שאליו שולחים את קובצי הפרויקט. Claude Code יכול לעזור בכך באמצעות הוראות בשפה טבעית: בקשו ממנו "העלה את הפרויקט למאגר GitHub חדש", והוא יציע פקודות. אם מעולם לא השתמשתם ב-GitHub, כדאי לשמור בקרבת מקום הוראות להרשמה ולהתחברות.
  2. חיבור שירות אחסון. היכנסו לאחד השירותים (Netlify, Vercel) באמצעות חשבון GitHub ובחרו את המאגר שלכם. תיעוד Astro מתאר את השיטה כך: שירות האחסון עוקב אחר המאגר, בונה את האתר ומפרסם אותו.
  3. בדיקת הגדרות הבנייה. בדרך כלל שירות האחסון מזהה את Astro וממלא את מה שנדרש. אם הוא מבקש להזין אותן ידנית, פקודת הבנייה שבתיעוד היא astro build (או npm run build), והאתר המוגמר נשמר בתיקיית dist.
  4. לחיצה על "Publish". השירות יבנה את האתר ויספק לכם קישור כמו site-name.netlify.app. כל אחד יוכל לפתוח את האתר בכתובת הזאת.

כך בדיוק מתאר התיעוד את חיבור המאגר לשירות אחסון:

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

— תיעוד Astro, סעיף הפריסה, https://docs.astro.build/en/guides/deploy/

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

יש גם אפשרות חינמית שנייה — GitHub Pages, שבה האתר מתפרסם ישירות מהמאגר באמצעות הכלים של GitHub. ל-Astro יש תבנית התחלתית רשמית עבורה:

Astro תומכת ב-GitHub Action רשמי לפריסת פרויקט ב-GitHub Pages, כמעט ללא הגדרות, וזו הדרך המומלצת לפרוס ב-GitHub Pages.

— תיעוד Astro, סעיף הפריסה ב-GitHub Pages, https://docs.astro.build/en/guides/deploy/github/

באפשרות הזאת, האתר נפתח בכתובת כמו your-name.github.io/repository-name, ובהמשך אפשר לחבר אליו דומיין משלכם. גם את ההגדרה הזאת אפשר לבצע דרך Claude Code: תארו את המשימה במילים, והוא יכין את הקובץ הדרוש.

כמה עולה לבנות אתר Astro?

הנקודות המרכזיות

Astro עצמה חינמית וקוד המקור שלה פתוח — אין עליה תשלום. גם אחסון בסיסי יכול להיות בחינם: GitHub Pages, וכן תוכניות ההתחלה של Netlify ו-Vercel, שמתאימות לאתר Astro קל. ההוצאות בפועל הן על כלי ה-AI שבו משתמשים לבניית האתר (Claude) ועל דומיין משלכם, אם תרצו, במקום הכתובת החינמית של שירות האחסון. לכן אפשר לבנות ולפרסם אתר בלי לשלם על אחסון: משלמים רק על AI.

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

לכן, בפועל יש שני דברים שאולי תשלמו עליהם, וגם זה לא תמיד. הראשון הוא כלי ה-AI שבו אתם משתמשים לבניית האתר. השני הוא דומיין משלכם במקום כתובת כמו name.netlify.app; זה לא חובה, ועלותו השנתית נמוכה. אפשר להשלים את מסלול "בניית אתר ופרסומו באינטרנט" ולשלם רק על Claude.

מה עוד שואלים על אתרי Astro ועל Claude Code?

הנקודות המרכזיות

תשובות קצרות לשאלות נפוצות. אין צורך לדעת לתכנת: Claude כותב את הקוד, ואתם נותנים לו משימות במילים ובודקים את התוצאה. האתר המוגמר נשאר בקבצים שלכם ויכול להיות מאוחסן בכל שירות אחסון; הוא אינו כבול לפלטפורמה של מישהו אחר. Astro מתאימה לאתר תוכן — אתר תדמית, דף נחיתה, בלוג או אתר להצגת עבודות; לאזור חשבון אישי מורכב, עדיף לחפש פתרון אחר. ואפשר לפרסם את האתר המוגמר בחינם דרך GitHub.

שאלות נפוצות

האם צריך לדעת לתכנת כדי לבנות אתר עם Astro באמצעות Claude Code?

לא. כבר מזמן הפסקתי לכתוב קוד ביד; אני עושה הכול באמצעות AI. נותנים משימה במילים — "צור דף בית עם כותרת מהסוג הזה" — ו-Claude Code כותב ועורך עבורכם את הקבצים. אין צורך להכיר תחביר. צריך להבין איזה סוג אתר רוצים ולבדוק בדפדפן מה מתקבל.

האם צריך ליצור את תיקיית הפרויקט מראש?

לא. הפקודה npm create astro@latest מפעילה אשף שיוצר את התיקייה בעצמו אם היא עדיין אינה קיימת. אפשר להריץ את הפקודה בכל מקום במחשב. אחרי שהיא נוצרת, עוברים לתיקיית הפרויקט באמצעות הפקודה cd ועובדים בתוכה.

איך אפשר לראות תצוגה מקדימה של האתר לפני שהוא עולה לאינטרנט?

הריצו את הפקודה npm run dev בתוך תיקיית הפרויקט. Astro תפעיל תצוגה מקדימה מקומית, בדרך כלל ב-localhost:4321, ואפשר לפתוח את האתר בדפדפן במחשב שלכם. רק אתם יכולים לראות את התצוגה הזאת; השינויים נקלטים תוך כדי עבודה ואין צורך לרענן את הדף ידנית.

אפשר לפרסם אתר Astro בחינם?

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

האם Astro מתאימה לכל סוג של אתר?

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

במה Astro טובה יותר מבונה אתרים כמו Tilda ל-vibe-coding?

ההבדל הוא במה שנשאר אצלכם. אתר Astro מורכב מקבצים שלכם, המאוחסנים אצלכם ואפשר לפרסם אותם בכל שירות אחסון; שום שירות של צד שלישי אינו מחזיק בהם. אם תרצו לעבור או לבצע שינויים כעבור שישה חודשים, תוכלו לפתוח את הכול בכל כלי. הבחירה בין Astro לכלים אחרים תלויה בגישה הכללית ל-vibe-coding: בוחרים כלי לפי המשימה. מפת הכלים נמצאת במדריך לחלופות ל-Claude Code.

מקורות

הכירו את Ailoot.

פרטים נוספים

שאלות ותשובות: אתר Astro באמצעות Claude Code: מתיקייה ועד לפרסום

האם התצוגה המקומית של Astro מפרסמת את האתר באינטרנט?

לא. הפעלת npm run dev מתחילה תצוגת פיתוח מקומית ומדפיסה את כתובתה, בדרך כלל localhost:4321. פרסום הוא צעד נפרד באמצעות שירות אחסון או workflow לפריסה ב-GitHub Pages.

אילו הגדרות build לבדוק בשירות אחסון של Astro?

במסלול האתר הסטטי המתואר, בדקו שהשירות משתמש ב-astro build או ב-npm run build ומפרסם את תיקיית dist. אחרי הפריסה פתחו את הכתובת הציבורית של השירות ואמתו שם את הדפים; תצוגה מקומית לבדה אינה מאמתת פרסום.

כל המאמרים

בניית אתרים ואפליקציות והעלאה לאוויר

כל המאמרים