GitHub Pages: استضافة مجانية للموقع، وكيف تنشره خطوة بخطوة

ما هو GitHub Pages

GitHub Pages استضافة مجانية للمواقع الثابتة مدمجة في GitHub. تحفظ ملفات الموقع في مستودع Git عادي، ويقدمها GitHub لك عبر HTTPS. كل git push إلى الفرع المحدد يحدّث الموقع، لذلك لا تحتاج إلى FTP أو لوحة استضافة أو رفع يدوي للملفات.

يُسمى هذا الموقع في البحث بأسماء مختلفة: «github pages» و«github pages استضافة» و«github pages مجانا»، وأحياناً يُبحث عنه بـ «git pages ما هو». والصحيح أن تقول GitHub Pages: هو ميزة من منصة GitHub وليس من Git نفسه. فـ Git لا ينشر شيئاً، بل يحفظ تاريخ التغييرات فقط.

يُستخدم GitHub Pages غالباً لاستضافة توثيق المشاريع، والصفحات الشخصية والمعارض، والمدونات، وصفحات الهبوط، ومشاريع التعلم، وعروض التطبيقات الأمامية (frontend) مثل React وVue وSvelte بعد البناء.

Git pages: استضافة للمحتوى الثابت

الكلمة المفتاحية هنا «ثابت». يقدم GitHub Pages للمتصفح ملفات جاهزة: HTML وCSS وJavaScript وصوراً وخطوطاً وملفات JSON. لا يستطيع تنفيذ الكود على الخادم: لا يعمل PHP ولا Python ولا Node.js من جانب الخادم، ولا قواعد البيانات. إذا احتاج موقعك إلى تسجيل أو سلة شراء أو لوحة إدارة مع قاعدة بيانات، فستحتاج إلى استضافة عادية أو منصة سحابية.

لكن JavaScript يعمل في المتصفح كالمعتاد. يستطيع تطبيق الصفحة الواحدة الاتصال بواجهات API خارجية، ويمكن إرسال النماذج عبر خدمات طرف ثالث، والبحث داخل الموقع يتم في جهة العميل.

أنواع المواقع على GitHub Pages

لدى GitHub Pages ثلاثة أنواع من المواقع، ويتحدد العنوان حسب النوع.

يمكن أن يكون لكل حساب موقع مستخدم أو مؤسسة واحد فقط، أما مواقع المشاريع فعددها غير محدود، بموقع لكل مستودع. ويجب أن يطابق اسم مستودع الموقع الشخصي اسم المستخدم في GitHub تماماً: إذا كان اسمك ahmed-ali فالمستودع يُسمى ahmed-ali.github.io.

استخدام GitHub Pages مع المستودعات العامة مجاني. ويمكن النشر من مستودع خاص على الخطط المدفوعة من GitHub، لكن الموقع المنشور يظل مرئياً للجميع على الإنترنت.

كيف تنشر موقعاً على GitHub Pages خطوة بخطوة

سنشرح أبسط طريقة: ملفات HTML جاهزة، والنشر من فرع. تحتاج إلى حساب على GitHub وإلى Git مثبّت.

الخطوة 1. أنشئ المستودع

على GitHub أنشئ مستودعاً عاماً جديداً. للموقع الشخصي سمّه username.github.io، ولموقع المشروع سمّه كما تشاء. ثم استنسخه وأضف الصفحة الرئيسية:

git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "<h1>مرحباً، GitHub Pages</h1>" > index.html

يجب أن تسمى الصفحة الرئيسية index.html (أو index.md، أو README.md، فيحوّلها GitHub أيضاً إلى الصفحة الرئيسية). الحروف الكبيرة والصغيرة مهمة: Index.html لن يعمل.

الخطوة 2. أرسل الملفات إلى GitHub

git add index.html
git commit -m "الصفحة الأولى للموقع"
git push origin main

إذا طلب Git اسم المستخدم وكلمة المرور عند أول إرسال، فاستخدم رمز الوصول الشخصي أو الدخول عبر المتصفح، فكلمة مرور الحساب العادية لا تُقبل مع git push عبر HTTPS.

الخطوة 3. فعّل Pages من الإعدادات

افتح المستودع على GitHub، واذهب إلى Settings، واختر Pages من القائمة الجانبية. في قسم Build and deployment ضمن الحقل Source اختر Deploy from a branch. ثم حدد الفرع (عادةً main) والمجلد: الجذر / (root) أو /docs. واضغط Save.

المجلد /docs مناسب عندما يحتوي المستودع على كود المشروع، والموقع الخاص بالتوثيق في مجلد منفصل بجانبه.

الخطوة 4. انتظر حتى يكتمل النشر

يستغرق النشر من بضع ثوانٍ إلى بضع دقائق، ويحذّر GitHub من أن أول نشر قد يستمر حتى 10 دقائق. يمكنك متابعة عملية البناء في تبويب Actions، حيث تظهر العملية pages build and deployment. عندما تكتمل بعلامة خضراء، يظهر عنوان الموقع في Settings ← Pages.

بعد ذلك يصبح الأمر بسيطاً: تعدّل الملفات، وتسجّل commit، وتنفّذ git push، فيتحدث الموقع وحده.

النشر عبر GitHub Actions

النشر من فرع مناسب عندما تكون الملفات جاهزة داخل المستودع. أما إذا كان الموقع يحتاج إلى بناء أولاً، مثل تطبيق Vite أو React أو مولّد مثل Hugo، فمصدر GitHub Actions أنسب. في Settings ← Pages اختر GitHub Actions من الحقل Source، وسيقترح GitHub قوالب workflow جاهزة.

أبسط workflow لملفات ثابتة من المجلد dist بعد البناء يبدو هكذا:

name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4

يُوضع الملف في .github/workflows/pages.yml. بعد git push يثبّت Actions الاعتماديات، ويبني المشروع، وينشر محتويات dist. ميزة هذه الطريقة أن المستودع يحتوي على الكود المصدري فقط، فلا يتلوث سجل الـ commits بالملفات المبنية.

من الأخطاء الشائعة في مواقع المشاريع المسارات. يُفتح الموقع على العنوان /اسم-المستودع/، لكن المجمّع يشير افتراضياً إلى الموارد من الجذر /. فتظهر الصفحة بلا تنسيقات ولا سكربتات. والحل هو ضبط المسار الأساسي: في Vite عبر الخيار base: '/اسم-المستودع/'، وفي المجمّعات الأخرى خيار مشابه.

Jekyll والمولّدات الثابتة الأخرى

عند النشر من فرع يمرّر GitHub الملفات افتراضياً عبر Jekyll، وهو مولّد مواقع ثابتة مكتوب بلغة Ruby. لذلك يمكنك كتابة الصفحات بصيغة Markdown واستخدام القوالب، وسيحوّلها GitHub إلى HTML. هذا مفيد للمدونات والتوثيق: تكتب ملفات .md والقالب يتكفل بالتصميم.

من آثاره الجانبية أن Jekyll يتجاهل الملفات والمجلدات التي يبدأ اسمها بشرطة سفلية، مثل _next أو _assets. إذا بُني الموقع بأداة أخرى وكانت هذه المجلدات ضرورية، فضع في الجذر ملفاً فارغاً اسمه .nojekyll:

touch .nojekyll
git add .nojekyll
git commit -m "تعطيل Jekyll"
git push

المولّدات الأخرى مثل Hugo وAstro وEleventy وMkDocs وDocusaurus تعمل عبر GitHub Actions: يتم البناء داخل workflow ثم نشر المجلد الناتج. وGitHub Pages نفسه لا يعرف عنها شيئاً، فهو يحتاج فقط إلى الملفات النهائية.

كيف تربط نطاقك الخاص بـ GitHub Pages

العنوان username.github.io مناسب للمشاريع التعليمية، أما لملف الأعمال (portfolio) أو لمشروع جاد فالأفضل نطاق خاص. يتم الربط في موضعين: عند مزوّد النطاق، وفي إعدادات المستودع.

إعداد DNS

لنطاق فرعي مثل www.example.com أو blog.example.com أنشئ سجل CNAME يشير إلى username.github.io. أما النطاق الجذري example.com فتحتاج إلى سجلات A تشير إلى عناوين IP الخاصة بـ GitHub Pages:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

القائمة المحدّثة، بما في ذلك عناوين IPv6 لسجلات AAAA، موجودة في وثائق GitHub، فراجعها قبل الإعداد. ومن الأفضل ضبط النطاق الجذري وwww معاً، فيحوّل GitHub عنواناً إلى الآخر تلقائياً.

الإعداد في المستودع

في Settings ← Pages اكتب النطاق في الحقل Custom domain واحفظ. عند النشر من فرع ينشئ GitHub ملف CNAME في المستودع يحمل اسم النطاق. وعند النشر عبر Actions لا يحتاج الأمر إلى ملف CNAME، فالنطاق يُحفظ في الإعدادات.

يوصي GitHub بتأكيد النطاق في إعدادات الحساب (قسم Pages في إعدادات الملف الشخصي)، وهذا يحميك من أن يربط شخص آخر نطاقك بمستودعه بينما يشير DNS إلى GitHub. وقد يستغرق انتشار تغييرات DNS حتى يوم كامل، فإذا لم يعمل النطاق فوراً فانتظر.

HTTPS على GitHub Pages

بالنسبة لعناوين *.github.io يكون HTTPS مفعّلاً دائماً. ولنطاقك الخاص يصدر GitHub شهادة Let's Encrypt تلقائياً عندما يكون DNS مضبوطاً بشكل صحيح. بعد ذلك يظهر في Settings ← Pages خيار Enforce HTTPS، فاختره ليتم تحويل كل الطلبات من HTTP إلى HTTPS.

إذا كان الخيار غير متاح، فهذا يعني أن الشهادة لم تصدر بعد: تحقق من سجلات DNS وانتظر. وأحياناً يساعد حذف النطاق من حقل Custom domain ثم إضافته من جديد، فيبدأ إصدار الشهادة مجدداً. وتأكد أيضاً أن الموقع لا يحمّل الصور والسكربتات عبر http://، فالمتصفح سيحجب هذه الموارد بوصفها محتوى مختلطاً (mixed content).

قيود GitHub Pages

الاستضافة مجانية لكن لها حدود. وهي موثقة في وثائق GitHub، وتكفي معظم المواقع الشخصية والتعليمية بهامش واسع.

إضافة إلى الحدود التقنية توجد قواعد استخدام: GitHub Pages غير مخصص للخدمات التجارية مثل المتاجر الإلكترونية وSaaS، ولا لتوزيع الملفات الكبيرة. أما للمحافظ الشخصية والتوثيق والمدونات وصفحات الهبوط لمشاريع فهو مناسب تماماً.

قيد آخر: لا توجد إعدادات خادم. لا توجد عمليات إعادة توجيه خاصة، ولا ترويسات استجابة، ولا قواعد شبيهة بـ .htaccess. يمكنك فقط وضع صفحة 404.html خاصة في الجذر، فيعرضها GitHub عند العناوين غير الموجودة.

المشكلات الشائعة وحلولها

خطأ 404 على GitHub Pages

السبب الأكثر شيوعاً هو عدم وجود index.html في المجلد الذي اخترته مصدراً. تحقق من أنك اخترت الفرع والمجلد الصحيحين (/ (root) أو /docs)، وأن الملف اسمه index.html بالحروف الصغيرة. والسبب الثاني أن الموقع لم يُنشر بعد: افتح تبويب Actions وانتظر انتهاء البناء.

إذا ظهر 404 في الصفحات الداخلية لتطبيق الصفحة الواحدة عند تحديث الصفحة، فالمشكلة في التوجيه (routing): الخادم لا يعرف العنوان /about لأن الملف غير موجود. والحلول البديلة هي التوجيه بالهاش (/#/about)، أو نسخ index.html باسم 404.html.

الموقع لا يتحدث

أولاً تأكد أن التغييرات وصلت فعلاً إلى GitHub: نفّذ git status وgit log origin/main --oneline -3. ثم افتح تبويب Actions: إذا فشل البناء ستجد علامة حمراء وسجلاً يوضح الخطأ، مثل صيغة خاطئة في ملف Jekyll أو خطأ في workflow.

إذا نجح البناء لكن المتصفح يعرض النسخة القديمة، فالسبب هو التخزين المؤقت (cache). يخزّن GitHub Pages الملفات مؤقتاً لبضع دقائق، وكذلك يخزنها المتصفح. حدّث الصفحة مع تجاوز ذاكرة التخزين المؤقت (Ctrl+F5 أو Cmd+Shift+R) أو افتحها في نافذة خاصة.

التنسيقات والصور لا تُحمَّل

غالباً ما تكون المسارات خاطئة. في موقع المشروع يشير الرابط /style.css إلى جذر username.github.io، وليس إلى مجلد المستودع. استخدم المسارات النسبية (style.css، ./img/logo.png) أو حدد المسار الأساسي في المجمّع. وتحقق من حالة الأحرف في الأسماء: خوادم GitHub تفرّق بين Logo.PNG وlogo.png، حتى لو كان الموقع يعمل على Windows محلياً.

اختفاء المجلدات التي تبدأ بشرطة سفلية

هذا بسبب Jekyll: لا ينشر مجلدات مثل _app. أضف ملف .nojekyll في الجذر، أو انتقل إلى النشر عبر GitHub Actions.

الخلاصة

GitHub Pages أسرع طريقة لنشر موقع ثابت مجاناً: مستودع، وملف index.html، ومصدر في Settings ← Pages، وبعد دقائق يصبح الموقع متاحاً على username.github.io. للمواقع التي تحتاج إلى بناء استخدم GitHub Actions، ولنطاقك الخاص استخدم سجلات DNS وخيار Enforce HTTPS. وتذكّر حدود الخدمة: محتوى ثابت فقط، دون كود خادم، ومع حدود للحجم والحركة. وتُشرح عملياً العمل مع GitHub وإرسال التغييرات والأتمتة في دورة Git.