مقدمة
بعد إنشاء موقع باستخدام أدوات الذكاء الاصطناعي مثل ChatGPT أو Canva أو Gemini Canvas أو Claude Artifacts أو Sider Web Creator، فإن السؤال الكبير التالي هو كيفية التعامل مع استضافة الويب على صفحات GitHub بحيث يمكنك زيارة الموقع من خلال النطاق الخاص بك. يرشدك هذا الدليل خطوة بخطوة خلال الرحلة - من تصدير مشروع في Sider Web Creator إلى الحصول على موقع ويب كامل تحت نطاقك الشخصي - مع تبسيط كل من استضافة الويب وتكوين صفحات GitHub على طول الطريق.
🎯 ما ستتعلمه
كيفية تنزيل وفهم ملفات المشروع التي تم إنشاؤها بواسطة الذكاء الاصطناعي بشكل صحيح قبل اختيار سير عمل استضافة الويب لصفحات GitHub.
تعليمات خطوة بخطوة لنشر الموقع مجانًا على صفحات GitHub.
كيفية شراء وربط النطاق المخصص الخاص بك داخل إعدادات صفحات GitHub وتوصيله بسجلات DNS بأفضل الممارسات.
نصائح احترافية لجعل الموقع يبدو احترافيًا وجديرًا بالثقة تمامًا بمجرد أن يصبح إعداد صفحات GitHub مباشرًا.
تتوقع معظم منصات الاستضافة الثابتة - بما في ذلك صفحات GitHub - مجلد بناء نظيف، لذلك تحتاج أولاً إلى جمع ملفاتك.
1.1 تنزيل ملفات المشروع
بعد أن ينتهي Web Creator من إنشاء الموقع، انقر فوق الزر تنزيل في الزاوية العلوية اليمنى.
انتظر بينما يقوم النظام بتعبئة مشروعك.
ستتلقى ملف .zip جاهزًا للتحميل على صفحات GitHub.
استخرج ملف zip في أي مكان على جهاز الكمبيوتر الخاص بك.
1.2 فهم هيكل الملف (هام!)
my‑website/
├── dist/ ⭐ بناء الإنتاج لـ **صفحات GitHub**
│ ├── index.html → الصفحة الرئيسية
│ ├── assets/ → الأنماط والبرامج النصية
│ └── …
├── src/ 📝 مجلد التعليمات البرمجية المصدر
├── package.json 📦 تكوين المشروع
└── …ملفات أخرى
تذكير أساسي: يتم نشر محتويات dist/ فقط على صفحات GitHub.
1.3 اختبار المعاينة المحلية
أدخل مجلد dist/.
انقر نقرًا مزدوجًا فوق index.html.
يفتح الموقع في متصفحك.
تحقق من أن كل شيء يعمل قبل الدفع إلى صفحات GitHub.
🚀 الخطوة 2: اختيار نظام أساسي للنشر
في حين أن صفحات GitHub هي بطل هذا الدليل، إليك مقارنة سريعة:
| |
|---|
🌟 صفحات GitHub (محور هذا الدليل) | مجاني تمامًا • النشر بالسحب والإفلات أو git push • HTTPS مجاني • CDN عالمي • نطاقات مخصصة • CI أصلي مع GitHub Actions |
| شبكة حافة عالمية • مجاني 100٪ • سريع للغاية |
| واجهة مستخدم مصقولة • غني بالميزات |
📤 الخطوة 3: النشر على صفحات GitHub (دليل مفصل)
على الرغم من أن صفحات GitHub موجودة داخل نظام أساسي للمطورين، إلا أنها تعتبر استضافة ويب فائقة الحداثة مع سهولة الضغط على الأزرار.
3.1 الاشتراك وإنشاء مستودع
تفضل بزيارة github.com وقم بتسجيل الدخول.
انقر فوق + مستودع جديد.
أطلق عليه اسم my‑website واختر عام (أو خاص إذا كان لديك خطة مدفوعة؛ تدعم صفحات GitHub الآن المستودعات الخاصة).
اترك التهيئة باستخدام README غير محدد إذا كنت تخطط للدفع لاحقًا.
3.2 إضافة ملفات موقعك
الطريقة أ: تحميل السحب والإفلات (الأفضل للمبتدئين)
في علامة التبويب التعليمات البرمجية الخاصة بالمستودع، انقر فوق إضافة ملف ← تحميل ملفات.
قم بإسقاط كل شيء داخل dist/.
قم بالتمرير لأسفل وانقر فوق Commit changes.
الطريقة ب: Git CLI (الأفضل للمطورين)
# استنساخ المستودع الفارغ
git clone https://github.com/<user>/my‑website.git
cd my‑website
# نسخ إخراج البناء
cp -r /path/to/dist/* .
# الالتزام والدفع
git add .
git commit -m "نشر **صفحات GitHub** الأولي"
git push origin main
يتركك أي من المسارين بملفات ثابتة في جذر المستودع - وهو أمر مثالي لـ صفحات GitHub.
3.3 تمكين صفحات GitHub
انتقل إلى الإعدادات ← الصفحات.
ضمن المصدر، اختر النشر من فرع ← main (/root).
انقر فوق حفظ. تقوم صفحات GitHub بالبناء في ~ 30 ثانية وتعيد عنوان URL مثل https://<user>.github.io/my‑website/.
3.4 احصل على عنوان URL الافتراضي الخاص بك
قم بزيارة الرابط للتأكد من تحميل كل شيء. يتم تقديم صفحات GitHub تلقائيًا عبر CDN عالمي.
🌐 الخطوة 4: شراء وربط النطاق الخاص بك
4.1 شراء نطاق
المسجلون المقترحون (جميعهم يعملون بشكل جيد مع صفحات GitHub): Namecheap و GoDaddy و Alibaba Cloud و Tencent Cloud. اختر .com قصيرًا حيثما أمكن ذلك.
4.2 إضافة النطاق في صفحات GitHub
لا تزال في الإعدادات ← الصفحات، ابحث عن نطاق مخصص.
أدخل mywebsite.com أو www.mywebsite.com.
انقر فوق حفظ. تكتب صفحات GitHub ملف CNAME تلقائيًا.
4.3 تكوين سجلات DNS
| | |
|---|
| | 185.199.108.153، 185.199.109.153، 185.199.110.153، 185.199.111.153
|
| | |
انتظر من 10 دقائق إلى 24 ساعة للنشر. عناوين IP هذه ثابتة لصفحات GitHub. |
4.4 فرض HTTPS
بعد نشر DNS، قم بتحديث إعدادات الصفحات وقم بتبديل فرض HTTPS. يتم إصدار شهادات Let’s Encrypt تلقائيًا.
✨ الخطوة 5: اجعل الموقع يبدو احترافيًا
5.1 إضافة رمز مفضل مخصص
قم بإعداد رمز 32 × 32 بكسل باسم favicon.ico.
ضعه في جذر المستودع.
قم بالالتزام والدفع؛ تقدمه صفحات GitHub على الفور.
5.2 إدراج معلومات التعريف المخصصة
قم بتحرير index.html في جذر المستودع:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 التحليلات (اختياري)
الصق مقتطفات GA / Plausible داخل <head>؛ تحترم صفحات GitHub رؤوس التخزين المؤقت.
🔧 استكشاف الأخطاء وإصلاحها
صفحة فارغة؟ تأكد من أن index.html موجود في جذر المستودع وأن مسارات الأصول نسبية.
حلقات النطاق إلى .github.io؟ تحقق جيدًا من سجلات A/CNAME وانتظر TTL كامل.
تم تعطيل تبديل HTTPS؟ DNS غير صحيح حتى الآن؛ تحقق مع dig.
🎉 ملخص
تهانينا! لديك الآن:
✅ تم تنزيل موقع الويب الذي تم إنشاؤه بواسطة الذكاء الاصطناعي بنجاح وجاهزًا لاستضافة صفحات GitHub.
✅ نشره مجانًا على صفحات GitHub.
✅ تأمين النطاق المخصص الخاص بك.
✅ صقل بيئة صفحات GitHub لتبدو احترافية تمامًا.
موقعك الآن:
🌐 متصل بالإنترنت على مدار الساعة طوال أيام الأسبوع، مدعومًا بشبكة CDN لصفحات GitHub.
🏷️ يتم تقديمه ضمن نطاق احترافي.
🔒 محمي بتشفير HTTPS.
⚡ سريع عالميًا بفضل عقد حافة صفحات GitHub.
🗝️ مملوك بالكامل ويخضع لسيطرتك.
💡 الخطوات التالية
تحسين محركات البحث (SEO): أضف كلمات رئيسية مستهدفة وأوصاف تعريفية لتعزيز تصنيفات البحث لإعداد صفحات GitHub الخاص بك.
المشاركة الاجتماعية: دمج أزرار المشاركة للمنصات الرئيسية.
التحديثات المستمرة: قم بتثبيت التغييرات بانتظام؛ تقوم صفحات GitHub بإعادة النشر تلقائيًا.
النسخ الاحتياطية: قم بتمكين حماية مستودع GitHub أو عكس المستودع.
أنت الآن مالك موقع ويب حقيقي - شارك رابط صفحات GitHub الخاص بك وأظهر إبداعك للعالم!
