تظهر عناصر html فقط بدون تنسيقات css

وعليكم السلام ورحمة الله وبركاته.

يرجى إرفاق مستودع المشروع ورابط الموقع للإطلاع عليه ومساعدتك.

بتاريخ 7 دقائق مضت قال محمد_عاطف:

وعليكم السلام ورحمة الله وبركاته.

يرجى إرفاق مستودع المشروع ورابط الموقع للإطلاع عليه ومساعدتك.

build.ziphttps://salamah44.github.io/arabi-company/index.html

وعليكم السلام ورحمة الله،
السبب الغالب لظهور الصفحة بدون تنسيقات على GitHub Pages هو أن روابط ملفات الـ CSS أو JavaScript مكتوبة بشكل مطلق مثل:

<link rel="stylesheet" href="/style.css">

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

<link rel="stylesheet" href="./style.css">

بتاريخ 3 دقائق مضت قال محمد سلامة6:

build.zip 7.44 MB · 2 تنزيلات https://salamah44.github.io/arabi-company/index.html

لاحظ المشكلة لديك أن الرابط الخاص بموقعك هو :

https://salamah44.github.io/arabi-company/

وفي الكود لديك الروابط هكذا :

<script defer="defer" src="/js/bundle.js"></script>
<link href="/main.css" rel="stylesheet">

وهو روابط مطلقة أى أن المتصفح يبحث عن الملفات التالية :

https://salamah44.github.io/js/bundle.js

https://salamah44.github.io/main.css

لاحظ كيف لم يتم وضع arabi-company في الروابط لهذا لا يتم العثور على الملفات.

الأفضل هو جعل الموقع مباشرة بدون arabi-company في github أو إستخدام الروابط النسبية هكذا :

<script defer="defer" src="./js/bundle.js"></script>
<link href="./main.css" rel="stylesheet">

بتاريخ 14 ساعة قال محمد سلامة6:

build.zip 7.44 MB · 2 تنزيلات https://salamah44.github.io/arabi-company/index.html

رابط الموقع لديك هو:

https://salamah44.github.io/arabi-company/

بينما في الكود الروابط مكتوبة بهذا الشكل:

<script defer="defer" src="/js/bundle.js"></script><link href="/main.css" rel="stylesheet">

وهذا يعني أن المتصفح يحاول الوصول إلى:

https://salamah44.github.io/js/bundle.js
https://salamah44.github.io/main.css

أي أن اسم المستودع (arabi-company) غير موجود في المسارات لذا لا تُعثر الملفات وتظهر الصفحة بدون تنسيقات أو سكربتات.

الحل الأفضل (مرة واحدة على مستوى الإعدادات لا تعدل كل ملف يدويا)
عدّل إعدادات Webpack في webpack.config.js واجعل الخاصية publicPath نسبية، مثلا:

output: {
  filename: "js/bundle.js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "./", // بدل "/"
}

• أعد البناء (npm run build أو الأمر الخاص بمشروعك).
• ارفع مجلد dist (أو build) إلى المستودع ونفذ نشر GitHub Pages.

حلول أخرى
إن رغبت أن يعمل الموقع من الجذر بدون اسم المستودع أنشئ مستودعا باسم salamah44.github.io وانشر فيه الملفات في هذه الحالة تعمل الروابط المطلقة من الجذر.

أو غيّر الروابط في الكودإلى نسبية يدويا مثلا:

<script defer src="./js/bundle.js"></script>
<link href="./main.css" rel="stylesheet">

لكن تعديل الكود في كل الملفات يطول العمل لذا الأفضل تعديل publicPath وإعادة البناء.

تأكد بعد النشر أن ملفات js، css، وimages موجودة داخل المجلد الذي نشرته (dist/build) وأن إعداد GitHub Pages يشير إلى المجلد/الفرع الصحيح.

بتاريخ 15 دقائق مضت قال Mustafa Mahmoud7:

رابط الموقع لديك هو:

https://salamah44.github.io/arabi-company/

بينما في الكود الروابط مكتوبة بهذا الشكل:

<script defer="defer" src="/js/bundle.js"></script><link href="/main.css" rel="stylesheet">

وهذا يعني أن المتصفح يحاول الوصول إلى:

https://salamah44.github.io/js/bundle.js
https://salamah44.github.io/main.css

أي أن اسم المستودع (arabi-company) غير موجود في المسارات لذا لا تُعثر الملفات وتظهر الصفحة بدون تنسيقات أو سكربتات.

الحل الأفضل (مرة واحدة على مستوى الإعدادات لا تعدل كل ملف يدويا)
عدّل إعدادات Webpack في webpack.config.js واجعل الخاصية publicPath نسبية، مثلاً:

output: {
  filename: "js/bundle.js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "./", // بدل "/"
}

• أعد البناء (npm run build أو الأمر الخاص بمشروعك).
• ارفع مجلد dist (أو build) إلى المستودع ونفّذ نشر GitHub Pages.

حلول أخرى
إن رغبت أن يعمل الموقع من الجذر بدون اسم المستودع أنشئ مستودعا باسم salamah44.github.io وانشر فيه الملفات في هذه الحالة تعمل الروابط المطلقة من الجذر.

أو غيّر الروابط في الكودإلى نسبية يدويا مثلا:

<script defer src="./js/bundle.js"></script>
<link href="./main.css" rel="stylesheet">

لكن تعديل الكود في كل الملفات يطول العمل لذا الأفضل تعديل publicPath وإعادة البناء.

تأكد بعد النشر أن ملفات js، css، وimages موجودة داخل المجلد الذي نشرته (dist/build) وأن إعداد GitHub Pages يشير إلى المجلد/الفرع الصحيح.

تم حل المشكلة ظهرت التنسيقات لكن لم يتم معالجة الصور والخطوط، ما السبب؟

المشكلة تتعلق أيضا بكتابة الروابط بشكل مطلق لاحظ روابط الصور 

<img src="/images/team2.jpg" alt="محمد هاني" class="custom-img">

يرجى تعديله إلى

<img src="./images/team2.jpg" alt="محمد هاني" class="custom-img">

وكذلك الأمر للخطوط.
ولكن الأفضل  تعديل إعدادات Webpack كما ذكرت في التعليق السابق ليصبح بهذا الشكل

output: {
  filename: "js/bundle.js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "./", // بدل "/"
}

بتاريخ 2 دقائق مضت قال Mustafa Mahmoud7:

المشكلة تتعلق أيضا بكتابة الروابط بشكل مطلق لاحظ روابط الصور 

<img src="/images/team2.jpg" alt="محمد هاني" class="custom-img">

يرجى تعديله إلى

<img src="./images/team2.jpg" alt="محمد هاني" class="custom-img">

وكذلك الأمر للخطوط.
ولكن الأفضل  تعديل إعدادات Webpack كما ذكرت في التعليق السابق ليصبح بهذا الشكل

output: {
  filename: "js/bundle.js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "./", // بدل "/"
}

شكراً