← المستوى 6 – قائد المشروع

الدرس 5 من 8 ⏱ 35 دقيقة بريميوم

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

أعدّ GitHub Actions: ادفع تغييراً والموقع يحدّث نفسه. كالمحترفين.

الروبوتات تعمل عنك

الآن يعمل هكذا: تغيّر الكود → commit → push → GitHub Pages يحدّث. هذا أتمتة أصلاً! لكن المحترفين يذهبون أبعد – GitHub Actions روبوت، بعد كل push، يفعل ما تقوله له: يبني الموقع، يفحص الأخطاء، ينشر.

هذا يسمى CI/CD (continuous integration / continuous deployment). يبدو معقداً، لكنه حقاً فقط: «الروبوتات تفحص وتنشر كل شيء بعد كل تغيير.»

شاهد معي: أول workflow لك

مهام الروبوتات تُكتب في ملف داخل مجلد .github/workflows/. مثلاً deploy.yml:

name: Check and deploy

on:
  push:
    branches: [main]   # run after every push to main

jobs:
  check:
    runs-on: ubuntu-latest   # the robot gets a clean Linux computer
    steps:
      - uses: actions/checkout@v4      # download my code
      - name: Check HTML
        run: |
          echo "Checking that index.html exists…"
          test -f index.html && echo "OK ✅"

بعد push، يظهر روبوت يعمل على GitHub تحت تبويب Actions. علامة خضراء تعني أن كل شيء نجح؛ X أحمر يعني أن شيئاً خطأ، والروبوت يخبرك ماذا.

💡

GitHub Pages يستخدم Actions أصلاً! إن نظرت إلى تبويب Actions، سترى أن نشر Pages يعمل عبر workflow اسمه «pages build and deployment». أنت الآن تضيف فحوصات إضافية خاصة بك – كمدير حقيقي لا يسمح بنسخة مكسورة أن تخرج للزوار.

الآن دورك 💪

  1. أنشئ .github/workflows/deploy.yml حسب المثال، ادفعه، وراقب تبويب Actions.
  2. اكسر شيئاً عمداً: أعد تسمية index.html إلى index2.html، ادفع – الـ workflow يصبح أحمر. أصلحه وراقب كيف يصبح أخضر. (هذه أهم تجربة في هذا الدرس!)
  3. أضف خطوة ثانية إلى الـ workflow – فحص أنه لم يُترك localhost في HTML:
      - name: No localhost in the code
        run: |
          if grep -r "localhost:3000" *.html; then
            echo "WARNING: localhost was left in the code!" && exit 1
          fi
          echo "OK ✅"
  1. اكتب في LAUNCH.md: «الموقع يُنشر تلقائياً، روبوت يفحص كل push.»

تحقق: الـ workflow يعمل في تبويب Actions بعد كل push. رأيت الأحمر (مكسور) والأخضر (مُصلَح). الموقع يحدّث بلا خطوة يدوية واحدة.

ما ستخرج به من هذا الدرس