كيف يمكن رفع موقع مبني بـ 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 إلى الرابط.

  بتاريخ On 30‏/9‏/2022 at 14:26 قال عمر قره محمد:

قم في البداية بعمل 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

  بتاريخ On 30‏/9‏/2022 at 14:42 قال Mohamed Montaser3:

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

أظهر المزيد  

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

  بتاريخ On 30‏/9‏/2022 at 14:43 قال عمر قره محمد:

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

أظهر المزيد  

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

  بتاريخ On 30‏/9‏/2022 at 14:46 قال Mohamed Montaser3:

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

أظهر المزيد  

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

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

  بتاريخ On 30‏/9‏/2022 at 14:50 قال عمر قره محمد:

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

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

أظهر المزيد  

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

  بتاريخ On 30‏/9‏/2022 at 14:51 قال Mohamed Montaser3:

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

أظهر المزيد  

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

  بتاريخ On 30‏/9‏/2022 at 14:53 قال عمر قره محمد:

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

أظهر المزيد  

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

  بتاريخ On 30‏/9‏/2022 at 14:54 قال Mohamed Montaser3:

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

أظهر المزيد  

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

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

  بتاريخ On 30‏/9‏/2022 at 14:55 قال عمر قره محمد:

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

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

أظهر المزيد