كيفية رفع مشروع React على GitHub pages

تم شرح كيفية رفع مشروع React على github pages في النقاشات التالية: 

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

السلام عليكم 
لقد حاولت و وجدت بان مشكلتي شائعة 

الا ان كل مايطلبونه اعمله لاكن بدون جدوى 
فجميع links موجودة الا ان شيءا ما لا يجعلها تظهر فالتنسيقات موجودة 

وهدا ملف index.html ب public ,لا اعلم ان يخصني شيء اخر

----------------------

حتى اني مسحت build و branch of gh-pages  واعدت الخطوات التي قراتها لدى هده المقالات التي ارسلت لي 

لاكن نفس النتيجة

بتاريخ 7 ساعة قال Mohamed Boumlik:

السلام عليكم 
لقد حاولت و وجدت بان مشكلتي شائعة 

الا ان كل مايطلبونه اعمله لاكن بدون جدوى 
فجميع links موجودة الا ان شيءا ما لا يجعلها تظهر فالتنسيقات موجودة 

وهدا ملف index.html ب public ,لا اعلم ان يخصني شيء اخر

----------------------

حتى اني مسحت build و branch of gh-pages  واعدت الخطوات التي قراتها لدى هده المقالات التي ارسلت لي 

لاكن نفس النتيجة

هل من مساعدة ارجوكم والله تعبت

بتاريخ 10 ساعة قال Mohamed Boumlik:

السلام عليكم 
لقد حاولت و وجدت بان مشكلتي شائعة 

الا ان كل مايطلبونه اعمله لاكن بدون جدوى 
فجميع links موجودة الا ان شيءا ما لا يجعلها تظهر فالتنسيقات موجودة 

وهدا ملف index.html ب public ,لا اعلم ان يخصني شيء اخر

----------------------

حتى اني مسحت build و branch of gh-pages  واعدت الخطوات التي قراتها لدى هده المقالات التي ارسلت لي 

لاكن نفس النتيجة

سأشرح لك الخطوات من البداية:

عليك بتعديل ملف المشروع الرئيسي وهو لديك index.jsx بحيث تقوم بتعديل الـ Router وتضع بداخله basename له قيمة مماثلة تمامًا لاسم المستودع الخاص بمشروعك كالتالي:

بعد ذلك عليك بتثبيت الحزمة التالية:

npm i gh-pages

والآن قم بإضافة سكريبت predeploy وdeploy  إلى ملف package.json أي بجانب سكريبتات start وbuild لديك كالتالي:

ولكن لاحظ اسم dist في الكود خاص بالمجلد النهائي الذي يتم عمل build له فإذا كان مختلف لديك فيجب تعديله، ولديك أنت في مشروعك اخترت dist كاسم للمجلد في إعدادات Webpack فلا مشكلة إذًا.

والآن قم برفع مشروعك على GitHub كما تفعل ومن الأفضل أن تقوم بإنشاء مستودع جديد وحذف القديم وإليك طريقة حذف المستودع:

وبعد رفع المشروع قم بتنفيذ الأمر التالي في مشروعك داخل منفذ الأوامر في محرر الأكواد VScode:

npm run deploy

والكود سينفذ أمر npm run buld بمفرده وسيتم إنشاء فرع جديد به الملفات الخاصة بمجلد dist  لديك باسم فرع gh-pages ونشر مشروعك به وستجد به رابط Github pages كما بالصورة:

وإذا استمرت المشكلة لديك استخدم استضافات أخرى مثل render وrailway.app وvercel، وأيضًا لديك Netlify.

بتاريخ 16 دقائق مضت قال Mustafa Suleiman:

سأشرح لك الخطوات من البداية:

عليك بتعديل ملف المشروع الرئيسي وهو لديك index.jsx بحيث تقوم بتعديل الـ Router وتضع بداخله basename له قيمة مماثلة تمامًا لاسم المستودع الخاص بمشروعك كالتالي:

بعد ذلك عليك بتثبيت الحزمة التالية:

npm i gh-pages

والآن قم بإضافة سكريبت predeploy وdeploy  إلى ملف package.json أي بجانب سكريبتات start وbuild لديك كالتالي:

ولكن لاحظ اسم dist في الكود خاص بالمجلد النهائي الذي يتم عمل build له فإذا كان مختلف لديك فيجب تعديله، ولديك أنت في مشروعك اخترت dist كاسم للمجلد في إعدادات Webpack فلا مشكلة إذًا.

والآن قم برفع مشروعك على GitHub كما تفعل ومن الأفضل أن تقوم بإنشاء مستودع جديد وحذف القديم وإليك طريقة حذف المستودع:

وبعد رفع المشروع قم بتنفيذ الأمر التالي في مشروعك داخل منفذ الأوامر في محرر الأكواد VScode:

npm run deploy

والكود سينفذ أمر npm run buld بمفرده وسيتم إنشاء فرع جديد به الملفات الخاصة بمجلد dist  لديك باسم فرع gh-pages ونشر مشروعك به وستجد به رابط Github pages كما بالصورة:

وإذا استمرت المشكلة لديك استخدم استضافات أخرى مثل render وrailway.app وvercel، وأيضًا لديك Netlify.

لاحظت انك لم تستخدم 

<Route path='/' element={<Home />} />

بل استخدمت

<Route path="/:path(|svb-home)"

ما الفرق