كيف يمكنني استضافة مشروعي على Github Pages؟

1. قم بإنشاء مستودع جديد على حسابك في Github
2. قم برفع ملفات مشروعك (ملفات الموقع) الى المستودع الذي انشئته، أبسط طريقة عبر الرفع اليدوي عن طريق واجهة موقع Github داخل مستودعك
3. قم بتفعيل Github Pages داخل مستودعك بالذهاب الى الاعدادات Settings، ثم النزول الى القسم Github Pages واختيار الفرع branch الذي يحتوي موقعك، ثم حفظ الاعدادات Save

بعدها سيظهر لك رابط لصفحة مشروعك المستضاف يمكنك الدخول من خلاله

طيب ايش المشكلة؟

بعد ما اضغط على الرابط يطلعلي كذا

ليش ما يظهر المشروع؟

بعد ما شفت الفيديو هذا

المشكلة انك قمت برفع ملفات مشروعك كاملة (المصدر مع ملفات الموقع) 

والاعدادات التي قمت بها تقوم باستضافة المشروع باعتبار ان ملفات موقعك موجودة بالجذر مباشرة (هذا سبب الخطأ 404)

لكن في مشروعك ملفات الموقع موجودة في المجلد app، قم بالدخول مجددا الى اعدادات GitHub Pages داخل مستودع المشروع ومن هناك يمكنك تغيير مجلد ملفات الموقع الى المجلد app (الافتراضي هو مجلد الجذر) كما في الصورة

بتاريخ منذ ساعة مضت قال Hassan Hedr:

المشكلة انك قمت برفع ملفات مشروعك كاملة (المصدر مع ملفات الموقع) 

والاعدادات التي قمت بها تقوم باستضافة المشروع باعتبار ان ملفات موقعك موجودة بالجذر مباشرة (هذا سبب الخطأ 404)

لكن في مشروعك ملفات الموقع موجودة في المجلد app، قم بالدخول مجددا الى اعدادات GitHub Pages داخل مستودع المشروع ومن هناك يمكنك تغيير مجلد ملفات الموقع الى المجلد app (الافتراضي هو مجلد الجذر) كما في الصورة

 

طيب كيف اغير المجلد الى مجلد app؟

بتاريخ 2 ساعات قال معاذ باحسن:

طيب كيف اغير المجلد الى مجلد app؟

• تحديد الملف الجذر في المستودع، يجب أن يكون هو الملف الذي فيه صفحة البداية (الصفحات الساكنة)، والتي يجب أن يكون الاسم index.html المهم index ليتم فتحها بشكل افتراضي بعد طلب رابط github pages.
• لتحديد مجلد ما كالمجلد الجذر يجب على المجلد أن يحوي ناتج معالجة webpack في حال استخدامها مثلا يكون اسم المجلد dist أو build أو app اوالمجلد الناتج، موجود في إعدادات ويباك.
• بعد النقر على root سيتم عرض المجلدات الموجودة مباشرة في المستودع، اختر المجلد الصحيح حسب الشرحثم اضغط save
• تأكد من اسم branch الذي دفعت عليه التحدثات

بتاريخ 13 ساعات قال Wael Aljamal:

• تحديد الملف الجذر في المستودع، يجب أن يكون هو الملف الذي فيه صفحة البداية (الصفحات الساكنة)، والتي يجب أن يكون الاسم index.html المهم index ليتم فتحها بشكل افتراضي بعد طلب رابط github pages.
• لتحديد مجلد ما كالمجلد الجذر يجب على المجلد أن يحوي ناتج معالجة webpack في حال استخدامها مثلا يكون اسم المجلد dist أو build أو app اوالمجلد الناتج، موجود في إعدادات ويباك.
• بعد النقر على root سيتم عرض المجلدات الموجودة مباشرة في المستودع، اختر المجلد الصحيح حسب الشرحثم اضغط save
• تأكد من اسم branch الذي دفعت عليه التحدثات

انت تقول بعد النقر على root سيتم عرض المجلدات الموجودة مباشرة في المستودع ثم اختار المجلد الصحيح.

انا بعد ما انقر على root لم يعرض لي اي شيء علشان اختار المجلد الصحيح

ايش الحل؟

بتاريخ 1 ساعة قال معاذ باحسن:

انت تقول بعد النقر على root سيتم عرض المجلدات الموجودة مباشرة في المستودع ثم اختار المجلد الصحيح.

انا بعد ما انقر على root لم يعرض لي اي شيء علشان اختار المجلد الصحيح

ايش الحل؟

تاكد من اختيار branch وتصفح المستودع وتأكد من وجود الملفات والمجلدات فيه، ثم عد إلى لوحة التحكم وتاكد من اختيار المجلد الذي يحوي المشروع، وفيه صفحة واحدة باسم index.html

في حال وجود مشكلة ارجو مشاركة رابط اىمستودع و رابط صفحة غيت هاب

هذا رابط ال github

https://github.com/moath-bahasan/sfrny

بتاريخ الآن قال معاذ باحسن:

هذا رابط ال github

https://github.com/moath-bahasan/sfrny

هل يمكن ارفاق صورة للإعدادات في قسم GitHub Pages في اعدادات المستودع
تكون فيها قائمة اختيار المجلد مفتوحة من فضلك

تفضل

بتاريخ منذ ساعة مضت قال معاذ باحسن:

تفضل

يبدو أن هنالك شيئ عالق، حاول تغيير branch واحفظ التغييرات ثم أعد تحميل الصفحة، ثم أعد branch نفسه.. لأنه ليس لديك docs أصلا في المستودع، 

بتاريخ 4 دقائق مضت قال Wael Aljamal:

يبدو أن هنالك شيئ عالق، حاول تغيير branch واحفظ التغييرات ثم أعد تحميل الصفحة، ثم أعد branch نفسه.. لأنه ليس لديك docs أصلا في المستودع، 

لم يتغير شيء

في المشروع هذا https://github.com/moath-bahasan/Portfolio اشتغل معايا كويس ولم استخدم ال webpack في هذا المشروع

هل تعتقد ان ال webpack هو السبب؟

بتاريخ 5 دقائق مضت قال معاذ باحسن:

لم يتغير شيء

في المشروع هذا https://github.com/moath-bahasan/Portfolio اشتغل معايا كويس ولم استخدم ال webpack في هذا المشروع

هل تعتقد ان ال webpack هو السبب؟

أرجو إرفاق رابط github pages من فضلك، webpack ليست السبب

https://github.com/moath-bahasan/sfrny/settings/pages

بتاريخ الآن قال معاذ باحسن:

https://github.com/moath-bahasan/sfrny/settings/pages

عفواً ليس صفحة الضبط، إنما الصفحة التي تشغل الموقع

https://moath-bahasan.github.io/sfrny/

بتاريخ 1 دقيقة مضت قال معاذ باحسن:

https://moath-bahasan.github.io/sfrny/

لاحظ أن الرابط مع تعديل مسار المجلد الأخير سيفتح الصفحة

https://moath-bahasan.github.io/sfrny/app/index.html

أي إضافة app/index.html/ أي app عليه أن يكون الجذر

هذا يعني أن المستودع مربوط مع github pages ولكن مشكلة في المجلد الجذر للمشروع.

• في المشروع المحلي لديك، إن تصفحت المجلد app وقمت بتشغيل الملف index.html في المتصفح، هل يظهر الموقع بالشكل المطلوب؟إن لم يظهر بشكل صحيح عليك تصحيح الأخطاء ثم إعادة دفع التحديثات

لنتأكد من تصدير المشروع في نمط الإنتاج "جاهز للتشغيل" production نعدل الخاصية script في package.json

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.config.js"
},

ثم نشغل الأمر:

npm run build

تفضل

بتاريخ 6 دقائق مضت قال معاذ باحسن:

تفضل

سنحاول عمل التالي، تثبيت المكتبة 

npm install --save-dev cross-env

ثم نعدل build:

"build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.js"

تفضل

بتاريخ 2 دقائق مضت قال معاذ باحسن:

تفضل

يوجد مشكلة في قسم script لاحظ جزء كلمة prod

• على كل حال كتابة كلمة webpack فقط في سطر الأوامر cmd تفعل المطلوب
• هل يظهر الموقع بشكل سليم بعد فتح index.html في مجلد app ؟

بتاريخ 5 دقائق مضت قال Wael Aljamal:

يوجد مشكلة في قسم script لاحظ جزء كلمة prod

• على كل حال كتابة كلمة webpack فقط في سطر الأوامر cmd تفعل المطلوب
• هل يظهر الموقع بشكل سليم بعد فتح index.html في مجلد app ؟

كتابة webpack في سطر الأوامر يعطيني خطأ

ليش المشكلة تعقدة لهذي الدرجة

بتاريخ الآن قال معاذ باحسن:

كتابة webpack في سطر الأوامر يعطيني خطأ

ما الخطأ؟

تفضل

بتاريخ 2 دقائق مضت قال معاذ باحسن:

تفضل

حسناً لامشكلة أمنت لم تثبنت webpack على مستوى نظام التشغيل ككل، إنما فقط على مستوى المشروع.

====

بتاريخ 18 دقائق مضت قال Wael Aljamal:

يوجد مشكلة في قسم script لاحظ جزء كلمة prod

في الإجابة السابقة

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"

npm run build

بتاريخ 19 دقائق مضت قال Wael Aljamal:

• هل يظهر الموقع بشكل سليم بعد فتح index.html في مجلد app ؟

إن لم تكتب إجابة لهذا اسؤال أعتذر عن المتابعة معك.

========

إن استمرت المشكلة وكان الموقع يعمل على الحاسوب بشكل صحيح نفذ التالي

git push --force

وإعد الدخول ل github pages وحدث الصفحة

أطفي الخدمة مثل Turn off github pages وأعد تشغيلها

هل يظهر الموقع بشكل سليم بعد فتح index.html في مجلد app ؟

لا 

على فكرة استخدمت هذا

git push --force

وهذا الي طلع

وكمان حذفت المشروع على github ورجعته مره ثانية وما تغير ولا شيء

و اقصد ب لا يعني زي كذا

بتاريخ 2 ساعات قال معاذ باحسن:

هل يظهر الموقع بشكل سليم بعد فتح index.html في مجلد app ؟

لا 

يوجد مشكلة في تحميل التنسيقات، وهذه في إعدادات ويب باك، حاول حل المشكلة وأعد بناء المشروع عن طريق ويب باك، وإن فتح الموقع بشكل جيد ضمن app/index.html هنا عد لرفع التحديثات للمستودع.

يجب أن يتم قراءة المجلدات في github pages بشكل صحيح..