دليلك الشامل لاستضافة مشاريعك باستخدام صفحات GitHub

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

ما هي صفحات GitHub؟

أولاً، نحتاج إلى التحدث عن ماهية صفحات GitHub بالفعل. صفحات GitHub هي خدمة استضافة مواقع ثابتة متاحة من GitHub.

ماذا يعني “موقع ثابت”؟ في هذا السياق، يعني الموقع الثابت بشكل أساسي عدم وجود عرض من جانب الخادم. لذلك، لن نستخدم أطر عمل مثل Ruby on Rails أو ASP.NET Core. ستكون مجرد مواقع عميل ثابتة. يمكن أن تكون هذه مجرد ملفات HTML، أو يمكن إنشاؤها بواسطة إطار عمل حديث طالما أنها مرت بمرحلة بناء أو قمت بإعداد مسار بناء باستخدام GitHub Actions.

للتوضيح، إليك بعض النقاط الرئيسية:

• لا يوجد خادم تطبيقات: مرة أخرى، نحن نتحدث عن مواقع ثابتة فقط.
• عملاء الواجهة الأمامية فقط: نحن نعمل بشكل أساسي مع HTML و CSS و JavaScript.
• الاتصال بواجهات برمجة التطبيقات (APIs): يمكنك الاتصال بواجهات برمجة تطبيقات أخرى، على سبيل المثال، إذا كنت تستخدم JavaScript للوصول إلى مصادر أخرى لتزويد موقعك بالطاقة أو للقيام بتفاعلات على موقعك، ولكن صفحات GitHub لا يمكنها استضافة الخادم مباشرة.
• استخدام أطر عمل الواجهة الأمامية: يمكننا استخدام أطر عمل الواجهة الأمامية مثل Angular و React و Vue وما إلى ذلك، ولكننا نحتاج إما إلى تسجيل المخرجات المترجمة في GitHub أو استخدام خطوة بناء من خلال GitHub Actions.

أنواع المواقع في صفحات GitHub

تسمح لك صفحات GitHub بالحصول على نوعين من المواقع:

1. موقع رئيسي واحد لكل حساب: يمكنك الحصول على موقع رئيسي واحد يمثلك، وسيكون على الرابط: اسم_المستخدم.github.io

2. مواقع مشاريع غير محدودة: يمكن لكل مستودع أن يكون موقعه المستضاف الخاص به إذا كان مشروعًا ينتج CSS و HTML و JavaScript بطريقة ما. وعادة ما يكون شكل الرابط كالتالي: اسم_المستخدم.github.io/اسم_المستودع

الآن بعد أن أوضحنا هذه النقاط، دعنا نرى كيف يمكننا استضافة موقعنا باستخدام صفحات GitHub.

كيفية استضافة موقعك خطوة بخطوة

لدينا مشروع تجريبي يتكون من ملف index.html، وملف JavaScript، وملف CSS. هذا موقع ويب ثابت. صفحة index.html هي التي سيتم تحميلها عندما ينتقل المستخدم إلى عنوان URL الخاص بصفحات GitHub.

لرفع هذا المشروع على صفحات GitHub، اتبع الخطوات التالية:

1. داخل المستودع في GitHub، في شريط التنقل العلوي، انقر على علامة التبويب Settings.
2. في الشريط الجانبي الأيسر، مرر لأسفل حتى تجد قسمًا يسمى Pages. انقر عليه.
3. هنا يمكنك نشر موقعك. من قسم Build and deployment، وتحت Source، اختر Deploy from a branch.
4. سنقوم بالنشر من الفرع main والمجلد الجذر (/root). سنترك الخيار على root لأن ملف index.html موجود في المجلد الجذر الرئيسي، وهذا ما نريد تقديمه عند تحميل الصفحة.
5. انقر على Save.

ملاحظة هامة: لتشغيل عملية البناء الأولية، قد تحتاج إلى تبديل الفرع من main إلى None والنقر على Save، ثم إعادته مرة أخرى إلى main والنقر على Save مرة أخرى. هذا الإجراء يجب أن يبدأ عملية البناء.

متابعة عملية النشر

للتحقق من حالة النشر، اتبع الخطوات التالية:

1. اذهب إلى علامة التبويب Actions في الجزء العلوي من المستودع.
2. سترى أن هناك عملية بناء ونشر للصفحات قد بدأت. بمجرد اكتمالها، يجب أن نتمكن من رؤية موقعنا على صفحات GitHub.
3. عندما ترى علامة اختيار خضراء، فهذا يعني أن عملية البناء كانت ناجحة.

إذا عدت إلى Settings ثم Pages، سترى قسمًا جديدًا في الأعلى يفيد بأن موقعك مباشر على الرابط: https://اسم_المستخدم.github.io/اسم_المشروع

عند زيارة الموقع، سترى صفحتك تعمل. في مثالنا، الصفحة تعرض “Hello World! This page is hosted using GitHub Pages” والنص يظهر ديناميكيًا باستخدام JavaScript.

النشر التلقائي للتغييرات

الشيء الرائع الآن هو أنه إذا قمت بإجراء تغيير على الفرع الذي يتم النشر منه، ستقوم صفحات GitHub بإعادة نشر موقعك تلقائيًا.

لنجرب ذلك:

1. في محرر الكود، سنقوم بتغيير بسيط في ملف index.html. على سبيل المثال، تغيير النقطة إلى علامة تعجب لجعلها أكثر حماسًا.

   <h1>Hello World!</h1>
   

2. سنقوم بعمل commit لهذا التغيير ودفعه (push) إلى GitHub.

   git commit -am "Add exclamation point"
   git push
   

3. بمجرد دفع التغيير، إذا ذهبت إلى علامة التبويب Actions، سترى أن GitHub يتعرف على هذا التغيير ويبدأ عملية بناء جديدة.
4. بمجرد نجاح عملية البناء الثانية، إذا قمت بتحديث صفحة مشروعك المستضاف، سترى علامة التعجب الجديدة.

وهكذا، تكون قد تعلمت كيفية استخدام صفحات GitHub. في كل مرة يتعرف فيها GitHub على وجود تغيير في ذلك الفرع، سيقوم تلقائيًا ببناء وإعادة نشر موقعك.