איך להעביר אתר מ-Lovable לדומיין ואחסון ב-Hostinger מדריך מפורט

שלב 1: הכנת המחשב שלכם

כדי שהמחשב יוכל להפוך את הקוד של Lovable לאתר אמיתי, הוא צריך להתקין מנוע שנקרא Node.js.

1. הורדה: היכנסו לאתר nodejs.org.
2. בחירה: חפשו את הכפתור שאומר "Current" (גרסה 24 ומעלה). זהו הגרסה עם התכונות הכי חדשות.
3. התקנה: הורידו את הקובץ והריצו אותו כמו כל תוכנה אחרת (נקסט, נקסט, פיניש).
4. איך יודעים שזה הצליח?
   • לחצו על כפתור "התחלה" במקלדת, הקלידו את האותיות cmd ולחצו Enter. ייפתח חלון שחור.
   • בחלון השחור הקלידו: node -v ולחצו Enter.
   • אם ראיתם מספר (כמו v24.1.0), המחשב שלכם מוכן לעבודה!

שלב 2: רכישת דומיין ב-Hostinger ויצירת תת דומיין לכל פרויקט בנפרד

כדי שהאתר יופיע בכתובת משלו (למשל collage.apps-ai.org), עלינו להכין לו "מיקום" נפרד בשרת.
השימוש בתיקייה נפרדת בתוך ה-File Manager הוא קריטי: הוא מבטיח הפרדה מוחלטת בין הקבצים של האפליקציה לבין קבצי הוורדפרס או אפליקציות אחרות.
זה מונע מצב שבו עדכון או תקלה באתר אחד ימחקו בטעות קבצים של אתר אחר, ושומר על סדר מושלם בניהול הפרויקטים שלכם.

1. כדי לחסוך בזמן שלי נעזרתי בצאט ai של הוסטינגר ככה רשמתי לו:"אני רוצה לרכוש דומיין לשנתיים במחיר הכי טוב שיש וזול ועליו לפתוח תת דומיינים לכל פרויקט"
   • כניסה לניהול הקבצים:
     • חפשו ב-Hostinger את ה-File Manager.
     • היכנסו לתיקיית public_html.
     • היכנסו לתיקיית הסאב-דומיין שיצרתם (למשל collage). ודאו שהיא ריקה (אם יש שם קובץ בשם default.php, מחקו אותו).אחר רכישת דומיין רשמו באותה שיחה:רכשתי את הדומין: apps-ai.org והתקנתי עליו וורדפרס (זה האתר הראשי שיכיל בתוכו את כל הפרויקטים)
       "עכשיו אני רוצה לפתוח לאותו דומיין תת דומיין ללא וורדפרס ואם תיקייה נפרדת השם: "collage"זאת התוצאה: בוצע: נוצר תת‑הדומיין collage.apps-ai.org והוא מצביע לתיקייה נפרדת /public_html/collage (לא לתיקיית השורש של הוורדפרס).כדי לוודא/לנהל אותו ב‑hPanel: כנסי ל‑Subdomains עבור apps-ai.org דרך הכפתור שיופיע עכשיו.

שלב 3: פתיחת חשבון ב-GitHub

GitHub הוא האתר הפופולרי בעולם לאחסון קוד. אנחנו צריכים אותו כדי שיהיה ל-Lovable לאן "לשפוך" את הקוד שלכם.

1. כניסה: היכנסו לאתר github.com.
2. הרשמה: לחצו על הכפתור הלבן Sign up בפינה הימנית למעלה.
3. תהליך ההרשמה (מתבצע בצורה של צ'אט):
   • Enter your email: הקלידו את כתובת המייל שלכם ולחצו על Continue.
   • Create a password: בחרו סיסמה חזקה. שימו לב: בזמן ההקלדה הסמן לא יזוז מטעמי אבטחה, פשוט הקלידו ולחצו Continue.
   • Enter a username: בחרו שם משתמש (למשל השם שלכם באנגלית). זה השם שיופיע בקישורים, אז בחרו משהו מקצועי.
   • Email preferences: הקלידו את האות n (כדי לא לקבל פרסומות) ולחצו Continue.
4. אימות (Puzzles): תתבקשו לפתור חידה קלה כדי להוכיח שאתם לא רובוטים.
5. קוד אימות: GitHub ישלח לכם קוד בן 8 ספרות למייל. העתיקו אותו והדביקו באתר.
6. סיום מהיר: האתר ישאל אתכם כמה שאלות. אתם יכולים פשוט ללחוץ על Skip personalization בתחתית העמוד כדי לדלג ישירות לחשבון החדש שלכם.

שלב 4: העברת הקוד מ-Lovable ל-GitHub

עכשיו כשיש לכם חשבון, אנחנו מחברים את Lovable אליו.

1. ב-Lovable: לחצו מתחת לשם הפרויקט על החץ ולחצו על כפתור settings
2. בתפריט הצד לחצו על: Connectors
3. לחצו על כפתור ה-GitHub
4. חיבור: אם הפרויקט לא מחובר, לחצו על Connect. Lovable יבקש רשות להתחבר לחשבון שיצרתם – לחצו על Authorize.
5. סנכרון: ודאו שמופיעה ההודעה Project: Connected. זה אומר שכל שינוי שתעשו מעכשיו ב-Lovable יישמר אוטומטית בגיטהאב.

שלב 5: הורדת הקוד למחשב וארגון התיקיות

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

1. במחשב אפשרי בשולחן העבודה צרו תיקיית בשם: MY_PROJECTS.
2. ב-GitHub: היכנסו לעמוד הפרויקט (Repository) שלכם. לחצו על הכפתור הירוק שכתוב עליו  Code ובחרו באופציה Download ZIP, לתיקייה שפתחתם.
3. חילוץ תיקיית הקוד
   • חלצו (Extract) את תוכן ה-ZIP לתוך תיקייה חדשה בשם הפרויקט (למשל collage) בתוך תיקייתMY_PROJECTS
4. בדיקה: היכנסו לתיקייה. אם אתם רואים קבצים כמו package.json ותיקייה בשם src, הצלחתם!

(לכל פרויקט חייבת להיות תיקיית נפרדת במחשב).

שלב 6: הפיכת הקוד לאתר (תהליך ה-Build)

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

1. פתיחת הטרמינל בתוך התיקייה:
   • היכנסו לתיקייה שלכם בסייר הקבצים (במקום שבו חילצתם את הקוד).
   • לחצו על שורת הכתובת למעלה (איפה שכתוב הנתיב), מחקו את מה שכתוב שם, הקלידו את האותיות cmd ולחצו Enter.
2. התקנת הספריות: בחלון השחור שנפתח, הקלידו את הפקודה הבאה ולחצו Enter: npm install המתינו דקה עד שהטקסט יפסיק לרוץ והסמן יחזור. זה יוצר תיקייה בשם node_modules.
3. יצירת האתר הסופי: הקלידו את הפקודה הבאה ולחצו Enter: npm run build
4. התוצאה: בסיום, תראו שנוצרה תיקייה חדשה בשם dist. התיקייה הזו היא האתר שלכם!

שלב 7: העלאת תיקיית ה-dist ל public_html בהוסטינגר

• חפשו ב-Hostinger את ה-File Manager.
• היכנסו לתיקיית public_html.
• היכנסו לתיקיית הסאב-דומיין שיצרתם (למשל collage). ודאו שהיא ריקה (אם יש שם קובץ בשם default.php, מחקו אותו.
• שלב 8: העלאת האתר לאוויר

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

1. הכנת ה-ZIP במחשב (שימו לב לדיוק):
   • היכנסו לתוך תיקיית dist במחשב שלכם.
   • סמנו את כל הקבצים והתיקיות שבפנים (Ctrl + A).
   • לחצו קליק ימני ובחרו ב-"שלח אל" -> "תיקייה דחוסה (ZIP)". קראו לה upload.zip.
2. העלאה וחילוץ:
   • העלו את קובץ ה-upload.zip לתיקייה ב-Hostinger.
   • לחצו קליק ימני על הקובץ בשרת ובחרו Extract.
   • כשנפתח חלון ומבקש שם לתיקייה, הקלידו נקודה (.) ולחצו Extract. זה אומר לו לחלץ הכל בתוך התיקייה הנוכחית.
3. יצירת קובץ הניתוב (.htaccess):
   • לחצו על אייקון "קובץ חדש" (New File).
   • קראו לו בדיוק כך: .htaccess (עם נקודה בהתחלה).

הדביקו בפנים את הקוד הבא ושמרי:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

הללויה! האפליקציה/אתר באוויר!

ברכות! האתר שלכם פועל באופן עצמאי בכתובת המקצועית שלכם.

מה קורה אם רוצים לעדכן?

1. שנו את הקוד ב-Visual Studio Code במחשב שלכם.
2. הריצו שוב את הפקודה npm run build בטרמינל.
3. העלו את תוכן תיקיית ה-dist החדשה ל-Hostinger והחליפו את הקבצים הישנים.

גיבוי ושמירה לעתיד

המחשב יכול להתקלקל, לכן הגיבוי הוא חובה:

1. GitHub: הקפידו לסנכרן כל שינוי לגיטהאב. זה הגיבוי הכי בטוח.
   איך מעלים עדכונים לגיטהאב? לאחר שביצעתם שינויים בקוד בתיקיית הפרויקט:
   • פתחו את הטרמינל (CMD) בתוך תיקיית הפרויקט (כמו בשלב 4).
   • הקלידו git add . ולחצו Enter (מסמן את כל השינויים).
   • הקלידו git commit -m "update" ולחצו Enter (חותם את השינוי במחשב).
   • הקלידו git push ולחצו Enter (מעלה הכל לשרת של גיטהאב).
2. ענן (Google Drive / Dropbox): גבו את תיקיית הפרויקט כולה (למשל collage-app) פעם בשבוע.
   • טיפ: לפני הגיבוי לענן, אתם יכולים למחוק את תיקיית node_modules – היא כבדה מאוד ומיותרת לגיבוי (היא תמיד תיווצר מחדש בעזרת npm install).

חשוב לזכור שיש 3 דרגות של "עדכון":

1. במחשב: קורה מיד ברגע השמירה בויזואל סטודיו (ניתן להפעיל "Auto Save" בתפריט File כדי שזה יקרה אוטומטית).

2. בגיטהאב: הקבצים שם יתעדכנו רק אחרי שתריצי את פקודות ה-git push (כפי שמופיע בסוף המדריך).

3. באתר (Hostinger): האתר יתעדכן רק אחרי שתריצי שוב npm run build ותעלי את ה-ZIP החדש לשרת.

כל הקודים להעתקה מהירה

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

להורדת המצגת 

ט.ל.ח | המדריך פונה לנשים וגברים כאחד. הטכנולוגיה, הממשקים ותהליכי העבודה הם דינמיים ומשתנים לעיתים תכופות על ידי החברות השונות (Lovable, Hostinger וכו'), ולכן ייתכנו שינויים קלים בין הכתוב במדריך לבין המציאות בפועל בכל רגע נתון.