اذهب إلى المحتوى
  • 0

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

منتصر احمد

السؤال

Recommended Posts

  • 0

قم في البداية بعمل 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 كما في الصورة :

0.thumb.png.ec5008c7b5eb967034ad7ab453b8dd9b.png

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

10.thumb.png.80bb5629143b6d32e3da160a0ec508e3.png

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 كما في الصورة :

0.thumb.png.ec5008c7b5eb967034ad7ab453b8dd9b.png

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

10.thumb.png.80bb5629143b6d32e3da160a0ec508e3.png

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

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

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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...