Git & GitHub
مشروع Git متكامل — تعاون على مستودع احترافي 2026
📅 2026-11-30⏱ 9 دقائق قراءة
🎉 **مبروك! وصلت إلى المقال الأخير في مسار 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: قائد الفريق يُنشئ المستودع
**أنت (قائد الفريق):**
```bash
mkdir team-blog
cd team-blog
git init
git branch -M main
```
**أنشئ الملفات الأساسية:**
**`README.md`:**
```markdown
# مدونتي — مشروع تعاوني
مشروع تدريبي لتعلّم 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`:**
```markdown
## الوصف
<!-- وصف مختصر -->
## نوع التغيير
- [ ] إضافة ميزة
- [ ] إصلاح خطأ
- [ ] توثيق
- [ ] إعادة هيكلة
## Checklist
- [ ] الكود يعمل محلياً
- [ ] لا توجد أخطاء
- [ ] تم إضافة اختبارات (إن أمكن)
## Screenshots
<!-- إذا كان تغيير بصري -->
```
**`.github/workflows/ci.yml`:**
```yaml
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: ارفع المستودع
```bash
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. استنسخ المستودع:**
```bash
git clone https://github.com/USERNAME/team-blog.git
cd team-blog
```
**2. أنشئ فرعاً:**
```bash
git checkout -b feature/homepage
```
**3. اعمل:**
**`src/index.html`:**
```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`:**
```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`:**
```javascript
console.log("مدونتي جاهزة! 🎉");
```
**4. ارفع الفرع:**
```bash
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: التعديل
**بعد الملاحظات:**
```bash
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. محلياً:**
```bash
git checkout main
git pull
git branch -d feature/homepage
```
### 🧑💼 المطور 2: إضافة صفحة "من نحن"
**نفس الدورة:**
```bash
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
```bash
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:**
```markdown
## الميزات الجديدة
- الصفحة الرئيسية
- صفحة من نحن
- تصميم متجاوب
## التثبيت
```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
```bash
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، أضف:**
```yaml
- name: Check README
run: |
if [ ! -f README.md ]; then
echo "❌ README.md مفقود!"
exit 1
fi
```
**النتيجة:** إذا حُذف README، CI يفشل.
## الجزء السادس: النشر التلقائي
### GitHub Pages
**1. أضف خطوة للنشر:**
**`.github/workflows/deploy.yml`:**
```yaml
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`:
```markdown
---
name: تقرير خطأ
about: أبلغ عن خطأ
---
## الوصف
<!-- وصف الخطأ -->
## الخطوات
1.
2.
3.
## المتوقع
<!-- ماذا توقعت -->
## الحالي
<!-- ماذا حدث -->
```
### تمرين 5: CI للاختبارات
أضف اختبارات.
**الحل:** (راجع ci.yml)
### تمرين 6: Deploy
انشر على GitHub Pages.
**الحل:** (راجع deploy.yml)
### تمرين 7: Release
أنشئ إصداراً.
**الحل:**
```bash
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
**الحل:**
```bash
git checkout main
git pull
git checkout feature/branch
git merge main
# حل التعارضات
git push
```
### 🔴 المشكلة 5: نسيت Pull
**الحل:**
```bash
git checkout main
git pull
git checkout feature/branch
git merge main
```
## جدول مكونات المشروع
<table>
<thead>
<tr>
<th>المكوّن</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>README.md</strong></td>
<td>وصف المشروع</td>
</tr>
<tr>
<td><strong>CONTRIBUTING.md</strong></td>
<td>دليل المساهمة</td>
</tr>
<tr>
<td><strong>LICENSE</strong></td>
<td>الترخيص</td>
</tr>
<tr>
<td><strong>.gitignore</strong></td>
<td>الملفات المستبعدة</td>
</tr>
<tr>
<td><strong>PR Template</strong></td>
<td>قالب PR</td>
</tr>
<tr>
<td><strong>Issue Template</strong></td>
<td>قالب Issue</td>
</tr>
<tr>
<td><strong>CI/CD</strong></td>
<td>أتمتة</td>
</tr>
<tr>
<td><strong>Branch Protection</strong></td>
<td>حماية الفرع</td>
</tr>
<tr>
<td><strong>Releases</strong></td>
<td>إصدارات</td>
</tr>
</tbody>
</table>
## 🎉 مبروك! أكملت مسار 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).**
- ✅ **نشر تلقائي.**
**هذا المشروع هو أساس أي فريق احترافي.** احتفظ به، وطبّقه في مشاريعك!