كيف يمكن رفع موقع مبني بـ webpack على github

قم في البداية بعمل build لملفات المشروع حتى تحصل على الملفات التي تقوم webpack ببنائها وهي غالباً تكون داخل مجلد يسمى dist أو build.

والآن ما تحتاج رفعه على GitHub هو ملف الـ dist فقط بحيث يكون ملف الـ index.html داخل مستودع الـ GitHub وليس داخل أي ملف. ولفعل ذلك قم بالتالي :

أنشئ مستودع جديد على GitHub.

1- قم بفتح ملف الـ dist داخل vs code بدون باقي الملفات لأننا لا نريد ان نتحكم بالمستودع المحلي الخاص بملفات المشروع كلها.

2- ثم قم بإنشاء مستودع git جديد عبر كتابة الأمر :

git init

3- ثم قم بكتابة الأوامر التالية بالترتيب :

git add.
git commit -m "my first commit"
git branch -M main
git remote add origin <رابط المستودع على جيت هوب>
git push origin main

ستحصل على الأوامر السابقة مع الرابط الخاص بالمستودع عند انشاء المستودع.

4- بعد ذلك اذهب إلى Settings كما في الصورة :

5- بعد ذلك انتظر قليلاً وستحصل على رابط الـ page الخاصة بك بعد حوالي 5 دقائق، حيث يظهر الرابط في اعلى الصفحة نفسها.

لاحظ الموقع الذي رفعته ف المثال السابق : https://omarqra.github.io/test250/.

والمستودع الخاص به https://github.com/omarqra/test250.

في حال كنت تريد رفع كل ملفات المشروع كلها، سيتوجب عليك رفع مجلد الـ dist مع باقي الملفات وفي هذه الحالة يمكنك القيام بالخطوات 4 و 5 فقط في المستودع الخاص بالمشروع وسيصبح الرابط كالتالي :https://omarqra.github.io/test250/dist حيث تضيف اسم المجلد dist إلى الرابط.

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

قم في البداية بعمل build لملفات المشروع حتى تحصل على الملفات التي تقوم webpack ببنائها وهي غالباً تكون داخل مجلد يسمى dist أو build.

والآن ما تحتاج رفعه على GitHub هو ملف الـ dist فقط بحيث يكون ملف الـ index.html داخل مستودع الـ GitHub وليس داخل أي ملف. ولفعل ذلك قم بالتالي :

أنشئ مستودع جديد على GitHub.

1- قم بفتح ملف الـ dist داخل vs code بدون باقي الملفات لأننا لا نريد ان نتحكم بالمستودع المحلي الخاص بملفات المشروع كلها.

2- ثم قم بإنشاء مستودع git جديد عبر كتابة الأمر :

git init

3- ثم قم بكتابة الأوامر التالية بالترتيب :

git add.
git commit -m "my first commit"
git branch -M main
git remote add origin <رابط المستودع على جيت هوب>
git push origin main

ستحصل على الأوامر السابقة مع الرابط الخاص بالمستودع عند انشاء المستودع.

4- بعد ذلك اذهب إلى Settings كما في الصورة :

5- بعد ذلك انتظر قليلاً وستحصل على رابط الـ page الخاصة بك بعد حوالي 5 دقائق، حيث يظهر الرابط في اعلى الصفحة نفسها.

لاحظ الموقع الذي رفعته ف المثال السابق : https://omarqra.github.io/test250/.

والمستودع الخاص به https://github.com/omarqra/test250.

في حال كنت تريد رفع كل ملفات المشروع كلها، سيتوجب عليك رفع مجلد الـ dist مع باقي الملفات وفي هذه الحالة يمكنك القيام بالخطوات 4 و 5 فقط في المستودع الخاص بالمشروع وسيصبح الرابط كالتالي :https://omarqra.github.io/test250/dist حيث تضيف اسم المجلد dist إلى الرابط.

 

لم تعمل بيطلعلي error 404 page

بتاريخ الآن قال Mohamed Montaser3:

لم تعمل بيطلعلي error 404 page

هل يمكنك مشاركة رابط المستودع على GitHub 

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

هل يمكنك مشاركة رابط المستودع على GitHub 

https://github.com/mohamed-montaser1/test

بتاريخ الآن قال Mohamed Montaser3:

https://github.com/mohamed-montaser1/test

لماذا لم تقم برفع ملف الـ dist، لا يوجد أي ملف dist في المستودع الذي شاركته.

ما لذي فعلته انت بالضبط ؟

بتاريخ الآن قال عمر قره محمد:

لماذا لم تقم برفع ملف الـ dist، لا يوجد أي ملف dist في المستودع الذي شاركته.

ما لذي فعلته انت بالضبط ؟

انا لا افهمك هل يمكن التوضيح كيف يمكنني عمل ملف dist اليس مجلد ويمكنني تسميته اي شئ ؟

بتاريخ الآن قال Mohamed Montaser3:

انا لا افهمك هل يمكن التوضيح كيف يمكنني عمل ملف dist اليس مجلد ويمكنني تسميته اي شئ ؟

ملف الـ dist هو الملف الذي تقوم webpack بإنشائه عند عمل npm run build ويتغير اسمه بحسب الاسم الذي تقوم بإعداده في webpack 

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

ملف الـ dist هو الملف الذي تقوم webpack بإنشائه عند عمل npm run build ويتغير اسمه بحسب الاسم الذي تقوم بإعداده في webpack 

انا رفعته باسم public

بتاريخ 1 دقيقة مضت قال Mohamed Montaser3:

انا رفعته باسم public

اذا اذهب إلى المسار public :

https://mohamed-montaser1.github.io/test/public/

بتاريخ 4 دقائق مضت قال عمر قره محمد:

اذا اذهب إلى المسار public :

https://mohamed-montaser1.github.io/test/public/