مشروع Git متكامل — تعاون على مستودع احترافي 2026

🎉 مبروك! وصلت إلى المقال الأخير في مسار Git & GitHub!

لقد تعلمت كل الأساسيات: التثبيت، المستودعات، Commits، الفروع، الدمج، GitHub، Pull Requests، حل التعارضات، و Workflow. الآن حان الوقت لتطبيق كل هذه المفاهيم في مشروع حقيقي متعاون.

في هذا الدليل العملي، سنبني مشروعاً تعاونياً كاملاً — وهو ما يحدث في الفرق الحقيقية.

ما سنبنيه

مشروع "مدونتي" — موقع بسيط مع:

• ✅ HTML + CSS + JavaScript.
• ✅ فريق من 2-3 مطورين (محاكاة).
• ✅ GitHub Flow.
• ✅ CI/CD تلقائي.
• ✅ Pull Requests + مراجعة.
• ✅ إصدارات (Releases).

الهدف: محاكاة فريق حقيقي بأدوات احترافية.

هيكل المشروع

team-blog/
├── .github/
│   ├── workflows/
│   │   └── ci.yml              # CI/CD
│   └── pull_request_template.md
├── src/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── index.html
├── docs/
│   └── guide.md
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── package.json

الجزء الأول: إعداد الفريق

الخطوة 1: قائد الفريق يُنشئ المستودع

أنت (قائد الفريق):

mkdir team-blog
cd team-blog
git init
git branch -M main

أنشئ الملفات الأساسية:

README.md:

# مدونتي — مشروع تعاوني

مشروع تدريبي لتعلّم Git & GitHub في فريق.

## الفريق
- @leader (قائد)
- @dev1 (مطور 1)
- @dev2 (مطور 2)

## التثبيت
```bash
git clone https://github.com/USERNAME/team-blog.git
cd team-blog

الترخيص

MIT

**`CONTRIBUTING.md`:**

```markdown
# دليل المساهمة

## كيف تساهم؟
1. Fork المستودع
2. أنشئ فرعاً: `feature/اسمك-الميزة`
3. اكتب الكود
4. ارفع PR

## قواعد الـ Commits
- `feat:` ميزة جديدة
- `fix:` إصلاح خطأ
- `docs:` توثيق
- `style:` تنسيق

## قبل PR
- [ ] الكود يعمل محلياً
- [ ] لا توجد أخطاء
- [ ] التوثيق محدّث

.gitignore:

node_modules/
.env
.DS_Store
*.log

LICENSE (MIT):

MIT License

Copyright (c) 2026 Team Blog

Permission is hereby granted...

.github/pull_request_template.md:

## الوصف
<!-- وصف مختصر -->

## نوع التغيير
- [ ] إضافة ميزة
- [ ] إصلاح خطأ
- [ ] توثيق
- [ ] إعادة هيكلة

## Checklist
- [ ] الكود يعمل محلياً
- [ ] لا توجد أخطاء
- [ ] تم إضافة اختبارات (إن أمكن)

## Screenshots
<!-- إذا كان تغيير بصري -->

.github/workflows/ci.yml:

name: CI

on:
  pull_request:
    branches: [main]
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Validate HTML
        run: |
          echo "✅ HTML صالح"

      - name: Validate CSS
        run: |
          echo "✅ CSS صالح"

      - name: Success
        run: echo "🎉 كل الاختبارات نجحت!"

الخطوة 2: ارفع المستودع

git add .
git commit -m "chore: إعداد المشروع الأساسي"
git remote add origin https://github.com/USERNAME/team-blog.git
git push -u origin main

الخطوة 3: حماية الفرع

على GitHub:

Settings → Branches → Add rule

• Branch name pattern: main
• ✅ Require a pull request before merging.
• ✅ Require approvals (1).
• ✅ Require status checks (CI).
• ✅ Require conversation resolution.

النتيجة: لا يمكن دفع main مباشرة.

الخطوة 4: أضف المتعاونين

Settings → Collaborators → Add people

أضف أعضاء الفريق.

الجزء الثاني: محاكاة الفريق

🧑💼 المطور 1: إضافة الصفحة الرئيسية

1. استنسخ المستودع:

git clone https://github.com/USERNAME/team-blog.git
cd team-blog

2. أنشئ فرعاً:

git checkout -b feature/homepage

3. اعمل:

src/index.html:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدونتي</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>📝 مدونتي</h1>
    <nav>
      <a href="/">الرئيسية</a>
      <a href="/about">من نحن</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h2>مرحباً بك في مدونتي</h2>
      <p>مقالات عن البرمجة والتقنية</p>
    </section>
  </main>

  <footer>
    <p>© 2026 مدونتي</p>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>

src/css/style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  direction: rtl;
  line-height: 1.7;
  color: #1f2937;
}

header {
  background: #3b82f6;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

.hero {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px;
  text-align: center;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

footer {
  text-align: center;
  padding: 20px;
  background: #1e293b;
  color: white;
  margin-top: 60px;
}

src/js/main.js:

console.log("مدونتي جاهزة! 🎉");

4. ارفع الفرع:

git add .
git commit -m "feat: إضافة الصفحة الرئيسية"
git push -u origin feature/homepage

5. افتح PR على GitHub:

• املأ المعلومات.
• Reviewer: @leader.
• Create pull request.

👨💼 القائد: المراجعة

1. اذهب لـ PR على GitHub.

2. اضغط Files changed.

3. أضف تعليقاً:

✅ تنسيق ممتاز!
💡 اقتراح: أضف meta description لتحسين SEO.

4. اختر:

• Request changes (إذا أردت تعديلات).
• Approve (إذا وافقت).

👨💼 المطور 1: التعديل

بعد الملاحظات:

git checkout feature/homepage
# عدّل index.html
git add .
git commit -m "docs: إضافة meta description"
git push

النتيجة: PR يتحدّث تلقائياً.

👨💼 القائد: الدمج

1. على GitHub:

• Merge pull request → Squash and merge.
• Confirm merge.

2. حذف الفرع:

• Delete branch.

3. محلياً:

git checkout main
git pull
git branch -d feature/homepage

🧑💼 المطور 2: إضافة صفحة "من نحن"

نفس الدورة:

git checkout main
git pull
git checkout -b feature/about

# أنشئ about.html
# عدّل index.html (أضف رابط)
# عدّل style.css

git add .
git commit -m "feat: إضافة صفحة من نحن"
git push -u origin feature/about

# افتح PR
# مراجعة
# دمج

الجزء الثالث: الإصدار الأول

1. أنشئ Tag

git checkout main
git pull
git tag -a v1.0.0 -m "الإصدار الأول: الصفحة الرئيسية + من نحن"
git push origin v1.0.0

2. على GitHub: Releases

• Releases → Create a new release.
• Tag: v1.0.0.
• Title: الإصدار الأول.
• Description:

## الميزات الجديدة
- الصفحة الرئيسية
- صفحة من نحن
- تصميم متجاوب

## التثبيت
```bash
git clone https://github.com/USERNAME/team-blog.git

### 3. اضغط Publish release

**🎉 الإصدار الأول جاهز!**

## الجزء الرابع: إصلاح خطأ (Hotfix)

### 🐛 المطور 3: إصلاح خطأ

**السيناريو:** خطأ في التصميم على الجوال.

```bash
git checkout main
git pull
git checkout -b fix/mobile-layout

# عدّل style.css
# أضف media queries

git add .
git commit -m "fix: إصلاح التصميم على الجوال"
git push -u origin fix/mobile-layout

# PR
# مراجعة
# دمج

2. إصدار Hotfix

git tag -a v1.0.1 -m "إصلاح: التصميم على الجوال"
git push origin v1.0.1

الجزء الخامس: CI/CD تلقائي

1. تأكد من .github/workflows/ci.yml

2. عند فتح أي PR:

• ✅ CI يعمل تلقائياً.
• ✅ يعرض النتيجة.
• ✅ يمنع الدمج إذا فشل.

3. مثال على فشل:

في CI، أضف:

- name: Check README
  run: |
    if [ ! -f README.md ]; then
      echo "❌ README.md مفقود!"
      exit 1
    fi

النتيجة: إذا حُذف README، CI يفشل.

الجزء السادس: النشر التلقائي

GitHub Pages

1. أضف خطوة للنشر:

.github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./src

2. على GitHub:

Settings → Pages → Source: gh-pages

النتيجة: كل push لـ main = نشر تلقائي.

رابط الموقع: https://USERNAME.github.io/team-blog/

الجزء السابع: أفضل الممارسات

1. PR صغير

• < 400 سطر.
• ميزة واحدة.
• مراجعة سريعة.

2. Commits واضحة

feat: إضافة صفحة الاتصال
fix: إصلاح خطأ في التصميم
docs: تحديث README

3. مراجعة سريعة

• خلال 24 ساعة.
• تعليقات بناءة.
• استخدم emojis.

4. حماية main

• ✅ PR إلزامي.
• ✅ موافقة واحدة.
• ✅ CI إلزامي.

5. Releases منتظمة

• v1.0.0: الإصدار الأول.
• v1.1.0: ميزات جديدة.
• v1.0.1: إصلاحات.

تمارين إضافية

تمرين 1: فريق من 3

حاكِ فريقاً كاملاً.

الحل: (راجع الأمثلة أعلاه)

تمرين 2: CONTRIBUTING

أنشئ دليل مساهمة.

الحل: (راجع القالب أعلاه)

تمرين 3: PR Template

أنشئ قالب PR.

الحل: .github/pull_request_template.md

تمرين 4: Issue Template

أنشئ قالب Issue.

الحل:

.github/ISSUE_TEMPLATE/bug.md:

---
name: تقرير خطأ
about: أبلغ عن خطأ
---

## الوصف
<!-- وصف الخطأ -->

## الخطوات
1.
2.
3.

## المتوقع
<!-- ماذا توقعت -->

## الحالي
<!-- ماذا حدث -->

تمرين 5: CI للاختبارات

أضف اختبارات.

الحل: (راجع ci.yml)

تمرين 6: Deploy

انشر على GitHub Pages.

الحل: (راجع deploy.yml)

تمرين 7: Release

أنشئ إصداراً.

الحل:

git tag -a v1.0.0 -m "الإصدار الأول"
git push origin v1.0.0

تمرين 8: مشروع كامل

ابنِ مشروعاً كاملاً مع كل الميزات.

الحل: (راجع الأمثلة أعلاه)

حل المشاكل الشائعة

🔴 المشكلة 1: CI فشل

الحل: افتح تفاصيل CI، اقرأ الخطأ، أصلحه.

🔴 المشكلة 2: PR محظور

السبب: لم تجتز CI أو لم تُوافَق.

الحل: أكمل المتطلبات.

🔴 المشكلة 3: push rejected

السبب: main محمي.

الحل: استخدم فرعاً + PR.

🔴 المشكلة 4: تعارض بعد PR

الحل:

git checkout main
git pull
git checkout feature/branch
git merge main
# حل التعارضات
git push

🔴 المشكلة 5: نسيت Pull

الحل:

git checkout main
git pull
git checkout feature/branch
git merge main

جدول مكونات المشروع

المكوّن	الوظيفة
README.md	وصف المشروع
CONTRIBUTING.md	دليل المساهمة
LICENSE	الترخيص
.gitignore	الملفات المستبعدة
PR Template	قالب PR
Issue Template	قالب Issue
CI/CD	أتمتة
Branch Protection	حماية الفرع
Releases	إصدارات

🎉 مبروك! أكملت مسار Git & GitHub!

لقد وصلت إلى نهاية المسار. أنت الآن تعرف:

• ✅ أساسيات Git: init، add، commit، log.
• ✅ Commits: Conventional Commits.
• ✅ الفروع: إنشاء، تبديل، دمج.
• ✅ الدمج: Fast-forward، Squash، Rebase.
• ✅ GitHub: المستودعات، Issues.
• ✅ Pull Requests: إنشاء، مراجعة، دمج.
• ✅ حل التعارضات.
• ✅ Workflows: Git Flow، GitHub Flow.
• ✅ CI/CD: GitHub Actions.
• ✅ مشروع تعاوني.

ماذا بعد Git & GitHub؟

الآن أنت جاهز لـ:

1. المساهمة في Open Source — ساهم في مشاريع مفتوحة.
2. بناء معرض أعمالك — ارفع مشاريعك.
3. العمل في فريق — استخدم Workflow احترافي.
4. تعلم Git متقدم — Submodules, Hooks.

الخلاصة

في هذا المشروع، بنيت:

• ✅ مستودع تعاوني كامل.
• ✅ فريق من 2-3 مطورين.
• ✅ GitHub Flow.
• ✅ CI/CD تلقائي.
• ✅ PRs + مراجعة.
• ✅ حماية الفرع.
• ✅ إصدارات (Releases).
• ✅ نشر تلقائي.

هذا المشروع هو أساس أي فريق احترافي. احتفظ به، وطبّقه في مشاريعك!