تعلّم Git بصريًا

كل أمر في Git، متحرك خطوة بخطوة على المشروع الصغير نفسه — لترى ما يفعله فعلًا بملفاتك وتاريخك ومستودعك البعيد.

  • 72 أوامر
  • 275 خيارات
  • 15 سيناريوهات
  • 6 لغات
$echo "cart.push
ملفاتك — ملف واحد، ثلاثة أماكنمجلد العملقرصكالتجهيزالـ commit التاليHEADآخر commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (مستودع آخر)مستودعك — ‎.git على حاسوبك2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: لافتة متحركة على commitorigin/mainorigin/main: إشارتك المحلية إلى مكان فرع origin عند آخر fetch/push لكHEADHEAD ← الفرع الذي أنت عليهmainmain: كما هو موجود على originREADME.mdدون تغييرapp.jsدون تغييرindex.htmlدون تغييرv1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”

مباشر: يشغّل محاكي Git هذه الأوامر الأربعة في حلقة.

كل ما يخفيه Git، على الشاشة

كل صورة أدناه يرسمها مباشرةً المحاكي نفسه الذي يشغّل الدروس — لا شيء مرسوم باليد.

الأشجار الثلاث

اعرف أين يعيش كل ملف

يُظهر كل ملف نسخته على قرصك وفي منطقة التجهيز وفي آخر commit — شاهد git add وgit commit ينقلانه من مكان إلى التالي.

شاهده في درس →
ملفاتك — ملف واحد، ثلاثة أماكنمجلد العملقرصكالتجهيزالـ commit التاليHEADآخر commitadd ›commit ›GITUALIZEمستودعك — ‎.git على حاسوبك2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: لافتة متحركة على commitHEADHEAD ← الفرع الذي أنت عليهREADME.mdدون تغييرapp.jsمجهَّزindex.htmlمعدَّلlogin.jsغير متتبَّعv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”
التاريخ

الفروع والدمج، مرسومة لحظة حدوثها

تظهر commits جديدة، وتنزلق لافتات الفروع، ويجمع الدمج خطين. ومع rebase تتلاشى الـ commits القديمة بينما تأخذ الجديدة مكانها.

شاهده في درس →
ملفاتك — ملف واحد، ثلاثة أماكنمجلد العملقرصكالتجهيزالـ commit التاليHEADآخر commitadd ›commit ›GITUALIZEمستودعك — ‎.git على حاسوبك16a965cMerge feature…16a965c6f96f4a7acb902f45bf46455f09ccff30 Merge feature/logina2b8b5dDocument inst…a2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagefeature/loginfeature/login: لافتة متحركة على commitmainmain: لافتة متحركة على commitHEADHEAD ← الفرع الذي أنت عليهREADME.mdدون تغييرapp.jsدون تغييرindex.htmlدون تغييرlogin.jsدون تغييرv2v2v2v2v2v2v2v2v2v1v1v1HEAD → main → 16a965c “Merge feature/login”
المستودعات البعيدة

حاسوبك وGitHub، جنبًا إلى جنب

تُظهر fetch وpull وpush بالضبط ما ينتقل بين مستودعك وorigin — ولماذا يُرفض الدفع.

شاهده في درس →
ملفاتك — ملف واحد، ثلاثة أماكنمجلد العملقرصكالتجهيزالـ commit التاليHEADآخر commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (مستودع آخر)مستودعك — ‎.git على حاسوبك2b4c917Add to cart2b4c91785b581691dd1665ce1839576f03d6ac23 Add to cart2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitorigin/mainorigin/main: إشارتك المحلية إلى مكان فرع origin عند آخر fetch/push لكmainmain: لافتة متحركة على commitHEADHEAD ← الفرع الذي أنت عليهmainmain: كما هو موجود على originREADME.mdدون تغييرapp.jsدون تغييرindex.htmlدون تغييرv1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”
الاستعادة

لا شيء يختفي بصمت

يبقى الـ commit الذي تركه reset على الشاشة بخط متقطّع حتى يعيده الـ reflog — فلا يعود التراجع عن الأخطاء مخيفًا.

شاهده في درس →
ملفاتك — ملف واحد، ثلاثة أماكنمجلد العملقرصكالتجهيزالـ commit التاليHEADآخر commitadd ›commit ›GITUALIZEمستودعك — ‎.git على حاسوبكb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepage (لا يمكن الوصول إليه — لا فرع يشير هنا؛ وما زال الـ reflog يتذكّره)mainmain: لافتة متحركة على commitHEADHEAD ← الفرع الذي أنت عليهREADME.mdدون تغييرapp.jsدون تغييرindex.htmlدون تغييرv1v1v1v1v1v1v1v1v1HEAD → main → b272b3a “Set up project”
الطرفية

مخرجات حقيقية، لا لقطات شاشة

يعمل كل أمر في محاكي Git جرى التحقق منه مقابل Git الحقيقي، فتُظهر الطرفية ما سيطبعه Git نفسه.

شاهده في درس →
~/shop — bashgit fetch
# meanwhile… Sam pushes 7f94dc7 “Update README” to origin/main
$ git fetch
remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (1/1), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0) Unpacking objects: 100% (3/3), 312 bytes | 312.00 KiB/s, done. From github.com:acme/shop 2e039ac..7f94dc7 main -> origin/main

أربع طرق للتعلّم

الأوامر

72 أوامر · 275 خيارات

صفحة لكل أمر: درس متحرك كامل، ثم كل خيار بعرض قصير خاص به وتوصية.

--force-with-leaseGit ≥ 1.8.5موصى به
▷ عرض الرسم التوضيحي

سيناريوهات

15 سيناريوهات

مواقف حقيقية من البداية إلى النهاية: أول commit لك، وتعارض دمج، وreset خاطئ، وإصلاح عاجل على إصدار.

1بدء الميزة
تفرّع
$ git switch -c feature/login
صفحة تسجيل الدخول
$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"
ربطها
$ echo "login()" >> app.js && git commit -am "Call login on load"

سير العمل

GitHub flow · Git flow · Trunk-based · Forking

كيف تعمل الفرق فعلًا، مع القواعد مقتبسة من مصادرها وفريق من أربعة يطبّقها.

ملفاتك — ملف واحد، ثلاثة أماكنمجلد العملقرصكالتجهيزالـ commit التاليHEADآخر commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (مستودع آخر)مستودعك — ‎.git على حاسوبك2987563Merge pull re…2987563bea62405d138bad2642c5cdf47c0ced7d Merge pull request #12 from acme/add-cart-limit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit1bf6e0fDocument the …1bf6e0fe85eaa96e17bc60d039223cad86b071fc Document the cart limit509eb2aLimit cart si…509eb2a230245b72689c79c123c412eb6d8613d3 Limit cart size2987563Merge pull re…2987563bea62405d138bad2642c5cdf47c0ced7d Merge pull request #12 from acme/add-cart-limit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit1bf6e0fDocument the …1bf6e0fe85eaa96e17bc60d039223cad86b071fc Document the cart limit509eb2aLimit cart si…509eb2a230245b72689c79c123c412eb6d8613d3 Limit cart sizemainmain: لافتة متحركة على commitorigin/mainorigin/main: إشارتك المحلية إلى مكان فرع origin عند آخر fetch/push لكHEADHEAD ← الفرع الذي أنت عليهmainmain: كما هو موجود على originREADME.mdدون تغييرapp.jsدون تغييرindex.htmlدون تغييرv1v1v1v3v3v3v2v2v2HEAD → main → 2987563 “Merge pull request #12 from acme/add-cart-limit”

ساحة التجربة

لعب حر

اكتب أي أمر على المشروع نفسه وشاهده يحدث. وتقترح التلميحات ما تجرّبه بعد ذلك.

$try any command… (help)✎ Edit a file
عالق؟ الأوامر المرجّحة التالية
cat index.html
اعرض التعارض: نسختك بين <<<<<<< و=======، ونسختهم تحتها
code index.html
حلّه في المحرر (يُبقي الطرفين ويزيل العلامات)
git add index.html
بعد الحل: يخبر Git أن «index.html أُصلح»
💡

هل تعلم؟

مصمَّم ليقرأه الجميع

  • ست لغات — English · Français · Español · Português · Deutsch · العربية
  • فاتح أو داكن — وأربعة أنماط ألوان للتصوّرات.
  • وضع عمى الألوان — الأزرق والبرتقالي بدل الأخضر والأحمر، في كل مكان.
  • حجم النص — من 90% إلى 130%، دون أن يتعطّل التصميم.

كل ذلك خلف زر الترس في الترويسة.