wesamdev

طريقة رفع ملفات CSS و JAVASCRIPT على موقع Github

0 0 Elnggar السبت، 24 يوليو 2021

مع موقع Github سوف تتمكن من إستضافة الملفات عليه وسيسهل عليك العمل بشكل كبير جداً وسوف يجعلك تتخلص من الأكواد الكثيرة في مدونتك أو موقعك.

محتويات المقالة

بالتأكيد الكل يعرف أن بلوجر توفر لك إستضافة مجانية على سيرفراتها، ويمكنك من خلال ذلك إنشاء مدونة خاصة بك بشكل مجاني بكل سهولة ويمكنك إستضافة الملفات على منصة بلوجر أيضاً وبشكل مجاني وأمن، وطبعا قالب بلوجر نجد فيه جميع الأكواد الخاصة بمظهر المدونة ولكن في بعض الحالات تكون الأكواد كثيرة جداً في قالب مدونتك، مما يؤثر سلباً في سرعة تصفح مدونتك.

وترغب في جعل مدونتك تعمل بشكل أسرع، لذلك الحل هو إستخدام إستضافات خارجية على أحد المواقع التي توفر لك هذا الأمر لتقليل الأكواد على مدونتك، واليوم سوف أشرح لكم طريقة إستضافة ملفات CSS و JAVASCRIPT على الموقع المعروف Github ، وكيفية الحصول على روابط مباشرة للأكواد بصيغة .JS او .CSS، ولو بحثنا على بديل فستجد أغلبها غير مجاني أو على نطاق غير آمن HTTP.

ولكن اليوم مع موقع Github سوف تتمكن من إستضافة الملفات عليه وسيسهل عليك العمل بشكل كبير جداً وسوف يجعلك تتخلص من الأكواد الكثيرة في مدونتك أو موقعك.

Github هو خدمة ويب مجانية لمشاريع البرمجيات، حيث يعتبر هو الموقع الأكثر شعبية على مستوى العالم من بين المواقع التي تقدم خدمة إستضافة البرمجيات، وبالأضافة إلى ذلك يعتمد عليه مجموعة كبيرة من أصحاب المواقع فى تخزين أكواد JS, CSS, HTML.

ولتجربة Github والبدء في رفع أكواد JS, CSS, HTML إتبع الخطوات التالية:

1- الخطوة الأولى

سجل أو إنشئ حساب جديد فى Github.

بعد ذلك سوف يكون عليك تفعيل الحساب من الأيميل، وبعد ذلك سوف يتفعل معك.

2- الخطوة الثانية

الأن بعد التسجيل فى الموقع نأتي إلى شرح إستضافة الملفات عليه، قم بإختيار إبدأ مشروع جديد Start a Project كما في الصورة التالية.

3- الخطوة الثالثة

فى الصفحة التالية من فضلك اتبع التعليمات التالية، وكما هو موضح في الصورة.

تقوم بتحديد إسم لمستودع الأكواد Repository name بأي إسم تريده.
علم على Initialize this repository with a README.
اضغط فوق زر Create repository.

4- الخطوة الرابعة

بعد إنشاء المستودع متبقي رفع الأكواد، إضغط Create new file وكما موضح في الصورة التالية:

5- الخطوة الخامسة

بعد ذلك سوف تدخل إلى صفحة الملف وتقوم بإختيار إسم الملف الذي سوف تضع له الأكواد، وبعد ذلك تضع الأكواد كما في الصورة التالية وتقوم بالضغط على Commit new file.

إسم الملف يجب ان ينتهي كالأتي:

js. للجافا سكريبت
css. لأكواد الاستايل
html. لأكواد HTML

6- الخطوة السادسة

قم بالنقر كليك يمين على إسم الملف وإضغط على Copy link address.

7- الخطوة السابعة

للحصول على رابط مباشر لمصدر الكود سنحتاج للدخول الى موقع raw.githack ولصق رابط الملف URL الذي نسخناه منذ قليل في الخانة الاولى في الموقع وكما موضوح بالصورة.

8- الخطوة الثامنة

الأن لوضع رابط الملف بعد تحويله فى مدونتك وسوف تستخدم أحد هذه الأكواد .

إذا كانت الأكواد التي قمت بإستضافتها على الموقع هى أكواد CSS قم بإستخدام الكود التالي وضع بداخله الرابط بعد تحويله في الموقع الثاني، وتقوم بوضع الكود أسفل وسم الهيد <head> في مدونتك.

<link href='ضع الرابط هنا' rel='stylesheet' type='text/css'/>

وإذا كانت الأكواد JAVASCRIPT سوف يكون عليك إستخدام هذا الكود، وقم بوضع الكود فوق هذا الوسم </body> في مدونتك.

<script src='ضع الرابط هنا' type='text/javascript'/>

وبهذا تكون قد إنتهيت من كل شئ، وتم أستضافة الملفات على موقع Github

وللمزيد من التفصيل

الدخول الى موقع GITHUB.

2- الدخول الى موقع raw.githack للحصول على رابط مباشر.

الأكواد المذكورة في الدرس:

<link href='ضع الرابط هنا' rel='stylesheet' type='text/css'/>
<script src='ضع الرابط هنا' type='text/javascript'/>

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

باركودالتدوينة

تضمين رمز الإستجابة السريع أو رمز الباركود تلقائيًا للمقالة افتح التطبيق - مسح - وجه الكاميرا إلى رمز الاستجابة السريعة أو الرمز الشريطي الذي تريد مسحه سيتعرف قارئ QRcode تلقائيًا على أي رمز QR.

الاقسام

COMMENTS

BLOGGER

من فضلك حبا وليس امر اترك تعليقك

FACEBOOK

DISQUS

من انا$hide=mobile

wesam elngar

السلام عليكم اسمي وسام النجار من مصر مطور ويب ومصمم جرافيك متخصص في الوقت الحالي برمجة بلوجر بشكل عام, لدي خبره كبيره في التعامل مع بلوجر, أللغات التي أتعامل معها HTML CSS JS JQ خدمات التصميم متوقفة في الوقت الحالي, بنسبة إلى بلوجر لو لديك مشكله في قالب مدونتك أو لديك قالب تريد تعريبه أو تريد برمجة قالب لمدونتك من الصفر أو تريد تجهيز SEO أوحل مشاكله فنحن في خدمتك في أي وقت وأسعار مناسبة إن شاء الله.

$show=home$type=slider$meta=0$snip=0$hide=mobile$rm=0$cate=20$source=random-posts

$show=home$type=three$author=hide$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

$type=ticker$hide=mobile$cols=4

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

طريقة رفع ملفات CSS و JAVASCRIPT على موقع Github

1- الخطوة الأولى

2- الخطوة الثانية

3- الخطوة الثالثة

4- الخطوة الرابعة

5- الخطوة الخامسة

6- الخطوة السادسة

7- الخطوة السابعة

8- الخطوة الثامنة

وللمزيد من التفصيل

باركودالتدوينة

الاقسام

SHARE:

COMMENTS

[انظر ايضا]_$type=three$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

|حول العالم_$type=one$hide=home$source=random-posts$count=8

[قد يهمك]_$type=three$hide=mobile$hide=home$comment=hide$rm=hide$count=3$source=random-posts

تابعني علي vk

من انا$hide=mobile

wesam elngar

$show=home$type=slider

$source=random-posts$type=one$count=4$height=auto$m=hide$snippet=hide$rm=hideحيوانات

YouTube$hide=home

$show=home

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

حكمة اليوم !

التسميات$hide=home

تابعني علي $hide=mobileOK$show=home

/fa-clock-o/ WEEK TRENDING$type=list$hide=home$source=random-posts

مواضيع شيقة$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

RECENT$type=list-tab$date=0$au=0$c=5$hide=home$source=random-posts

REPLIES$type=list-tab$com=0$c=4$src=recent-comments$hide=home

RANDOM$type=list-tab$date=0$au=0$c=5$src=random-posts$hide=home

[وثائقي]_$show=home$type=two$meta=0$snip=0$hide=mobile$rm=0$count=2$source=random-posts

هدف الموقع

رخصة المحتوي