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

أنشأنا في الدرس السابق موقع الويب الأوّل لنا، سنتعلّم الآن كيف سننشر موقع الويب هذا بشكل فعليّ على الانترنت.

publish-website.thumb.png.61f5c88c72036a

ملاحظة: لن يكون هناك الكثير من الزوار لموقعك في البداية، مالم تعط الناس عنوان الموقع على الانترنت.

الاستضافة

لكي يستطيع الجميع الوصول إلى موقعنا على الانترنت، نحتاج إلى مُخدّم Server يُخزّن موقعنا عليه، بالإضافة إلى عنوان URL يُشير إلى الموقع.

هناك عدد هائل من الشركات التي يمكن أن تقدّم لك خدمة تأجير مساحة على المُخدّم لهذا الغرض. تُسمّى هذه الخدمة عادةً باستضافة ويب Webhosting.

نستعرض بعض الاستضافات المجّانية المُتاحة. أنصح أن تبدأ بخدمة BitBalloon إذا كانت هذه هي التجربة الأولى لك.

1- الاستضافة على BitBallon

bitballoon-logo.thumb.png.1d5cdac84f70f7

خدمة BitBallon بسيطة ورائعة وأنصح بها. إليك الخطوات اللازمة للتسجيل:

1. اشترك ضمن موقع BitBalloon. وذلك بالنقر على زر التسجيل Sign Up ثم اختر Sign in Using Persona. بعد ذلك أدخل بريدك الإلكتروني وكلمة المرور.

2. عندما تسجّل الدخول، يمكنك ببساطة سحب كامل مجلّد موقع الويب (المجلّد Portfolio) إلى المكان المخصّص في صفحة الخدمة. 

bitballoon-drag-and-drop.thumb.png.a3c3a

3. ربما تستغرب هذه البساطة، ولكن بمجرّد تحميل الموقع سيُولّد عنوان URL يُشير إلى موقعك الذي حمّلته قبل قليل. انقر هذا العنوان واختبر ظهور الموقع بشكل صحيح.

4. لتبسيط عنوان URL المولّد بشكل آلي، يمكننا النقر على Edit name وإدخال اسم مناسب. 

bitballoon-published.thumb.png.419d52c13

5. من أجل التحديثات التي من الممكن أن تجريها على الموقع، اسحب مجلّد الموقع من جديد إلى الصندوق المسمّى Drag & Drop to Update your Site.

2- الاستضافة على Google Drive

google-drive-logo.thumb.png.45f763b69d4a

يمكن استخدام خدمة Google Drive كخدمة استضافة. الأمر السلبي الوحيد هنا، هو أنّك ستحصل على عنوان URL طويل جدًّا. لنجري الخطوات التالية للاستضافة:

  • حمّل مجلّد الموقع إلى Google Drive.
  • حدّد المجلّد المُحمّل ثم اختر مشاركة Share. انقر فوق خيارات متقدّمة Advanced وغيّر مستوى الوصول إلى Public on the web أي متاح للعموم على الانترنت.
  • افتح المجلّد في Google Drive وتأكّد من أنّ جميع ملفّات الموقع قد حمّلت (index.html والصور …الخ).
  • انسخ الرموز التي تأتي بعد الكلمة ( /folders#) ضمن شريط العنوان للمتصفّح. ستكون هذه الرموز هي المُعرّف الخاص بالمجلّد المُحمّل. 

google-drive-copy-string.thumb.png.666b6

  • أدخل في شريط العنوان للمتصفّح العنوان التالي http://googledrive.com/host متبوعًا بالرموز التي نسختها من الخطوة السابقة.

google-drive-host-address.thumb.png.0ba1

يمكن الآن لأي شخص لديه هذا العنوان الوصول إلى موقعنا.

3- الاستضافة على Dropbox

dropbox-logo.thumb.png.cf5b3516881d2c159

يمكن استخدام Dropbox كخدمة استضافة. ولكي نتمكّن من ذلك نحتاج إلى خدمة إضافية لتوجيه الطلبات إلى الموقع المُستضاف. توجد خدمتان يمكن استخدامهما وهما Pancake و DropPages.

4- الاستضافة على GitHub

github-logo.thumb.jpg.84bd4a0fa674ed071d

إذا كان لديك بعض الخبرة البرمجية فعندها يُعتبر GitHub طريقةً رائعة لاستضافة مواقع الويب. تُعتبر GitHub منصّة لتسهيل التشاركية بين المبرمجين، كما تُتيح هذه المنصة استضافة مجّانيّة لصفحات الويب وذلك على صفحات GitHub. تؤمّن صفحات GitHub المزيد من الخيارات (فمثلاً تستطيع استخدام النطاق domain الخاص بك)، لكنها تتطلّب بعض المهارات في التعامل مع نظام التحكم بالإصدارات البرمجية Git.

تصغير عناوين URL

يمكن أن يكون عنوان موقعك طويلًا جدًّا وذلك بحسب الاستضافة التي اخترتها. توجد بعض الخدمات البسيطة لتصغير عنوان URL الخاص بموقعك. لتصغير العناوين فائدة كبيرة، حيث يمكن إدخالها يدويًا بسهولة ضمن متصفح الويب في هاتفك الذكي مثلًا، كما توجد بعض الخدمات التي تزوّدك بكود QR للوصول السريع من هاتفك الذكي إلى الموقع مباشرة باستخدام كاميرا الهاتف فحسب. إليك قائمة من بعض خدمات تصغير العناوين:

النطاق الخاص بنا

ربما يأتي يوم نرغب فيه بأن نحصل على اسم نطاق خاص بنا مثل http://www.my-super-website.com. يمكنك في بعض الحالات تسجيل اسم نطاق ضمن مزوّد خدمة الاستضافة نفسه (كما هو الحال مع خدمة الاستضافة BitBallon). أو يمكنك الوصول إلى عدد كبير جدًّا من خدمات تسجيل النطاقات الخاصة، تقدّم بعضها عروضًا مختلفةً عن بعضها الآخر، يمكنك البحث في Google لتصل إلى عدد كبير منها.

سنُضفي على الموقع في الدرس الثالث بعض تأثيرات التنسيق المختلفة عن طريق CSS.

ترجمة -وبتصرف- للمقال HTML & CSS Tutorial - Part 2: Publishing Your Website  لصاحبه Marco Jakob.


تفاعل الأعضاء

أفضل التعليقات

بتاريخ On 25‏/2‏/2024 at 14:42 قال لورنا باسم:

بعد مبعمل الرابط آجي افتحه يقولي خطأ 404 ايه السبب

نحتاج إلى تفاصيل أكثر،

هل تستطيع فتح الصفحة على حاسوبك؟ هل يظهر كل شيء فيها بشكل صحيح؟ هذه الأمور يجب أن يكون قد تمّت في الدرس السابق.

هل الملف الذي تعمل عليه يسمى index.html؟ لا يمكن أن يسمى بغير هذا الاسم.

هل الملف موجود مباشرة داخل مجلد المشروع؟ إذ لا يمكن أن يكون في مجلّد داخلي.

يرجى إرفاق صور تثبت مكان الملف وكيف قمت برفعه.

بتاريخ On 25‏/2‏/2024 at 08:42 قال لورنا باسم:

بعد مبعمل الرابط آجي افتحه يقولي خطأ 404 ايه السبب

الخطأ الذي رقمه 400 أو تفرعاته مثل 404، يعني أنه لا يستطيع العثور على الخادم،

لذلك أرجو توضيح الطريقة التي تم استخدامها.

أرجو أيضًا التأكد من النقاط التالية:

- أن الصفحات ليس بها مشكلة وتعمل على جهازك بشكل صحيح قبل رفعها

- نتأكد أننا طبقنا الخطوات بالترتيب الصحيح، على سبيل المثال إذا كنا نستخدم خدمة BitBallon نتأكد من التسجيل وإذا طلب تأكيد البريد الإليكتروني يجب التأكيد، كذلك يتم سحب الملفات إلى المكان المخصص (نسحب المجلد كاملا)، وبعد توليد العنوان نتأكد أننا نسخناه بشكل صحيح

في انتظار معرفة النتائج.



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

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

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.


×
×
  • أضف...