كيفية نشر تطبيق React مجانًا باستخدام صفحات GitHub

إذا كان لديك مشروع وترغب في استضافته مجانًا دون شراء مجال ، فإن استخدام صفحات GitHub يعد خيارًا رائعًا. تقوم صفحات GitHub بتحويل مستودعاتك إلى مواقع ويب وتسمح لك باستضافة مواقع مشاريع غير محدودة.

يتطلب نشر موقع React مع التنقل تكوينًا إضافيًا مقارنة بنشر موقع ثابت. يرشدك هذا البرنامج التعليمي خلال العملية برمتها من إنشاء مستودع GitHub إلى وجود موقع مستضاف.

أنشئ تطبيق React

لأغراض العرض ، تحتاج إلى إنشاء مشروع React مع التوجيه الذي ستنشره لاحقًا. ومع ذلك ، إذا كان لديك ملف مشروع رياكت، لا تتردد في تخطي هذه الخطوة.

في المحطة ، قم بتشغيل ملف إنشاء رد فعل التطبيق أمر لسقالة مشروع React بسرعة:

npx إنشاء-رد فعل-التطبيق رد فعل- gh

انتقل إلى المجلد الذي تم إنشاؤه وابدأ التطبيق الخاص بك.

بدء تشغيل npm

بعد ذلك ، افتح مجلد المشروع الذي تفضله محرر الكود. في ال src مجلد ، احذف كل شيء باستثناء App.js و index.js. استبدل المحتويات في App.js بما يلي:

وظيفة التطبيق () {
 إرجاع (


صفحات جيثب

جارٍ نشر React على Github




 );
}
تصدير التطبيق الافتراضي ؛

إضافة التوجيه

لإضافة التوجيه إلى التطبيق الخاص بك ، قم أولاً بتثبيت رد فعل جهاز التوجيه دوم:

تثبيت npm-router-dom

في App.js ، أضف الرابط إلى صفحة "حول":

استيراد {Link} من "React-router-dom" ؛
وظيفة التطبيق () {
 إرجاع (


عن
صفحات جيثب

جارٍ نشر React على Github




 );
}
تصدير التطبيق الافتراضي ؛

نظرًا لأن App.js سيعمل كصفحتك الرئيسية ، ما عليك سوى إنشاء ملف عن عنصر:

كونست حول = () => {
 إرجاع ( 


مسكن
حول الصفحة




 );
}
تصدير افتراضي حول ؛

الآن ، تحتاج إلى إنشاء المسارات وتكوين جهاز توجيه React.

قم بتعديل index.js لمطابقة عنوان URL مع المكونات المعنية:

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من "رد فعل دوم" ؛
استيراد التطبيق من "./App" ؛
استيراد {HashRouter، Routes، Route} من "response-router-dom" ؛
استيراد حول من ". / حول" ؛
ReactDOM.render (



} />
}/>


,
 document.getElementById ("root")
);

لاحظ كيف استخدمت هاش راوتر بدلاً من المستعرض. استخدام المستعرض سيرفع خطأ 404. هذا لأن التوجيه يعمل بشكل مختلف في صفحات GitHub. حشروتر لا يظهر خطأ لأنه يستخدم جزء التجزئة من عنوان URL لمزامنة واجهة المستخدم مع عنوان URL.

الخطوة الأخيرة هي تنفيذ جميع التغييرات الجديدة على Git:

بوابة إضافة.
git الالتزام -m "إنشاء تطبيق React"

قم بإنشاء مستودع جيثب

حيث صفحات جيثب ستستضيف تطبيقك عن طريق تحويل المستودع إلى موقع ويب ، فأنت بحاجة إلى إنشاء مستودع GitHub. انتقل إلى حساب GitHub الخاص بك وأنشئ مستودعًا جديدًا يحمل نفس اسم مشروعك.

بعد ذلك ، أضف مستودع GitHub إلى مستودعك المحلي كجهاز تحكم عن بُعد:

بوابة عن بعد إضافة الأصل /.شخص سخيف

أخيرًا ، ادفع المستودع المحلي إلى GitHub:

فرع بوابة-M الرئيسي
git push - أصل المنبع الرئيسي

انشر تطبيق React على صفحات GitHub

لتتمكن من استخدام صفحات GitHub ، يجب عليك تثبيتها أولاً:

npm تثبيت صفحات gh

صفحات gh سيسمح لك بإنشاء ملف صفحات gh الفرع حيث ستقوم بنشر التعليمات البرمجية الخاصة بك.

بعد ذلك ، انتقل إلى ملف package.json ملف وإضافة الصفحة الرئيسية التي ستكون عنوان URL الرئيسي للتطبيق:

"الصفحة الرئيسية": https: //.github.io //",
"نصوص": {
 "predeploy": "npm run build"،
 "نشر": "gh-pages -d build"، 
 "البدء": "بدء البرامج النصية للتفاعل"،
 "بناء": "بناء البرامج النصية التفاعلية" ،
 "اختبار": "اختبار البرامج النصية للتفاعل"،
 "إخراج": "إخراج البرامج النصية التفاعلية"
 }

قم بتشغيل الأمر التالي لإكمال عملية النشر:

تشغيل npm

تم نشر تطبيقك الآن على GitHub ويمكنك زيارته على https: //.github.io /.

أنجز المزيد مع صفحات جيثب

توفر صفحات GitHub طريقة بسيطة لنشر مواقع الويب على الإنترنت مجانًا. بينما رأيت فقط كيف يمكنك نشر مشروع React بسيط ، تسمح لك صفحات GitHub بعمل المزيد. على سبيل المثال ، يمكنك إنشاء مدونة كاملة باستخدام Jekyll وحتى استضافتها باستخدام مجال مخصص.

كيفية استضافة موقع مجانًا باستخدام صفحات جيثب

اقرأ التالي

نبذة عن الكاتب