Posts on FahdLABs | مختّبر فهد

كيف توثق إيميلك الشخصي مجاناً وتحصل على علامة التوثيق (الصح) ✔️

Tue, 17 Mar 2026 00:00:00 +0000

كلنا متعودين نشوف علامة التوثيق (الصح) بجانب أسماء المشاهير والشركات في انستقرام وتويتر ويوتيوب، واللي تعطينا ثقة أن هذا الحساب رسمي ومو مزيف.

لكن، هل كنت تدري إنك تقدر تسوي نفس الشيء لإيميلك الشخصي؟

لما توثق إيميلك، أي رسالة ترسلها راح يظهر بجانبها “علامة توثيق” (صح أزرق أو أحمر حسب التطبيق) للمُستلم. هذا الشيء يعطي رسائلك شكل احترافي جداً، سواء كنت تقدم على وظيفة، أو تراسل جهة رسمية، أو حتى تستخدمه لعملك الخاص.

الخبر الحلو؟ الموضوع مجاني بالكامل، ومو لازم تكون شركة عشان تسويه! في هذا المقال راح نمشي مع بعض خطوة بخطوة، من الصفر، وبطريقة سهلة جداً تناسب المبتدئين.

🎥 الشرح بالفيديو (للي يفضلون الشرح العملي)

إذا كنت تحب تتابع الخطوات بالفيديو، جهزت لك هذا الشرح التفصيلي:

🛠️ الخطوة 1: إنشاء حساب في موقع الشهادة (Actalis)

عشان نوثق الإيميل، نحتاج شيء اسمه “شهادة رقمية”. فيه شركة معروفة اسمها Actalis تعطينا هذي الشهادة مجاناً لمدة سنة.

افتح متصفحك (جوجل كروم أو سفاري) وادخل على موقع الشركة الرسمي:Actalis.com.
في أعلى يمين الصفحة، اضغط على زر Login.
راح تفتح لك صفحة، اضغط على الزر اللي بالأسفل Create your free Actalis account (إنشاء حساب مجاني).
اكتب إيميلك اللي تبي توثقه، واكتب باسورد (رقم سري) قوي وكرره مرتين.
حط علامة (صح) على خيار I agree الأول (للموافقة على الشروط)، الباقي مو ضروري. ثم اضغط Confirm and continue.
راح يوصلك كود مكون من أرقام على إيميلك، انسخه وحطه في الموقع لتأكيد الحساب.

🎁 الخطوة 2: طلب الشهادة المجانية وتفعيلها

الآن حسابك جاهز، خلينا نطلب الشهادة:

سجل دخولك للموقع، ومن لوحة التحكم اضغط على قسم S/MIME certificates (شهادات حماية الإيميل).
راح تشوف خيارات كثيرة، اختر الخيار المجاني اللي مكتوب تحته (Free) واضغط على الزر الأخضر Proceed.
في صفحة البيانات:
- اختر Individual (يعني أنك شخص عادي ولست شركة).
- الاسم (Name): اكتب اسمك.
- الرقم الضريبي (Tax number): لا تشيل هم، اكتب فقط ستة أصفار 000000.
- العنوان (Address): اكتب اسم مدينتك أو دولتك.
انزل تحت ووافق على الشروط بالضغط على المربعات، ثم اضغط Confirm and Pay (لا تقلق، السعر صفر ولن يطلب بطاقة بنكية).

طريقة ربط الشهادة بإيميلك:

في الصفحة التالية، اضغط على زر Activate from your account.
ركز هنا: راح يطلب منك تكتب الإيميل اللي تبي توثقه، اكتبه وتأكد إن الحروف صحيحة 100%.
اضغط متابعة، وراح يوصلك إيميل من الشركة، افتحه واضغط على الرابط اللي بداخله لتأكيد ملكيتك للإيميل.

بعد التأكيد، ستظهر الشهادة في حسابك باللون الأخضر (Active).

📥 الخطوة 3: تحميل الشهادة وحفظ الباسورد (مهم جداً)

ارجع لموقع Actalis، واعمل تحديث (Refresh) للصفحة.
راح تلاحظ أن الشهادة تفعلت، اضغط على زر DownloadFile .p12 لتحميل ملف الشهادة على كمبيوترك.
في نفس هذا الوقت، الشركة أرسلت لك إيميل أخير يحتوي على الباسورد (الرقم السري) الخاص بشهادتك.
افتح إيميلك، انسخ هذا الباسورد الطويل، واحفظه في ملف نصي (مفكرة) بجانب ملف الشهادة اللي حملته.

هذا الإيميل يحتوي على الباسورد الخاص بشهادتك، حافظ عليه لأنك ستحتاجه في الخطوات القادمة.

💡 حيلة بسيطة: عشان نسهل على نفسنا التثبيت في الجوال لاحقاً، افتح إيميلك وأرسل رسالة لنفسك، أرفق فيها ملف الشهادة (.p12) واكتب الباسورد في نص الرسالة.

💻 الخطوة 4: التثبيت على الكمبيوتر (ويندوز - برنامج Outlook)

إذا كنت تستخدم ويندوز، برنامج “الأوتلوك” (Outlook Classic) هو الأفضل لإرسال الإيميلات الموثقة.

أولاً: تعريف الويندوز على الشهادة:

روح لملف الشهادة اللي حملته (.p12) واضغط عليه مرتين كأنك تفتح أي برنامج.
بتطلع لك نافذة، اضغط Next ثم Next.
راح يطلب منك الباسورد، اكتب الباسورد اللي أرسلوه لك بالإيميل.
خطوة مهمة: حط صح على المربع اللي مكتوب فيه Mark this key as exportable (عشان تقدر تنقل الشهادة مستقبلاً).
اضغط Next ثم Finish، وبتطلع لك رسالة بنجاح التثبيت.

ثانياً: تفعيل التوثيق داخل Outlook:

افتح برنامج الأوتلوك، واضغط فوق يسار على ملف (File) ثم خيارات (Options).
اختر Trust Center (مركز التوثيق) من اليسار، ثم اضغط زر Trust Center Settings.
من القائمة اليسرى اختر Email Security (أمان الإيميل)، ثم اضغط على زر Settings (الإعدادات).
اضغط على New (جديد) واكتب أي اسم في المربع الأول.
عند خيار Signing Certificate اضغط على زر Choose، واختار إيميلك من القائمة واضغط OK.
ملاحظة هامة جداً: عند خيار Hash Algorithm، غيره إلى SHA256 (هذا يخلي التوثيق يشتغل على كل الأجهزة الحديثة بدون مشاكل).
حط علامة صح على خيار Add digital signature to outgoing messages (عشان يتوثق كل إيميل ترسله تلقائياً). واضغط OK لكل النوافذ.

تأكد من اختيار SHA256 لضمان أفضل توافق مع جميع الأجهزة.

🎉 مبروك! جرب الآن ترسل إيميل من الأوتلوك، وراح تلاحظ علامة التوثيق موجودة.

📱 الخطوة 5: التثبيت على الآيفون (تطبيق Mail الرسمي)

إذا تبي ترسل إيميلاتك الموثقة من جوالك الآيفون بكل سهولة:

تذكر الإيميل اللي أرسلته لنفسك في الخطوة 3؟ افتحه من جوالك الآيفون.
اضغط على ملف الشهادة المرفق. راح تطلع لك رسالة تقول Profile Downloaded (تم تنزيل ملف التعريف).
روح لـ إعدادات الآيفون (Settings) > عام (General) > انزل تحت واختر VPN وإدارة الجهاز.
راح تلاقي الشهادة موجودة، اضغط عليها واعمل تثبيت (Install). (بيطلب رمز قفل شاشتك، ثم بيطلب باسورد الشهادة اللي ارسلوه لك).

خطوة إجبارية للآيفون فقط (الشهادة الوسيطة): الآيفون نظام حمايته عالي ويحتاج يتعرف على الشركة الأم اللي أصدرت الشهادة.

انسخ هذا الرابط وافتحه في متصفح سفاري بجوالك:http://cacert.actalis.it/certs/actalis-autclig3
راح يحمل ملف تعريف (Profile) جديد، روح للإعدادات وثبته بنفس الطريقة اللي سويناها قبل شوي.

هذه الشهادة ضرورية للآيفون لكي يتعرف على شهادة التوثيق.

تفعيل التوثيق في تطبيق الإيميل:

روح لـ إعدادات الآيفون > انزل لتطبيق البريد (Mail) > الحسابات (Accounts).
ادخل على حساب الإيميل حقك > ثم اضغط على إعدادات الحساب > وانزل تحت واختر متقدم (Advanced).
انزل لآخر الصفحة لقسم اسمه S/MIME، واضغط على خيار التوقيع Sign.
فعّل الزر (خليه أخضر)، وتحت راح تلاقي الشهادة اللي ثبتناها، تأكد إن عليها علامة (صح).

تفعيل خيار Sign ليقوم الآيفون بوضع علامة التوثيق على رسائلك.

✨ النتيجة النهائية: إيميلك الآن احترافي وموثق!

الآن أنت جاهز! افتح تطبيق الإيميل في الآيفون (أو الأوتلوك في الكمبيوتر) وجرب اكتب رسالة جديدة، راح تلاحظ ظهور كلمة Signed (مُوَقّع) باللون الأزرق فوق.

أرسل الإيميل لنفسك أو لصديقك، وبمجرد ما يفتح المستلم الرسالة (في Gmail مثلاً)، راح يشوف علامة التوثيق الرسمية بجانب إيميلك!

كذا بتظهر رسائلك للمستلمين.. على الجيميل من المتصفح!

كذا بتظهر رسائلك للمستلمين.. على تطبيق الايميل على الايفون!

🎁 شرح إضافي: تثبيت الشهادة لأجهزة ماك (Mac) وتطبيق Outlook (اضغط للفتح)

بناءً على طلب أحد المتابعين، هذا شرح إضافي لكيفية تثبيت الشهادة على نظام الماك (macOS) واستخدامها في تطبيق Outlook. نظام الماك يعتمد على تطبيق خاص بالحماية اسمه “وصول سلسلة المفاتيح” (Keychain Access).

أولاً: إدخال الشهادة في الماك:

افتح ملف الشهادة .p12 الذي قمت بتحميله بالضغط عليه مرتين.
سيفتح لك تطبيق Keychain Access، وسيطلب منك الباسورد الخاص بالشهادة (الباسورد الذي وصلك في الإيميل).
اختر إضافة الشهادة إلى سلسلة مفاتيح تسجيل الدخول (login).

إضافة الشهادة إلى Keychain Access

ملاحظة: ضروري تغيرها من “iCloud” إلى “login” (أو تسجيل الدخول بالعربي) ثم تضغط “Add” لإضافة الشهادة. بيطلب منك الماك باسورد الشهادة، اكتبه وكمل الإضافة.

ثانياً: خطوة “الوثوق” الإجبارية في الماك (Trust): هذه الخطوة مهمة جداً وبدونها لن يعمل التوثيق:

داخل تطبيق Keychain Access، ابحث عن اسم إيميلك أو شهادة Actalis.
اضغط عليها بزر الماوس الأيمن (Right-click) واختر إحضار المعلومات (Get Info).
افتح السهم بجانب كلمة الثقة (Trust).
عند خيار “عند استخدام هذه الشهادة” (When using this certificate)، قم بتغييره من الافتراضي إلى الوثوق دائماً (Always Trust).
أغلق النافذة، سيطلب منك الماك إدخال (الرقم السري الخاص بجهاز الماك نفسه) لتأكيد هذا التعديل.

تغيير إعدادات الثقة إلى Always Trust خطوة لا غنى عنها في الماك.

ثالثاً: تفعيل التوثيق داخل تطبيق Outlook للماك:

افتح تطبيق Microsoft Outlook على جهاز الماك.
من الشريط العلوي، اضغط على كلمة Outlook ثم الإعدادات/التفضيلات (Settings/Preferences).
ادخل على قسم الحسابات (Accounts).

إضغط على إيميلك ثم اضغط على إعداد (Configure) مقابل كلمة الأمان (Security).

في قسم التوقيع الرقمي (Digital signing)، افتح القائمة المنسدلة واختر الشهادة الخاصة بك.
ضع علامة (صح) على خيار توقيع الرسائل الصادرة (Sign outgoing messages).

⚠️ تنبيه هام جداً: تأكد أن خيار تشفير الرسائل الصادرة (Encrypt outgoing messages) الموجود في نفس هذه الصفحة غير مُفعل (بدون علامة صح). التشفير يتطلب أن يكون المستلم لديه شهادة أيضاً، وإذا فعلته ستظهر لك رسالة خطأ تمنعك من الإرسال. نحن نحتاج التوقيع (Sign) فقط!

تأكد من اختيار الشهادة لتوقيع الرسائل، وترك خيار التشفير فارغاً.

تجربة الإرسال: الآن، عند فتح نافذة رسالة جديدة، ستلاحظ وجود علامة (قفل أو ختم توثيق) تخبرك بأن الرسالة سيتم توقيعها رقمياً (Signed).

علامة التوثيق ظاهرة وجاهزة للإرسال في الماك

أتمنى أن يكون الشرح واضح وسهل للجميع. إذا واجهتك أي مشكلة، لا تتردد في إعادة مشاهدة الفيديو، أو ترك تعليق وسأكون سعيداً بمساعدتك. لا تنسَ تشارك الفيديو مع أصحابك اللي يحتاجون يخلون إيميلاتهم احترافية!

دليل المبتدئين جدًا: سوّ مدونة عربية بـ Hugo Stack خطوة بخطوة (GitHub Pages)

Tue, 17 Feb 2026 10:00:00 +0300

1) المقدمة (المشكلة/الهدف)

الشرح اللي ما له مرجع… يضيع. أنا أبغى شروحاتي تعيش ويكون سهل الرجوع لها — عشان كذا سويت مدونة للقناة: كل فيديو معه مقال مرتب.

وأنت تقدر تسوي نفس الشيء — بل أكثر: مكان لقصصك، أفكارك، أو أي شيء تبنيه وتنشره. صفحتك الخاصة فيك.

تبغى مدونة/موقع شخصي مجاني وسريع… بدون استضافة مدفوعة… وبدون ما تدخل في تعقيد سيرفرات؟

تخيل الموضوع ببساطة:

GitHub = مكان نحفظ فيه ملفات موقعك.
GitHub Web UI = تعدّل ملفات موقعك مباشرة من المتصفح.
Hugo = برنامج يبني الموقع من ملفات Markdown بسيطة.

بنهاية الشرح: موقعك يصير Live على GitHub Pages + عربي RTL + أول مقال.

إذا تبغى تشوف أمثلة على “شكل المقالات” عندي في المدونة:

إعداد Raspberry Pi 5 من الصفر

شرح AdGuard Home (مانع إعلانات للشبكة)

2) الفيديو

3) المتطلبات (Prerequisites)

حساب GitHub.
متصفح.
اتصال إنترنت.
(اختياري) صورة بروفايل avatar.png.

4) التطبيق خطوة بخطوة (لا تنط)

هذا “ترتيب” الشرح عشان تمشي معي بنفس التسلسل:

انسخ القالب لحسابك
فعّل النشر التلقائي (GitHub Pages)
عدّل الملفات من GitHub Web UI
عرب الموقع + RTL + baseurl
عدّل صفحات القائمة
أضف حسابات السوشيال
ارفع صورك من جهازك لـ GitHub
احذف أو اخفِ المقالات الافتراضية
اكتب أول مقال + غلاف
اعمل Commit للتعديلات
(اختياري) خيارات إضافية للي يبغى تحكم أكثر

4.1) انسخ القالب لحسابك (أول خطوة)

وش تسوي؟

تخلي القالب يصير عندك في حسابك (عشان تقدر تعدّل عليه).

الخطوات:

افتح ريبو القالب على GitHub (وإذا عجبك اعطه نجمة).
اضغط Use this template.
اختر Create a new repository.
اكتب اسم للريبو.

معلومة مهمة جدًا عن الاسم (عشان baseurl):

إذا اسم الريبو YOUR_USERNAME.github.io → موقعك يكون على: https://YOUR_USERNAME.github.io
إذا اسم الريبو my-blog → موقعك يكون على: https://YOUR_USERNAME.github.io/my-blog

4.2) فعّل النشر التلقائي (مرة واحدة فقط)

وش يعني؟

كل مرة تسوي تغير شي الموقع يتحدث لوحده.

الخطوات:

افتح الريبو حقك في GitHub.
ادخل Settings.
ادخل Pages.
في Build and deployment اختر: Source = GitHub Actions.

4.3) عدّل الملفات من GitHub Web UI (بدون تيرمنال)

الفكرة:

كل تغيير تسويه من GitHub لازم تحط له Commit.
بعد كل Commit، GitHub Actions يبني الموقع وينشره تلقائيًا.

طريقة التعديل:

افتح الملف اللي تبي تعدّله داخل الريبو.
اضغط أيقونة القلم Edit.
عدّل.
تحت الصفحة: اكتب رسالة قصيرة.
اضغط Commit changes.

4.4) كيف تشوف التغيير بعد التعديل؟

افتح تبويب Actions.
ادخل آخر Workflow.
انتظر لين يصير ✅.
افتح رابط موقعك وشوف النتيجة.

أول مرة البلد ممكن تفشل — هذا طبيعي لأن GitHub Actions ما كان مفعّل بعد. بعد ما تفعّله (خطوة 4.2)، ارجع لـ Actions > اضغط على build and deploy > اضغط Run workflow عشان يحاول يبني الموقع مرة ثانية.

4.5) عرب الموقع بالكامل + RTL + `baseurl` (أهم خطوة)

4.5.1) عدّل رابط الموقع + اسم الموقع

افتح: config/_default/config.toml

إذا اسم الريبو YOUR_USERNAME.github.io:

1
2
3
4
5


baseurl = "https://YOUR_USERNAME.github.io/"
languageCode = "ar"
title = "اسم مدونتك"
defaultContentLanguage = "ar"
hasCJKLanguage = false

إذا اسم الريبو my-blog:

1

baseurl = "https://YOUR_USERNAME.github.io/my-blog/"

4.5.2) خلي اتجاه الموقع عربي (RTL)

افتح: config/_default/languages.toml

1
2
3
4
5


[ar]
languageName = "العربية"
languagedirection = "rtl"
title = "اسم مدونتك"
weight = 1

4.5.3) عدّل نص البروفايل (تحت الصورة) + الفوتر (اخر شي تحت بالصفحة)

افتح: config/_default/params.toml

1
2
3
4
5
6
7
8


[sidebar]
emoji = "👋"
subtitle = "اكتب وصف مدونتك هنا"
avatar = "img/avatar.png"

[footer]
since = 2026
customText = "اكتب نص الفوتر هنا"

4.6) عدّل صفحات القائمة (الرئيسية/الأرشيف/البحث/الروابط)

فكرة بسيطة:

هذي صفحات جاهزة.
أنت بس تغيّر العنوان والكلام.

تبغى تخفي صفحة من القائمة؟ (مثلاً الأرشيف) افتح config/_default/menu.toml واعمل Comment لسطور الصفحة اللي تبغى تخفيها — في GitHub Web UI اضغط Ctrl + / على الأسطر المحددة.

الرئيسية

افتح: content/_index.md

1
2
3
4
5
6
7
8


---
menu:
 main:
 name: الرئيسية
 weight: 1
 params:
 icon: home
---

الأرشيف

افتح: content/page/archives/index.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


---
title: "الأرشيف"
layout: "archives"
slug: "archives"
menu:
 main:
 weight: 2
 params:
 icon: archives
---

البحث

افتح: content/page/search/index.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


---
title: "بحث"
slug: "search"
layout: "search"
outputs:
 - html
 - json
menu:
 main:
 weight: 3
 params:
 icon: search
---

الروابط (صفحة روابطك)

افتح: content/page/links/index.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


---
title: "روابطي"
links:
 - title: "يوتيوب"
 description: "قناتي"
 website: "https://ضع-رابط-قناتك-هنا"
 image: "https://ضع-رابط-شعار-يوتيوب-هنا.png"
 - title: "انستغرام"
 description: "حسابي"
 website: "https://ضع-رابط-حسابك-هنا"
 image: "https://ضع-رابط-شعار-انستغرام-هنا.png"
menu:
 main:
 weight: 4
 params:
 icon: link
comments: false
---

وش يسوي links؟

يعرض لك كروت (Cards) بروابطك.

4.7) أضف حسابات السوشيال تحت الصورة

وش يعني؟

الأيقونات الصغيرة اللي تظهر تحت صورة البروفايل.

افتح: config/_default/menu.toml وحط روابطك:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


[[social]]
 identifier = "youtube"
 name = "YouTube"
 url = "https://youtube.com/@YOUR_CHANNEL"

 [social.params]
 icon = "brand-youtube"

[[social]]
 identifier = "instagram"
 name = "Instagram"
 url = "https://instagram.com/YOUR_ACCOUNT"

 [social.params]
 icon = "brand-instagram"

[[social]]
 identifier = "github"
 name = "GitHub"
 url = "https://github.com/YOUR_USERNAME"

 [social.params]
 icon = "brand-github"

تنبيه: القالب يجي معه أيقونات محدودة جاهزة (مثل GitHub و Twitter). أيقونات مثل YouTube و Instagram مو موجودة بشكل افتراضي — لازم تسوي ملف SVG لكل وحدة وتحطه في assets/icons/. شوف قسم “إضافة أيقونات SVG بنفسك” في آخر المقال لشرح الطريقة بالتفصيل.

إذا ما ظهرت الأيقونات بعد التعديل:

سو Refresh للصفحة.
أو إبدء build ثانية من Actions.

4.8) كيف ترفع صورك من جهازك إلى GitHub

هذا مهم لأن الصور تكون في جهازك، وGitHub لازم ترفعها داخل الريبو.

أسهل طريقة: Upload files

افتح المجلد اللي تبغى ترفع فيه الصورة داخل GitHub.
اضغط Add file.
اختر Upload files.
اسحب الصور (Drag & Drop) أو اخترها من جهازك.
اضغط Commit changes.

4.9) احذف أو اخفِ المقالات الافتراضية

لما تنسخ القالب بيجيك مقالات جاهزة كأمثلة. قبل ما تكتب مقالك، نظّفها:

طريقة 1: إخفاء (draft)

افتح ملف المقال (مثلاً content/post/hello-world/index.md).
اضغط أيقونة القلم Edit.
أضف هذا السطر في بطاقة المقال (بين الـ ---):

1

draft: true

اضغط Commit changes.

draft: true يخفي المقال من الموقع لكنه يبقى في الريبو — تقدر ترجعه لاحقًا.

طريقة 2: حذف نهائي

افتح مجلد المقال داخل content/post/.
اضغط على الملف اللي تبغى تحذفه.
اضغط النقاط ... (أعلى يمين) > Delete file.
اضغط Commit changes.

4.10) اكتب أول مقال (من GitHub Web UI)

4.10.1) أنشئ المقال

افتح مجلد content/post/ في الريبو.
اضغط Add file > Create new file.
في خانة الاسم اكتب: my-first-post/index.md
- أول جزء قبل الـ / يصير اسم المجلد.
- index.md هو ملف المقال (لازم يكون بهذا الاسم بالضبط).

4.10.2) بطاقة المقال (Front Matter)

الصق هذا في الملف:

1
2
3
4
5
6
7
8


---
title: "هذا أول مقال لي"
description: "وصف بسيط"
date: 2026-02-17T20:00:00+03:00
draft: false
---

اكتب محتوى مقالك هنا...

أهم سطر هنا:

draft: false يعني المقال يظهر (مو مخفي).

اضغط Commit changes.

4.10.3) (اختياري) صورة غلاف

ادخل مجلد المقال (content/post/my-first-post/).
اضغط Add file > Upload files.
ارفع صورة باسم cover.png (أو cover.jpg).
اضغط Commit changes.
ارجع لملف index.md وأضف في البطاقة:

1

image: cover.png

مهم:

لا تكتب image: cover.png إلا إذا الصورة موجودة فعلاً — وإلا الموقع يعطيك خطأ.
نفس الشيء لأي صورة داخل المقال: لازم الملف يكون موجود في نفس المجلد بنفس الاسم.

4.11) اعمل Commit للتعديلات (بدون Git أو Terminal)

إذا أنت تعدّل من GitHub Web UI:

كل ما تضغط Commit changes أنت كذا “رفعت التعديل”.
بعدين تابع النشر من Actions لين يصير ✅.

5) ليش بعض الخيارات تفرق؟ (مختصر مفيد)

baseurl: إذا غلط… الموقع يطلع “مكسّر” (CSS/صور/روابط).
Page Bundle (مجلد لكل مقال): يخليك تحط الصور داخل نفس مجلد المقال بدل ما تتوه.
draft: false: هو اللي يحدد هل المقال يطلع للعالم أو لا.

6) مشاكل شائعة وحلولها

الموقع يطلع أبيض أو المسارات خربانة

راجع baseurl وخصوصًا إذا اسم الريبو مو YOUR_USERNAME.github.io.

الصور ما تظهر + خطأ `Height`

هذا غالبًا لأنك كتبت صورة في المقال لكن ملف الصورة غير موجود.
الحل: حط الصورة داخل نفس مجلد المقال بنفس الاسم، أو احذف سطر الصورة مؤقتًا.

الأيقونات ما تظهر

تأكد ملفات SVG داخل assets/icons/.
تأكد اسم الملف يطابق icon في menu.toml.

التعديلات ما تبان في المعاينة

سو Refresh.
أو أعد تشغيل hugo server -D.

7) FAQ (أسئلة تتكرر)

هل لازم أعرف برمجة؟

لا. تقدر تبدأ بمقالات Markdown وتعديلات بسيطة.

هل لازم أثبّت Hugo على جهازي؟

لا. كل الشرح هنا يشتغل من المتصفح فقط (GitHub Web UI). بس لو تبغى تشوف التغييرات قبل ما تنشرها، شوف قسم Codespaces في آخر المقال.

كم ياخذ النشر على GitHub Pages؟

عادةً دقائق. أول مرة ممكن تطول شوي.

هل أقدر أخلي الموقع عربي RTL بالكامل؟

اي نعم، أهم شيء languagedirection = "rtl" + ضبط إعدادات اللغة.

8) الخلاصة

الآن عندك مدونة شغالة من الصفر:

Repo جاهز
GitHub Actions ينشر تلقائي
كل شيء من المتصفح بدون تيرمنال
عربي RTL + أول مقال

إذا تبغى حلقة تكملة: (تخصيص أكثر / صفحات إضافية / تحسين SEO) اكتبها بالكومنت.

9) خيارات إضافية (اختياري) — للي يبغى تحكم أكثر

هنا حطّيت الأشياء “اللي مو أساسية” داخل Dropdown عشان ما تتشتت كبداية.

إضافة أيقونات SVG بنفسك (إذا تبغى أيقونة مو موجودة)

الفكرة:

نسوي مجلد: assets/icons/
نحط فيه ملفات .svg
ونستخدم اسم الملف في menu.toml

مثال (Instagram):

احفظ ملف: assets/icons/brand-instagram.svg
الصق هذا الـ SVG:

1
2
3
4
5
6


<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
 <path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" />
 <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
 <path d="M16.5 7.5v.01" />
</svg>

مثال (Youtube):

احفظ ملف: assets/icons/brand-youtube.svg
الصق هذا الـ SVG:

1
2
3
4
5


<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
 <path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8" />
 <path d="M10 9l5 3l-5 3z" />
</svg>

قاعدة سهلة:

اسم الملف (بدون .svg) لازم يطابق icon.

تفعيل التعليقات (Disqus) — للمبتدئ

أبسط خيار للمبتدئ: Disqus.

سو حساب في Disqus واختر Shortname.
افتح: config/_default/config.toml وحط:

1

disqusShortname = "PUT_YOUR_DISQUS_SHORTNAME"

افتح: config/_default/params.toml وتأكد:

1
2
3


[comments]
enabled = true
provider = "disqus"

ملاحظة:

أحيانًا صندوق التعليقات ما يبان في المعاينة المحلية، أفضل اختبار بعد النشر.

ثيمي المستخدم هنا

افتح: assets/scss/custom.scss

هذا الي انا استخدمه في هذي المدونه هنا:

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262


/* Arabic localization and RTL refinements */
/* تحسينات للغة العربية + دعم اتجاه RTL (من اليمين لليسار) */

:root { /* الجذر: هنا نعرّف متغيرات CSS الافتراضية (للثيم الفاتح) */

 /* Theme colors (light) */
 /* ألوان الثيم في الوضع الفاتح */
 --body-background: #f6f7fb; /* لون خلفية الصفحة */
 --body-text-color: #1f2937; /* لون النص الأساسي */
 --card-background: #ffffff; /* لون خلفية الكروت/الصناديق */
 --accent-color: #0ea5e9; /* لون التمييز (روابط/عناصر بارزة) */

 /* Code */
 /* إعدادات ألوان الكود (Code blocks / Inline code) */
 --code-block-bg: #f8fafc; /* لون خلفية بلوك الكود */
 --code-block-border: rgba(15, 23, 42, 0.12); /* لون/شفافية إطار بلوك الكود */
 --code-block-fg: #0b1220; /* لون نص الكود داخل البلوك */
 --inline-code-bg: rgba(14, 165, 233, 0.12); /* خلفية الكود داخل السطر (inline) */
 --inline-code-border: rgba(14, 165, 233, 0.25); /* إطار inline code */
 --inline-code-fg: #0b1220; /* لون نص inline code */

 /* Map Stack theme vars to our palette (fixes the brown wrapper around code blocks) */
 /* ربط متغيرات ثيم Stack بمتغيراتنا (يحل مشكلة الإطار/الغلاف البني حول بلوكات الكود) */
 --pre-background-color: var(--code-block-bg); /* يجعل خلفية <pre> مثل خلفية بلوك الكود */
 --pre-text-color: var(--code-block-fg); /* يجعل لون نص <pre> مثل لون نص الكود */
 --code-background-color: var(--inline-code-bg); /* يجعل خلفية <code> داخل النص مثل inline */
 --code-text-color: var(--inline-code-fg); /* يجعل لون نص <code> داخل النص مثل inline */

 /* Syntax colors */
 /* ألوان تلوين الشفرة (Syntax Highlighting) */
 --code-syntax-keyword: #2563eb; /* لون الكلمات المحجوزة مثل: if / for */
 --code-syntax-string: #047857; /* لون النصوص داخل علامات الاقتباس */
 --code-syntax-number: #7c3aed; /* لون الأرقام */
 --code-syntax-function: #b45309; /* لون أسماء الدوال/الوظائف */
 --code-syntax-operator: #be185d; /* لون العمليات مثل + - = */
 --code-syntax-comment: rgba(71, 85, 105, 0.85); /* لون التعليقات داخل الكود */
 --code-syntax-punctuation: rgba(15, 23, 42, 0.72); /* لون الأقواس والفواصل ... */
 --code-syntax-line-highlight: rgba(14, 165, 233, 0.12); /* لون تظليل سطر محدد */
 --code-line-number: rgba(71, 85, 105, 0.65); /* لون الرقم */
}

:root[data-scheme="dark"] { /* الجذر في الوضع الداكن فقط */

 /* Theme colors (dark) */
 /* ألوان الثيم في الوضع الداكن */
 --body-background: #0b1220; /* خلفية الصفحة بالداكن */
 --body-text-color: rgba(255, 255, 255, 0.78); /* لون النص الأساسي بالداكن */
 --card-background: #111a2e; /* خلفية الكروت بالداكن */
 --accent-color: #38bdf8; /* لون التمييز بالداكن */

 /* Code */
 /* إعدادات الكود بالداكن */
 --code-block-bg: #0a1222; /* خلفية بلوك الكود بالداكن */
 --code-block-border: rgba(148, 163, 184, 0.18); /* إطار بلوك الكود بالداكن */
 --code-block-fg: rgba(255, 255, 255, 0.92); /* لون نص الكود بالداكن */
 --inline-code-bg: rgba(56, 189, 248, 0.16); /* خلفية inline code بالداكن */
 --inline-code-border: rgba(56, 189, 248, 0.28); /* إطار inline code بالداكن */
 --inline-code-fg: rgba(255, 255, 255, 0.9); /* لون نص inline code بالداكن */

 /* Syntax colors */
 /* ألوان التلوين بالداكن */
 --code-syntax-keyword: #7dd3fc; /* keywords */
 --code-syntax-string: #34d399; /* strings */
 --code-syntax-number: #c4b5fd; /* numbers */
 --code-syntax-function: #fbbf24; /* functions */
 --code-syntax-operator: #fb7185; /* operators */
 --code-syntax-comment: rgba(148, 163, 184, 0.75); /* comments */
 --code-syntax-punctuation: rgba(226, 232, 240, 0.88); /* punctuation */
 --code-syntax-line-highlight: rgba(56, 189, 248, 0.16); /* line highlight */
}

/* Code blocks + inline code (override Chroma defaults) */
/* تنسيق بلوكات الكود + كود داخل السطر (تجاوز إعدادات Chroma الافتراضية) */
.article-content .highlight { /* صندوق/حاوية الكود */
 background: var(--code-block-bg) !important; /* خلفية بلوك الكود (إجباري) */
 border: 1px solid var(--code-block-border); /* إطار بلوك الكود */
 border-radius: 12px; /* زوايا دائرية */
}

.article-content .highlight pre,
.article-content pre,
.article-content .chroma,
.article-content .chroma pre { /* عناصر <pre> وchroma داخل المقال */
 background: var(--code-block-bg) !important; /* نفس الخلفية */
 color: var(--code-block-fg); /* لون نص الكود */
 border: 1px solid var(--code-block-border); /* نفس الإطار */
 border-radius: 12px; /* نفس الزوايا */
}

.article-content .highlight pre,
.article-content .highlight .chroma,
.article-content .highlight .chroma pre { /* داخل highlight بالذات */
 border: 0 !important; /* يلغي الإطار الداخلي لتجنب تكرار الإطار */
 border-radius: 0; /* يلغي الزوايا الداخلية */
}

.article-content .chroma table,
.article-content .chroma td,
.article-content .chroma .lntable,
.article-content .chroma .lntd { /* جداول line numbers داخل chroma */
 background: transparent !important; /* يجعل الخلفية شفافة (بدون مربعات غريبة) */
}

.article-content pre code { /* <code> داخل <pre> */
 background: transparent !important; /* يلغي أي خلفية داخلية */
 color: inherit; /* يأخذ لون النص من الأب */
}

.article-content :not(pre) > code,
.article-content p > code,
.article-content li > code,
.article-content td > code { /* inline code داخل النص (وليس داخل pre) */
 background: var(--inline-code-bg); /* خلفية inline code */
 color: var(--inline-code-fg); /* لون نص inline code */
 border: 1px solid var(--inline-code-border); /* إطار خفيف */
 padding: 0.12em 0.38em; /* مسافة داخلية حول النص */
 border-radius: 0.5em; /* تدوير الحواف */
}

/* Line numbers */
/* لون أرقام الأسطر داخل بلوك الكود */
.article-content .chroma .lnt,
.article-content .chroma .ln {
 color: rgba(148, 163, 184, 0.85); /* لون أرقام الأسطر */
}

/* Syntax highlighting: replace the theme's brown/yellow palette */
/* تلوين الشفرة: استبدال ألوان الثيم الافتراضية (البني/الأصفر) */

.article-content .chroma .k,
.article-content .chroma .kc,
.article-content .chroma .kd,
.article-content .chroma .kp,
.article-content .chroma .kr,
.article-content .chroma .kt,
.article-content .chroma .kn,
.article-content .chroma .nt { /* فئات الكلمات المحجوزة/أنواع/و... */
 color: var(--code-syntax-keyword) !important; /* لون keywords */
}

.article-content .chroma .s,
.article-content .chroma .sa,
.article-content .chroma .sb,
.article-content .chroma .sc,
.article-content .chroma .dl,
.article-content .chroma .sd,
.article-content .chroma .s2,
.article-content .chroma .sh,
.article-content .chroma .si,
.article-content .chroma .sx,
.article-content .chroma .sr,
.article-content .chroma .s1,
.article-content .chroma .ss,
.article-content .chroma .ld { /* فئات الـ strings */
 color: var(--code-syntax-string) !important; /* لون strings */
}

.article-content .chroma .m,
.article-content .chroma .mb,
.article-content .chroma .mf,
.article-content .chroma .mh,
.article-content .chroma .mi,
.article-content .chroma .il,
.article-content .chroma .mo { /* فئات الأرقام */
 color: var(--code-syntax-number) !important; /* لون numbers */
}

.article-content .chroma .nf,
.article-content .chroma .na,
.article-content .chroma .nc,
.article-content .chroma .nd,
.article-content .chroma .ne,
.article-content .chroma .nx { /* فئات أسماء الدوال/الأنواع */
 color: var(--code-syntax-function) !important; /* لون functions/identifiers */
}

.article-content .chroma .o,
.article-content .chroma .ow { /* فئات العمليات */
 color: var(--code-syntax-operator) !important; /* لون operators */
}

.article-content .chroma .p { /* فئات علامات الترقيم */
 color: var(--code-syntax-punctuation) !important; /* لون الأقواس والفواصل */
}

.article-content .chroma .c,
.article-content .chroma .ch,
.article-content .chroma .cm,
.article-content .chroma .c1,
.article-content .chroma .cs,
.article-content .chroma .cp,
.article-content .chroma .cpf,
.article-content .chroma .gu { /* فئات التعليقات */
 color: var(--code-syntax-comment) !important; /* لون comments */
}

.article-content .chroma .hl { /* سطر مميز (highlight line) */
 background: var(--code-syntax-line-highlight) !important; /* خلفية تظليل السطر */
}

/* Headings: increase contrast + navigation clarity */
/* العناوين: وضوح أعلى + تحسين التنقل (خصوصاً عند الضغط على رابط عنوان) */
.article-content h2,
.article-content h3,
.article-content h4 {
 scroll-margin-top: 110px; /* يترك مسافة أعلى العنوان عند الانتقال إليه (حتى لا يختفي تحت الهيدر) */
}

.article-content h2 { /* عنوان مستوى 2 */
 color: var(--accent-color); /* لون العنوان */
 border-inline-start: 4px solid var(--accent-color); /* خط جانبي (يكون يسار في LTR ويمين في RTL) */
 padding-inline-start: 12px; /* مسافة داخلية بعد الخط الجانبي */
 padding-block: 4px; /* مسافة داخلية أعلى/أسفل */
 margin-top: 2.2em; /* مسافة فوق العنوان */
}

.article-content h2::after { /* خط فاصل بعد h2 */
 content: ""; /* عنصر وهمي */
 display: block; /* يعرض كسطر */
 height: 1px; /* سماكة الخط */
 margin-top: 0.65em; /* مسافة فوق الخط */
 background: var(--card-separator-color); /* لون الخط الفاصل (من متغير الثيم) */
}

.article-content h3 { /* عنوان مستوى 3 */
 color: var(--card-text-color-main); /* لون النص الأساسي للعناوين (من الثيم) */
 border-inline-start: 3px solid rgba(56, 189, 248, 0.35); /* خط جانبي خفيف */
 padding-inline-start: 10px; /* مسافة بعد الخط */
 margin-top: 1.8em; /* مسافة فوق العنوان */
}

html[lang="ar"] { /* عندما لغة الصفحة عربية */
 --base-font-family: "Noto Sans Arabic", "Tajawal", "Cairo", var(--sys-font-family), sans-serif; /* خط عام لكل الموقع */
 --article-font-family: "Noto Sans Arabic", "Tajawal", "Cairo", var(--sys-font-family), sans-serif; /* خط المقالات */
}

html[dir="rtl"] { /* عندما اتجاه الصفحة RTL */
 body {
 text-align: right; /* محاذاة نص الصفحة لليمين */
 }

 input,
 textarea {
 text-align: right; /* محاذاة النص داخل الحقول لليمين */
 }

 .article-content ul,
 .article-content ol {
 padding-right: 2rem; /* مسافة يمين للقوائم (بدل اليسار) */
 padding-left: 0; /* إلغاء مسافة اليسار */
 }

 /* Keep technical snippets and structured data readable in mixed-direction pages */
 /* نخلي الأشياء التقنية تقرأ طبيعي حتى لو الصفحة RTL */
 .article-content pre,
 .article-content code,
 .article-content table,
 .article-content kbd {
 direction: ltr; /* اتجاه يسار-ليمين داخل الكود/الجداول */
 text-align: left; /* محاذاة لليسار داخلها */
 }
}

إذا ما ظهر التغيير:

Hard Refresh (CTRL + SHIFT + R)
أو أعد تشغيل hugo server -D.

تحديث الثيم بأمان (بدون ما تخسر شغلك)

قبل التحديث: سو “Backup” سريع:

1
2
3


git status
git add .
git commit -m "backup before update"

تحديث الثيم:

1
2


hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v4
hugo mod tidy

تأكد إن كل شيء شغال:

1

hugo server -D

إذا تمام:

1
2
3


git add .
git commit -m "update theme"
git push origin main

استخدام Codespaces — شوف التغييرات مباشرة قبل النشر (متقدم)

الطريقة اللي شرحناها فوق (GitHub Web UI) كافية وتشتغل. لكن مشكلتها: كل تعديل لازم تسوي Commit وتنتظر البلد تخلص عشان تشوف النتيجة.

GitHub Codespaces يعطيك بيئة تطوير كاملة في المتصفح — تعدّل وتشوف النتيجة لحظيًا، وبعد ما تخلص تسوي Push مرة واحدة.

وش تحتاج؟

حساب GitHub (نفس الحساب).
Codespaces مجاني يعطيك 60 ساعة/شهر على الحساب المجاني.

كيف تشغله؟

افتح الريبو حقك في GitHub.
اضغط الزر الأخضر Code.
اختر تبويب Codespaces.
اضغط Create codespace on main.
انتظر لين يجهّز البيئة (أول مرة ياخذ دقيقة أو أكثر).

شغّل المعاينة المحلية

بعد ما يفتح لك Codespace، افتح Terminal (عادةً يكون مفتوح تحت) واكتب:

1

hugo server -D

بيطلع لك رابط محلي (مثل http://localhost:1313/).
Codespaces بيعرض لك إشعار — اضغط Open in Browser.
الآن كل ما تحفظ ملف، الصفحة تتحدث لحظيًا.

عدّل وجرّب

عدّل أي ملف (مقال، إعداد، ستايل…).
احفظ (Ctrl + S).
شوف النتيجة فورًا في المتصفح.

ارفع التعديلات لـ GitHub

لما تخلص من كل التعديلات:

1
2
3


git add .
git commit -m "وصف التعديل"
git push

بعدها GitHub Actions يبني الموقع وينشره تلقائيًا — نفس ما تعودنا عليه.

متى تستخدم Codespaces؟

لما تبغى تجرّب تعديلات كثيرة بدون ما تسوي Commit لكل واحدة.
لما تبغى تشوف شكل الموقع الفعلي قبل ما ينشر.
لما تبغى تعدّل CSS أو ألوان وتشوف النتيجة مباشرة.

ملاحظة: لا تنسى توقف الـ Codespace لما تخلص عشان ما تستهلك الساعات المجانية. ادخل github.com/codespaces وأوقف أي Codespace شغال.

قالب مقال بدون صور (الأبسط)

قالب مقال بسيط بدون صور — مناسب للمبتدئ جدًا (Hugo Stack)

استخدمه كـ Page Bundle:

أنشئ مجلد: content/post/<slug>/
داخله ملف: index.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186


---
title: "عنوان عربي واضح (المشكلة + الأداة + النتيجة)"
description: "وصف مختصر وواضح: وش بتسوي؟ ولمين؟ وبأي أداة؟"
slug: "هنا-الكلام-الي-بيطلع-اخر-الرابط-بعد-السلاش"
date: 2026-02-17T10:00:00+03:00
categories:
 - ابدأ هنا
tags:
 - hugo
 - hugo-theme-stack
 - github-pages
 - github-actions
 - rtl
---

## 1) المقدمة (المشكلة/الهدف)

اكتبها بـ 3 أسطر:

- وش المشكلة؟
- وش الهدف؟
- وش النتيجة اللي بيطلع فيها القارئ؟

مثال (قالب):
> تبغى تسوي **[X]** بدون **[Y]**؟ 
> هنا بنسويها خطوة بخطوة، وبالنهاية بيكون عندك: **[Z]**.

روابط (اختياري):
- رابط داخلي: [مقال مرتبط](/post/slug-1/)
- رابط خارجي: [الموقع الرسمي](https://example.com)

## 2) الفيديو


 
 

## 3) المتطلبات (Prerequisites)

3–6 نقاط تكفي:
- …
- …
- …

## 4) التطبيق خطوة بخطوة (Step‑by‑step)

قاعدة سهلة: كل خطوة فيها (وش تسوي؟ + كيف تتأكد؟).

### 4.1) خطوة 1 — …

**وش تسوي؟** جملة واحدة.

**الخطوات:**
1. خطوة 1
2. خطوة 2
3. خطوة 3

**كيف أتأكد؟** اكتب علامة نجاح واضحة (مثال: "طلع ✅ في Actions").

> ملاحظة قصيرة (اختياري): اكتب "ليش" بسطر واحد.

### 4.2) خطوة 2 — مثال كود (Code block)

```bash
echo "hello"
git status
```

Inline code داخل السطر: `baseurl` و `draft: false`.

### 4.3) خطوة 3 — قائمة فحص (اختياري)

- [ ] سويت كذا
- [ ] تأكدت من كذا
- [ ] شغّلته وطلع تمام ✅

<details>
<summary><strong>أمثلة جاهزة (افتح إذا تحتاج)</strong></summary>

### جدول

| العنصر | القيمة | ملاحظات |
|---|---|---|
| الخيار A | On | مناسب للمبتدئ |
| الخيار B | Off | خلّه لاحقًا |

### اقتباس

> الوضوح > المؤثرات 
> التعليم > الاستعراض

### Dropdown (معلومة متقدمة)

<details>
<summary><strong>اختياري: إعداد متقدم (افتح إذا تحتاجه)</strong></summary>

شرح بسيط جدًا داخل الدروب داون:

```toml
# مثال إعداد
key = "value"
```

</details>

### تنبيه (لا تسوي كذا)

اكتبها بصراحة:
- لا تسوي X لأن النتيجة Y.
- سو Z بدلها.

</details>

## 5) ليش الخيارات تفرق؟ (Why choices matter)

3 نقاط قصيرة تكفي:
- ليش اخترنا كذا؟
- وش بيخرب لو غيرته؟
- متى تغيّره؟

## 6) مشاكل شائعة وحلولها (Common issues)

### المشكلة 1: عنوان المشكلة
- **الأعراض**: وش تشوف؟
- **السبب**: غالبًا ليش؟
- **الحل السريع**:
 1) …
 2) …

### المشكلة 2: …

## 7) FAQ (أسئلة تتكرر)

### س: هل لازم أعرف برمجة؟
ج: لا… (سطرين بالكثير).

### س: هل أقدر أسويها بدون X؟
ج: نعم… (وضح خيارين).

### س: كم ياخذ النشر/التحديث؟
ج: …

## 8) الخلاصة (Conclusion)

اختصرها بنقاط:

- وش سوينا؟
- وش صار عندك الآن؟
- وش الخطوة التالية؟

CTA لطيف:
> إذا تبغى تكملة (موضوع 1 / موضوع 2)… اكتبها بالكومنت.

---

## إضافات (اختياري جدًا)

### A) أكواد متعددة لغات

```json
{ "name": "FahdLABs", "type": "blog" }
```

```yaml
key: value
list:
 - item
```

```toml
baseurl = "https://example.com/"
```

### B) Math (إذا تستخدمها)

Inline: \\( a^2 + b^2 = c^2 \\)

Block:

\\[
\\int_0^1 x^2 dx = \\frac{1}{3}
\\]

### C) Footnotes (إذا تحتاج)

جملة فيها مرجع[^1].

[^1]: اكتب المعلومة/المصدر هنا.

قالب مقال مع صور

قالب مقال مع صور — مناسب للمبتدئ جدًا (Hugo Stack)

تنبيه مهم جدًا: كل صورة تذكرها في المقال لازم تكون موجودة فعليًا داخل نفس مجلد المقال. مثلاً إذا كتبت ![وصف](screenshot1.png) لازم يكون ملف screenshot1.png موجود جنب index.md. إذا الصورة مو موجودة، الموقع بيعطيك خطأ وما بيشتغل!

استخدمه كـ Page Bundle:

أنشئ مجلد: content/post/<slug>/
داخله ملف: index.md
داخل نفس المجلد: حط صورة الغلاف cover.png وأي صور ثانية تبغى تستخدمها بالمقال

طريقة إضافة صورة داخل المقال:

![وصف واضح للصورة](اسم-الصورة.png)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191


---
title: "عنوان عربي واضح (المشكلة + الأداة + النتيجة)"
description: "وصف مختصر وواضح: وش بتسوي؟ ولمين؟ وبأي أداة؟"
slug: "هنا-الكلام-الي-بيطلع-اخر-الرابط-بعد-السلاش"
date: 2026-02-17T10:00:00+03:00
image: cover.png
categories:
 - ابدأ هنا
tags:
 - hugo
 - hugo-theme-stack
 - github-pages
 - github-actions
 - rtl
---

## 1) المقدمة (المشكلة/الهدف)

اكتبها بـ 3 أسطر:

- وش المشكلة؟
- وش الهدف؟
- وش النتيجة اللي بيطلع فيها القارئ؟

مثال (قالب):
> تبغى تسوي **[X]** بدون **[Y]**؟ 
> هنا بنسويها خطوة بخطوة، وبالنهاية بيكون عندك: **[Z]**.

روابط (اختياري):
- رابط داخلي: [مقال مرتبط](/post/slug-1/)
- رابط خارجي: [الموقع الرسمي](https://example.com)

## 2) الفيديو


 
 

## 3) المتطلبات (Prerequisites)

3–6 نقاط تكفي:
- …
- …
- …

## 4) التطبيق خطوة بخطوة (Step‑by‑step)

قاعدة سهلة: كل خطوة فيها (وش تسوي؟ + كيف تتأكد؟).

### 4.1) خطوة 1 — …

**وش تسوي؟** جملة واحدة.

**الخطوات:**
1. خطوة 1
2. خطوة 2
3. خطوة 3

**كيف أتأكد؟** اكتب علامة نجاح واضحة (مثال: "طلع ✅ في Actions").

> ملاحظة قصيرة (اختياري): اكتب "ليش" بسطر واحد.

### 4.2) خطوة 2 — مثال كود (Code block)

```bash
echo "hello"
git status
```

Inline code داخل السطر: `baseurl` و `draft: false`.

### 4.3) خطوة 3 — صورة

![وصف واضح للصورة: وش اللي نراه هنا؟](screenshot1.png)

### 4.4) خطوة 4 — قائمة فحص (اختياري)

- [ ] سويت كذا
- [ ] تأكدت من كذا
- [ ] شغّلته وطلع تمام ✅

<details>
<summary><strong>أمثلة جاهزة (افتح إذا تحتاج)</strong></summary>

### جدول

| العنصر | القيمة | ملاحظات |
|---|---|---|
| الخيار A | On | مناسب للمبتدئ |
| الخيار B | Off | خلّه لاحقًا |

### اقتباس

> الوضوح > المؤثرات 
> التعليم > الاستعراض

### Dropdown (معلومة متقدمة)

<details>
<summary><strong>اختياري: إعداد متقدم (افتح إذا تحتاجه)</strong></summary>

شرح بسيط جدًا داخل الدروب داون:

```toml
# مثال إعداد
key = "value"
```

</details>

### تنبيه (لا تسوي كذا)

اكتبها بصراحة:
- لا تسوي X لأن النتيجة Y.
- سو Z بدلها.

</details>

## 5) ليش الخيارات تفرق؟ (Why choices matter)

3 نقاط قصيرة تكفي:
- ليش اخترنا كذا؟
- وش بيخرب لو غيرته؟
- متى تغيّره؟

## 6) مشاكل شائعة وحلولها (Common issues)

### المشكلة 1: عنوان المشكلة
- **الأعراض**: وش تشوف؟
- **السبب**: غالبًا ليش؟
- **الحل السريع**:
 1) …
 2) …

### المشكلة 2: …

## 7) FAQ (أسئلة تتكرر)

### س: هل لازم أعرف برمجة؟
ج: لا… (سطرين بالكثير).

### س: هل أقدر أسويها بدون X؟
ج: نعم… (وضح خيارين).

### س: كم ياخذ النشر/التحديث؟
ج: …

## 8) الخلاصة (Conclusion)

اختصرها بنقاط:

- وش سوينا؟
- وش صار عندك الآن؟
- وش الخطوة التالية؟

CTA لطيف:
> إذا تبغى تكملة (موضوع 1 / موضوع 2)… اكتبها بالكومنت.

---

## إضافات (اختياري جدًا)

### A) أكواد متعددة لغات

```json
{ "name": "FahdLABs", "type": "blog" }
```

```yaml
key: value
list:
 - item
```

```toml
baseurl = "https://example.com/"
```

### B) Math (إذا تستخدمها)

Inline: \\( a^2 + b^2 = c^2 \\)

Block:

\\[
\\int_0^1 x^2 dx = \\frac{1}{3}
\\]

### C) Footnotes (إذا تحتاج)

جملة فيها مرجع[^1].

[^1]: اكتب المعلومة/المصدر هنا.

شرح AdGuard Home: مانع إعلانات لكل أجهزة البيت عبر DNS (Docker + Raspberry Pi)

Wed, 11 Feb 2026 10:00:00 +0300

هذا الدليل هو نسخة مكتوبة وموسعة من الفيديو:

إذا تبغى تحجب الإعلانات والتتبع من كل أجهزة البيت (جوال، كمبيوتر، تلفزيون)، الحل العملي هو DNS مركزي داخل الشبكة.

فكرة AdGuard Home باختصار

بدل ما كل جهاز يستخدم DNS عام مباشرة، نخلي طلبات DNS تمر عبر AdGuard Home داخل الشبكة المنزلية. وقتها:

دومينات الإعلانات تُحجب قبل التحميل.
يقل التتبع.
تقدر تحجب مواقع محددة على مستوى البيت كامل.

بمعنى أبسط: بدل ما كل جهاز يحاول يحجب الإعلانات بنفسه، تخلي الشبكة كلها تمر من فلتر واحد.

المتطلبات

جهاز يشغل Docker (Raspberry Pi أو جهاز قديم).
عنوان IP ثابت لهذا الجهاز.
وصول لإعدادات الراوتر.

الطريقة 1 (مثل الفيديو): التشغيل عبر Dockge

إذا عندك Dockge، أنشئ Stack جديد لـ AdGuard Home وشغّله.

متى تختار هذه الطريقة؟ إذا أنت أصلًا تدير خدماتك من Dockge وتبغى كل شيء في مكان واحد.

الطريقة 2: Docker Compose مباشر (بدون Dockge)

1) إنشاء المجلدات

1
2


mkdir -p ~/adguard/{work,conf}
cd ~/adguard

2) إنشاء ملف `docker-compose.yml`

1

nano docker-compose.yml

3) ألصق الإعداد التالي

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


services:
 adguardhome:
 image: adguard/adguardhome:latest
 container_name: adguardhome
 restart: unless-stopped
 environment:
 - TZ=Asia/Riyadh
 volumes:
 - ./work:/opt/adguardhome/work
 - ./conf:/opt/adguardhome/conf
 ports:
 - "3000:3000" # صفحة الإعداد أول مرة
 - "80:80" # لوحة التحكم بعد الإعداد
 - "53:53/tcp" # DNS TCP
 - "53:53/udp" # DNS UDP

4) تشغيل الخدمة

1

docker compose up -d

5) التأكد من التشغيل

1
2


docker ps
docker logs -f adguardhome

1) الإعداد الأول (Wizard)

افتح:

1

http://RASPBERRY_PI_IP:3000

ثم:

اختر اللغة.
أنشئ حساب الإدارة.
أكمل خطوات الإعداد الافتراضية.

بعد الانتهاء، لوحة التحكم تكون غالبًا على:

1

http://RASPBERRY_PI_IP

2) إعدادات DNS (المهم فعليًا)

من لوحة التحكم: الإعدادات → إعدادات DNS

a) خوادم DNS العليا (Upstream DNS)

القيم التي استخدمتها:

tls://dns.quad9.net
tls://unfiltered.joindns4.eu

ليش هذا مهم؟

هذه هي الخوادم التي يسألها AdGuard لما ما يلقى جواب محلي.
استخدام tls:// يعني DNS مشفّر (DoT)، فيحسن الخصوصية.

بعدها:

فعّل Parallel requests عشان أسرع استجابة.
أضف خوادم DNS احتياطية:
9.9.9.10
86.54.11.100
اضغط اختبار ثم تطبيق.

b) إعداد خادم DNS

معدل الطلبات (Rate limit): 100
تفعيل Enable DNSSEC

ليش؟

Rate limit يساعد ضد الإغراق أو الطلبات الغير طبيعية من جهاز خربان بالشبكة.
DNSSEC يتحقق من صحة ردود DNS (أمان أعلى).

c) الكاش (DNS Cache)

القيم المستخدمة:

Cache size = 10000000
Override minimum TTL = 3600
Override maximum TTL = 86400
تفعيل Optimistic caching

معنى هذه الخيارات باختصار:

Cache size: حجم الذاكرة المخصصة لتخزين ردود DNS، وكل ما كان مناسب يقل وقت الاستجابة.
Minimum TTL: أقل مدة يحتفظ فيها AdGuard بالرد داخل الكاش.
Maximum TTL: أعلى مدة مسموح بها للاحتفاظ بالرد داخل الكاش.
Optimistic caching: يرجع نتيجة سريعة من الكاش ويحدّثها بالخلفية.

3) إعدادات الفلاتر (Blocklists)

من لوحة التحكم: الفلاتر → قوائم حظر DNS

الخطوات:

أزل تحديد القائمة الافتراضية إذا كنت تريد الاعتماد على قوائمك.
اضغط إضافة قائمة حظر.
اختر من القوائم الجاهزة.
أضف القائمة التي استخدمتها: HaGeZi's Pro Blocklist.
اضغط تحقق من وجود تحديثات.

ملاحظة عملية: قائمتين جيدتين عادةً تكفي. كثرة القوائم قد تسبب حجب زائد أو بطء.

4) الإعدادات العامة (Logs + Statistics)

من لوحة التحكم: الإعدادات → الإعدادات العامة

a) تكوين السجلات (Logs retention)

اختر عدد الأيام التي تريد حفظ السجلات فيها (أنا اخترت 30 يوم).

وش تحفظ هذه؟

سجل الاستعلامات: أي جهاز سأل عن أي دومين ومتى.
يفيدك في تتبع المشاكل ومعرفة أكثر الدومينات المحجوبة.

كل ما زادت الأيام، يزيد استهلاك التخزين.

b) تكوين الإحصائيات (Statistics retention)

أنا اخترت 7 أيام بدل الافتراضي 24 ساعة.

وش تحفظ هذه؟

بيانات الرسوم البيانية في لوحة الإحصائيات.
عدد الطلبات، عدد المحجوب، وأكثر الدومينات نشاطًا خلال المدة المحددة.

إذا تبغى رؤية أسبوعية واضحة، 7 أيام خيار ممتاز.

أهم خطوة: ربط DNS في الراوتر

ادخل إعدادات الراوتر وضع DNS الرئيسي (وأحيانًا الثانوي) على IP جهاز AdGuard:

DNS1 = 192.168.100.55 (مثال)
DNS2 = 192.168.100.55 (إذا الراوتر يجبرك)

بعد الحفظ، انتظر دقيقة أو دقيقتين ثم اختبر.

اختبار قبل/بعد

افتح موقع كان يظهر إعلانات قبل.
حدّث الصفحة بعد تفعيل DNS في الراوتر.
ارجع لوحة AdGuard وتأكد من زيادة الطلبات المحجوبة.
افتح نفس الموقع الي كان يظهر إعلانات.

حجب مواقع معينة للبيت كامل

من الفلاتر: a) الخوادم المحجوبة مواقع جاهزة تقدر تحجبها بضغطة زر اغلب المواقع المعروفة موجودة هنا b) قواعد التصفية المخصصة أضف قواعد مخصصة دومين بدومين.

مثال قاعدة حجب:

1

||example.com^

صفحة الاحصائيات بعد اول استخدام

أخطاء شائعة وحلولها

1. ما صار أي حجب بعد التثبيت

غالبًا الأجهزة ما زالت تستخدم DNS قديم. الحل:

تأكد DNS الراوتر يشير إلى AdGuard.
افصل/أعد اتصال الشبكة على الأجهزة.

2. تعارض على بورت 53

يوجد خدمة ثانية تستخدم DNS على نفس السيرفر. الحل: أوقف الخدمة المتعارضة أو غيّر التصميم.

3. لوحة التحكم لا تفتح

تحقق من:

docker ps
المنفذ الصحيح (3000 للإعداد الأول، ثم 80 غالبًا للوحة).
جدار الحماية المحلي.

FAQ

هل لازم Raspberry Pi 5؟

لا، أي جهاز يشغل Adguard Home يكفي.

هل هذا يحجب كل الإعلانات 100%؟

لا، لكنه يقلل نسبة كبيرة جدًا من إعلانات DNS-based tracking والطلبات الإعلانية.

مهم: بعض التطبيقات تعرض إعلانات من نفس دومين الخدمة الرئيسية، ووقتها DNS blocking وحده قد لا يكفي.

هل أقدر أخليه يعمل على جهاز واحد فقط؟

نعم، ضع DNS يدوي لذلك الجهاز بدل تغييره على الراوتر.

المصادر الرسمية (للتحديثات)

AdGuard Home GitHub: https://github.com/AdguardTeam/AdGuardHome
AdGuard Home Docker Image: https://hub.docker.com/r/adguard/adguardhome
Docker Compose Documentation: https://docs.docker.com/compose/

الخلاصة

AdGuard Home يعطيك حماية وراحة أفضل لكل أجهزة البيت من نقطة مركزية واحدة. مع IP ثابت + DNS صحيح على الراوتر، النتيجة تكون واضحة جدًا من أول يوم.

شرح Dockge بالعربي: إدارة Docker Compose بسهولة على Raspberry Pi

Sat, 07 Feb 2026 10:00:00 +0300

هذا الدليل هو نسخة مكتوبة وموسعة من الفيديو:

إذا تستخدم Docker Compose وتبغى إدارة أسهل من التيرمنال، Dockge يعطيك لوحة بسيطة وسريعة بدون تعقيد.

ما هو Dockge؟

Dockge أداة مفتوحة المصدر لإدارة مشاريع docker-compose من واجهة ويب.

تقدر من خلالها:

إنشاء Stack جديد.
تشغيل/إيقاف/تحديث الخدمات.
تعديل compose.yaml مباشرة.
قراءة Logs من نفس الواجهة.

متى يكون Dockge مناسب لك؟

عندك سيرفر واحد أو بيئة منزلية صغيرة.
تستخدم docker-compose بشكل يومي.
تبغى واجهة بسيطة بدون تعقيد أدوات أكبر.

قبل التثبيت

Docker + Docker Compose يجب أن يكونا جاهزين.
يفضل أن يكون الراسبيري باي له IP ثابت.

إذا لم تجهّزها بعد:

1) إنشاء مجلد العمل

1
2


mkdir -p ~/dockge
cd ~/dockge

2) إنشاء ملف compose.yaml لـ Dockge

1

nano compose.yaml

ضع هذا المحتوى:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


services:
 dockge:
 image: louislam/dockge:latest
 container_name: dockge
 restart: unless-stopped
 ports:
 - "5001:5001"
 volumes:
 - /var/run/docker.sock:/var/run/docker.sock
 - ./data:/app/data
 - /full/path/to/folder/stacks:/full/path/to/folder/stacks
 environment:
 - DOCKGE_STACKS_DIR=/full/path/to/folder/stacks

ثم احفظ الملف من خلال الضغط على

ctrl+x
y
enter

ملاحظة مهمة:

لازم المسار الي فيه ال ستاكس يكون مسار كامل مسار الداتا عادي يكون نسبي

نسبي مثل: ./data
كامل مثل: /home/fahdlabs/dockge/stacks
ومسار الستاكس لازم اليمين يكون نفس اليسار
مسار DOCKGE_STACKS_DIR لازم يطابق المسار المربوط في volumes.

3) تجهيز المجلدات المطلوبة

1

mkdir -p data stacks

4) تشغيل Dockge

1

docker compose up -d

تحقق:

1

docker ps

5) فتح الواجهة وإنشاء حساب Admin

من المتصفح:

1

http://RASPBERRY_PI_IP:5001

أول دخول سيطلب إنشاء حساب مدير.

6) إنشاء أول Stack تجريبي (whoami)

من داخل Dockge:

اضغط + Compose.
سمّ الـ Stack: whoami.
ألصق ملف Compose التالي:

1
2
3
4
5
6
7


services:
 whoami:
 image: traefik/whoami
 container_name: whoami
 restart: unless-stopped
 ports:
 - "8080:80"

احفظ.
اضغط Start.

اختبر الخدمة:

1

http://RASPBERRY_PI_IP:8080

ليش whoami؟ لأنها خدمة اختبار خفيفة جدًا وتأكد بسرعة أن مسار Dockge كامل شغال من البداية للنهاية.

7) أهم المميزات العملية في Dockge

Logs: لمتابعة مشاكل التشغيل بسرعة.
Edit: تعديل Compose بدون الرجوع للتيرمنال.
Stop/Start/Restart: إدارة سريعة لكل Stack.
Update: سحب أحدث صورة وإعادة التشغيل.

هيكلة منظمة مقترحة لمشاريعك

داخل ~/dockge/stacks/ اجعل كل خدمة في مجلد مستقل:

دوكجي يسويها لك بهذا الشكل من نفسه

1
2
3
4
5
6
7


stacks/
 adguard/
 compose.yaml
 immich/
 compose.yaml
 uptime-kuma/
 compose.yaml

هذا يسهل النسخ الاحتياطي والمتابعة.

أخطاء شائعة وحلولها

1. `docker: permission denied`

أضف المستخدم لمجموعة docker:

1

sudo usermod -aG docker $USER

ثم أعد تسجيل الدخول.

2. `no such file or directory: compose.yaml`

شغّلت الأمر من مجلد غير صحيح. الحل: ادخل ~/dockge ثم أعد التنفيذ.

3. Stack لا يظهر في Dockge

تأكد أن:

قيمة DOCKGE_STACKS_DIR نفس المسار الكامل الذي اخترته للـ stacks.
مثال صحيح:

1
2
3
4


volumes:
 - /home/USERNAME/dockge/stacks:/home/USERNAME/dockge/stacks
environment:
 - DOCKGE_STACKS_DIR=/home/USERNAME/dockge/stacks

FAQ

هل Dockge بديل كامل لـ Portainer؟

ليس نفس الفلسفة. Dockge أخف ومركز على Docker Compose بشكل مباشر وبسيط.

قاعدة سريعة:

إذا تريد إدارة Compose بسرعة وبشكل واضح: Dockge ممتاز.
إذا تريد إدارة أوسع (Swarm/Features كثيرة): فكر لاحقًا بأدوات أكبر.

هل ينفع على سيرفر واحد منزلي؟

نعم، وهذه أفضل حالة استخدام له.

هل يدعم العربية؟

نعم، يوجد دعم واجهة عربي ويمكن تغييره من الإعدادات.

المصادر الرسمية (للتحديثات)

Dockge Official Website: https://dockge.kuma.pet/
Dockge GitHub: https://github.com/louislam/dockge
Docker Compose Documentation: https://docs.docker.com/compose/

الخلاصة

Dockge يعطيك طريقة سريعة ومرتبة لإدارة docker-compose في الهوم لاب. وهو تجهيز ممتاز قبل تشغيل خدمات مثل AdGuard Home.

تثبيت IP ثابت للراسبيري باي (Wi‑Fi + Ethernet) باستخدام NetworkManager

Tue, 03 Feb 2026 10:00:00 +0300

هذا الدليل هو نسخة مكتوبة وموسعة من الفيديو:

إذا كنت تشغل Docker أو أي خدمة منزلية، فأهم خطوة بعد الإعداد الأول هي تثبيت عنوان IP ثابت.

لماذا تحتاج Static IP؟

بدون IP ثابت، الراوتر ممكن يعطي جهازك IP جديد بعد إعادة تشغيل:

الراوتر نفسه.
الراسبيري باي.
أو بعد انتهاء مدة DHCP Lease.

هذا يسبب توقف الروابط، وفشل الوصول للخدمات، ومشاكل في التطبيقات المرتبطة بعنوان قديم.

نقطة مهمة قبل البدء

على Raspberry Pi OS 12 (Bookworm)، الأفضل استخدام NetworkManager بدل الطرق القديمة المعتمدة على dhcpcd.

السبب: كثير من الشروحات القديمة تعتمد ملفات لم تعد المسار الرسمي في Bookworm، وهذا يسبب لخبطة عند المبتدئين.

1) الدخول على الراسبيري باي عبر SSH

1

ssh USERNAME@CURRENT_IP

2) جمع معلومات الشبكة الحالية

شغّل:

1

nmcli device show

دوّن هذه القيم:

IP4.ADDRESS[1] (مثل 192.168.100.21/24)
IP4.GATEWAY (مثل 192.168.100.1)

ثم اعرف اسم الاتصال الفعّال (Wi-Fi أو Ethernet):

1

nmcli device status

3) فتح واجهة الإعداد النصية nmtui

1

sudo nmtui

ثم:

اختر Edit a connection.
اختر الاتصال المطلوب:

Wi-Fi لو كنت متصل لاسلكيًا.
Wired connection لو كنت عبر كيبل Ethernet.

عند IPv4 Configuration غيّرها من Automatic إلى Manual.
في Addresses ضع IP ثابت غير مستخدم، مثال:

192.168.100.55/24

في Gateway ضع عنوان الراوتر، مثال:

192.168.100.1

في DNS servers أضف DNS، مثال:

9.9.9.9
1.1.1.1

احفظ الإعدادات (OK).

نصيحة بسيطة: اختر IP ثابت خارج المجال الذي يستخدمه DHCP التلقائي في الراوتر إذا كنت تقدر تغيّره، لتقليل احتمال التعارض.

4) تطبيق الإعدادات وإعادة تشغيل NetworkManager

1

sudo systemctl restart NetworkManager

ملاحظة: جلسة SSH غالبًا ستنفصل مباشرة، وهذا طبيعي.

5) تسجيل الدخول بالـ IP الجديد

أعد الاتصال باستخدام العنوان الثابت الجديد:

1

ssh USERNAME@192.168.100.55

6) تأكيد أن الإعداد ثابت

تحقق:

1
2


ip a
nmcli device show

أعد تشغيل الجهاز للتأكد النهائي:

1

sudo reboot

وبعد الإقلاع تأكد أن نفس الـ IP ما تغيّر.

Wi‑Fi vs Ethernet: نفس الفكرة

الفرق فقط في الاتصال الذي تختاره داخل nmtui:

Wi-Fi: اختر اسم شبكة الواي فاي.
Ethernet: اختر الاتصال السلكي.

باقي الخطوات متطابقة.

أخطاء شائعة وحلولها

1. IP تعارض مع جهاز ثاني

الأعراض: انقطاع متكرر أو عدم وصول. الحل: اختر IP غير مستخدم من الراوتر (يفضل رقم بعيد مثل 50+).

2. كتبت Gateway أو Mask بشكل غلط

الأعراض: الجهاز متصل محليًا لكن بدون إنترنت. الحل: راجع القيم من nmcli device show قبل التعديل.

3. الرجوع للـ IP القديم بعد إعادة التشغيل

الأسباب المحتملة:

لم تحفظ الإعداد في nmtui بشكل صحيح.
أُجري التعديل على اتصال غير فعّال.

الحل: كرر الخطوات وتأكد من اسم الاتصال في nmcli device status.

FAQ

هل أحتاج DNS يدوي؟

ليس إلزاميًا، لكن مفيد لتحسين الاستقرار والتحكم (خصوصًا عند تشغيل AdGuard Home لاحقًا).

هل Static IP أفضل من DHCP Reservation في الراوتر؟

الاثنان جيدان:

Static IP على الجهاز: واضح وسهل تتبعه داخل نفس السيرفر.
DHCP Reservation في الراوتر: إدارة مركزية من مكان واحد.

ملاحظة: لو راوترك يدعم DHCP Reservation بشكل واضح فهذا خيار ممتاز. إذا ما يدعم أو واجهته محدودة، التثبيت من داخل Raspberry Pi هو الحل الأبسط.

إذا كنت في بداية الهوم لاب، ابدأ بطريقة واحدة فقط والتزم بها حتى لا تتداخل الإعدادات.

هل هذه الخطوات تنفع مع Pi-hole أو AdGuard؟

نعم، بل تعتبر خطوة أساسية قبل تشغيل أي DNS server منزلي.

المصادر الرسمية (للتحديثات)

NetworkManager nmcli: https://networkmanager.pages.freedesktop.org/NetworkManager/NetworkManager/nmcli.html
NetworkManager nmtui: https://networkmanager.pages.freedesktop.org/NetworkManager/NetworkManager/nmtui.html

الخلاصة

بعد تثبيت Static IP، يصبح سيرفرك ثابتًا ويمكن الاعتماد عليه للخدمات القادمة مثل Dockge وAdGuard Home بدون مشاكل تغيّر العنوان.

إعداد Raspberry Pi 5 من الصفر: تثبيت النظام + SSH + Docker خطوة بخطوة

Sat, 31 Jan 2026 10:00:00 +0300

هذا الدليل هو نسخة مكتوبة وموسعة من الفيديو:

إذا هدفك تحوّل الراسبيري باي إلى سيرفر منزلي (Homelab)، فهذا هو المسار الصحيح للبداية.

لماذا اخترنا Raspberry Pi OS Lite بدل Desktop؟

لأننا نبني سيرفر وليس جهاز استخدام يومي بواجهة رسومية.
نسخة Lite تستهلك RAM أقل، وهذا يعطي موارد أكثر للخدمات مثل Docker.
التحديثات غالبًا أخف وأسرع.
إدارة السيرفر عبر SSH تكفي في أغلب سيناريوهات Homelab.

ماذا ستتعلم في هذا الشرح؟

تفليش نظام Raspberry Pi OS Lite بالطريقة الصحيحة.
تجهيز الإعدادات قبل التشغيل الأول (Wi-Fi + Username + SSH).
الدخول على الجهاز عبر SSH.
تحديث النظام بدون أخطاء شائعة.
تثبيت Docker وDocker Compose وتشغيل أول حاوية للتأكد أن كل شيء يعمل.

المتطلبات

Raspberry Pi 5 (وأي موديل حديث غالبًا يمشي بنفس الخطوات).
بطاقة microSD جيدة.
قارئ بطاقة على الكمبيوتر.
إنترنت.
راوتر منزلي.

1) تنزيل Raspberry Pi Imager وتثبيت النظام

ادخل موقع Raspberry Pi الرسمي وحمّل Raspberry Pi Imager.
افتح البرنامج واختر:

Choose Device: اختر جهازك (مثل Raspberry Pi 5).
Choose OS: اختر Raspberry Pi OS (other) ثم Raspberry Pi OS Lite (64-bit).
Choose Storage: اختر بطاقة الذاكرة الصحيحة.

نسخة Lite مناسبة للسيرفر لأنها أخف من نسخة سطح المكتب.

2) الإعدادات المهمة قبل التفليش (OS Customization)

قبل ما تضغط Write، فعّل هذه الخيارات:

Hostname: مثل fahdlabs.

ملاحظة الهوست نيم تقدر تستخدمه لما تدخل على الباي عن طريق هذا العنوان بدال الايبي: HOSTNAME.local بس تضيف على الاسم الي اخترته “.local”

Username/Password: حساب الدخول.
Configure wireless LAN: إذا كنت تستخدم Wi-Fi.
Set locale settings: المنطقة الزمنية ولوحة المفاتيح.
Enable SSH: واختر Use password authentication.

هذه الخطوة تختصر عليك توصيل شاشة/كيبورد للراسبيري.

3) الإقلاع الأول ومعرفة IP الجهاز

افصل البطاقة من الكمبيوتر.
ركبها في Raspberry Pi وشغّل الجهاز.
انتظر من دقيقة إلى 5 دقائق.
ادخل صفحة الراوتر وابحث عن الجهاز في DHCP clients أو DHCP leases.
انسخ عنوان الـ IP.

4) الدخول عبر SSH

من التيرمنال في جهازك:

1

ssh USERNAME@IP_ADDRESS

مثال:

1

ssh fahad@192.168.1.21

أول مرة سيطلب تأكيد البصمة الأمنية، اكتب:

1

yes

ثم أدخل كلمة المرور.

لو كان hostname.local يعمل عندك، تستطيع الدخول أيضًا بهذه الطريقة:

1

ssh USERNAME@HOSTNAME.local

5) تحديث النظام

بعد تسجيل الدخول:

1
2


sudo apt update
sudo apt upgrade -y

هذه خطوة أساسية قبل تثبيت أي خدمة.

6) تثبيت Docker + Docker Compose

رابط شرح التثبيت من موقع دوكر الرسمي. حسب الطريقة الرسمية على Debian/Raspberry Pi OS:

1
2


curl -fsSL https://get.docker.com | sh
sudo usermod -aG docker $USER

بعدها سجّل خروج وادخل مرة ثانية (أو أعد تشغيل الجلسة) لتفعيل صلاحيات مجموعة docker بدون sudo.

تحقق أن Docker يعمل:

1

docker ps

7) اختبار سريع: تشغيل أول حاوية

1

docker run --rm hello-world

إذا ظهرت رسالة النجاح، فـ Docker شغال بشكل صحيح.

الأخطاء الشائعة وحلولها

1. `Permission denied while trying to connect to the Docker daemon`

المشكلة: المستخدم ليس ضمن مجموعة Docker أو لم تُحدّث الجلسة. الحل:

1

sudo usermod -aG docker $USER

ثم أعد تسجيل الدخول.

2. ما أقدر أدخل SSH

تأكد من:

تفعيل SSH في إعدادات Imager.
نفس شبكة الراوتر.
IP صحيح من صفحة الراوتر.

3. الجهاز يعطي IP مختلف بعد كل إعادة تشغيل

هذا طبيعي مع DHCP. الحل الكامل هنا:

شرح تثبيت IP ثابت على Raspberry Pi

FAQ (أسئلة شائعة)

هل لازم Raspberry Pi 5؟

لا. غالبًا نفس الخطوات تمشي على Pi 4 وPi 3 (مع اختلاف الأداء).

هل أستخدم نسخة Desktop أو Lite؟

إذا هدفك سيرفر، استخدم Lite لأنها أخف وأفضل للخدمات.

هل أقدر أبدأ مباشرة بـ Docker مشاريع؟

نعم، وبعدها تقدر تستخدم Dockge لتسهيل إدارة docker-compose:

شرح Dockge كامل

المصادر الرسمية (للتحديثات)

Raspberry Pi Imager: https://www.raspberrypi.com/software/
Raspberry Pi Documentation (Remote Access / SSH): https://www.raspberrypi.com/documentation/computers/remote-access.html
Docker Engine on Debian: https://docs.docker.com/engine/install/debian/
Docker Linux Post-installation: https://docs.docker.com/engine/install/linux-postinstall/

الخلاصة

بهذه الخطوات صار عندك Raspberry Pi جاهز كسيرفر أساسي: دخول عن بعد + نظام محدث + Docker يعمل. هذا الأساس الذي تبني عليه باقي السلسلة.

Posts on FahdLABs | مختّبر فهد

كيف توثق إيميلك الشخصي مجاناً وتحصل على علامة التوثيق (الصح) ✔️

🎥 الشرح بالفيديو (للي يفضلون الشرح العملي)

🛠️ الخطوة 1: إنشاء حساب في موقع الشهادة (Actalis)

🎁 الخطوة 2: طلب الشهادة المجانية وتفعيلها

📥 الخطوة 3: تحميل الشهادة وحفظ الباسورد (مهم جداً)

💻 الخطوة 4: التثبيت على الكمبيوتر (ويندوز - برنامج Outlook)

📱 الخطوة 5: التثبيت على الآيفون (تطبيق Mail الرسمي)

✨ النتيجة النهائية: إيميلك الآن احترافي وموثق!

دليل المبتدئين جدًا: سوّ مدونة عربية بـ Hugo Stack خطوة بخطوة (GitHub Pages)

1) المقدمة (المشكلة/الهدف)

2) الفيديو

3) المتطلبات (Prerequisites)

4) التطبيق خطوة بخطوة (لا تنط)

4.1) انسخ القالب لحسابك (أول خطوة)

4.2) فعّل النشر التلقائي (مرة واحدة فقط)

4.3) عدّل الملفات من GitHub Web UI (بدون تيرمنال)

4.4) كيف تشوف التغيير بعد التعديل؟

4.5) عرب الموقع بالكامل + RTL + baseurl (أهم خطوة)

4.5.1) عدّل رابط الموقع + اسم الموقع

4.5.2) خلي اتجاه الموقع عربي (RTL)

4.5.3) عدّل نص البروفايل (تحت الصورة) + الفوتر (اخر شي تحت بالصفحة)

4.6) عدّل صفحات القائمة (الرئيسية/الأرشيف/البحث/الروابط)

الرئيسية

الأرشيف

البحث

الروابط (صفحة روابطك)

4.7) أضف حسابات السوشيال تحت الصورة

4.8) كيف ترفع صورك من جهازك إلى GitHub

4.9) احذف أو اخفِ المقالات الافتراضية

4.10) اكتب أول مقال (من GitHub Web UI)

4.10.1) أنشئ المقال

4.10.2) بطاقة المقال (Front Matter)

4.10.3) (اختياري) صورة غلاف

4.11) اعمل Commit للتعديلات (بدون Git أو Terminal)

5) ليش بعض الخيارات تفرق؟ (مختصر مفيد)

6) مشاكل شائعة وحلولها

الموقع يطلع أبيض أو المسارات خربانة

الصور ما تظهر + خطأ Height

الأيقونات ما تظهر

التعديلات ما تبان في المعاينة

7) FAQ (أسئلة تتكرر)

هل لازم أعرف برمجة؟

هل لازم أثبّت Hugo على جهازي؟

كم ياخذ النشر على GitHub Pages؟

هل أقدر أخلي الموقع عربي RTL بالكامل؟

8) الخلاصة

9) خيارات إضافية (اختياري) — للي يبغى تحكم أكثر

وش تحتاج؟

كيف تشغله؟

شغّل المعاينة المحلية

عدّل وجرّب

ارفع التعديلات لـ GitHub

متى تستخدم Codespaces؟

قالب مقال بسيط بدون صور — مناسب للمبتدئ جدًا (Hugo Stack)

قالب مقال مع صور — مناسب للمبتدئ جدًا (Hugo Stack)

شرح AdGuard Home: مانع إعلانات لكل أجهزة البيت عبر DNS (Docker + Raspberry Pi)

فكرة AdGuard Home باختصار

المتطلبات

الطريقة 1 (مثل الفيديو): التشغيل عبر Dockge

الطريقة 2: Docker Compose مباشر (بدون Dockge)

1) إنشاء المجلدات

2) إنشاء ملف docker-compose.yml

3) ألصق الإعداد التالي

4) تشغيل الخدمة

5) التأكد من التشغيل

1) الإعداد الأول (Wizard)

2) إعدادات DNS (المهم فعليًا)

a) خوادم DNS العليا (Upstream DNS)

b) إعداد خادم DNS

c) الكاش (DNS Cache)

3) إعدادات الفلاتر (Blocklists)

4) الإعدادات العامة (Logs + Statistics)

a) تكوين السجلات (Logs retention)

b) تكوين الإحصائيات (Statistics retention)

أهم خطوة: ربط DNS في الراوتر

اختبار قبل/بعد

حجب مواقع معينة للبيت كامل

صفحة الاحصائيات بعد اول استخدام

أخطاء شائعة وحلولها

4.5) عرب الموقع بالكامل + RTL + `baseurl` (أهم خطوة)

الصور ما تظهر + خطأ `Height`

2) إنشاء ملف `docker-compose.yml`

1. `docker: permission denied`

2. `no such file or directory: compose.yaml`

1. `Permission denied while trying to connect to the Docker daemon`