כיצד לפרוס אפליקציית React בחינם עם דפי GitHub

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

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

צור אפליקציית React

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

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

npx create-react-app react-gh

נווט אל התיקיה שנוצרה והפעל את היישום שלך.

הפעלת npm run

לאחר מכן, פתח את תיקיית הפרויקט עם המועדף עליך עורך קוד. בתוך ה src תיקייה, מחק הכל מלבד App.js ו index.js. החלף את התוכן ב-App.js בדברים הבאים:

function App() {
 לחזור (


דפי Github

פריסת React ל-Github




 );
}
ייצוא אפליקציית ברירת מחדל;

הוסף ניתוב

כדי להוסיף ניתוב לאפליקציה שלך, ראשית, התקן תגובה-נתב-דום:

npm להתקין react-router-dom

ב-App.js, הוסף את הקישור לדף אודות:

ייבוא ​​{ Link } מ-"react-router-dom";





instagram viewer


function App() {
 לחזור (


על אודות
דפי Github

פריסת React ל-Github




 );
}
ייצוא אפליקציית ברירת מחדל;

מכיוון ש-App.js ישמש כדף הבית שלך, אתה רק צריך ליצור את על אודות רְכִיב:

const אודות = () => {
 לחזור ( 


בית
אודות עמוד




 );
}
ברירת המחדל של ייצוא אודות;

כעת, עליך ליצור את המסלולים ולהגדיר נתב React.

שנה את index.js כדי להתאים את כתובת האתר לרכיבים המתאימים:

ייבוא ​​תגובה מ-"react";
ייבוא ​​ReactDOM מ-"react-dom";
ייבוא ​​אפליקציה מ-"./App";
לייבא { HashRouter, Routes, Route } מ-"react-router-dom";
ייבוא ​​אודות מ-"./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

שימו לב איך השתמשתם HashRouter במקום נתב דפדפן. באמצעות נתב דפדפן יעלה שגיאת 404. הסיבה לכך היא שהניתוב עובד אחרת בדפי GitHub. האשרוטר אינו מעלה שגיאה מכיוון שהוא משתמש בחלק ה-hash של כתובת האתר כדי לסנכרן את ממשק המשתמש עם כתובת האתר.

השלב האחרון הוא ביצוע כל השינויים החדשים ב-Git:

git add .
git commit -m "צור אפליקציית React"

צור מאגר GitHub

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

לאחר מכן, הוסף את מאגר GitHub למאגר המקומי שלך כשלט רחוק:

git מרחוק הוסף מקור /.git

לבסוף, דחוף את המאגר המקומי אל GitHub:

git branch -M main
git push --setupstream origin main

פרוס את אפליקציית React לדפי GitHub

כדי להשתמש בדפי GitHub, תצטרך להתקין אותו תחילה:

npm להתקין gh-pages

gh-pages יאפשר לך ליצור את gh-pages סניף שבו תפרוס את הקוד שלך.

לאחר מכן, עבור אל שלך package.json קובץ והוסף את דף הבית שיהיה כתובת האתר הביתית של האפליקציה:

"דף הבית": "https://.github.io//",
"סקריפטים": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "תגובה-סקריפטים מתחילים",
 "build": "בניית סקריפטים תגובה",
 "test": "בדיקת סקריפטים תגובה",
 "eject": "react-scripts eject"
 }

הפעל את הפקודה הבאה כדי להשלים את תהליך הפריסה:

npm הפעלת פריסה

האפליקציה שלך פרוסה כעת ב-GitHub ותוכל לבקר בה בכתובת https://.github.io/.

עשה יותר עם דפי GitHub

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

כיצד לארח אתר בחינם באמצעות דפי GitHub

קרא הבא

על הסופר