إذا كنت تملك موقعًا إلكترونيًا مبنيًا باستخدام HTML وCSS وJavaScript أو باستخدام إطار عمل مثل React وVite، فيمكنك نشره بسهولة على منصة Cloudflare Pages وربطه باسم نطاقك الخاص.
تتميز Cloudflare Pages بسهولة النشر، والربط مع GitHub، وإمكانية إنشاء نسخة جديدة من الموقع تلقائيًا عند تحديث الملفات ورفعها إلى المستودع.
في هذا الدليل سنشرح العملية خطوة بخطوة، من رفع المشروع إلى GitHub، ثم ربطه بـ Cloudflare Pages، وأخيرًا إضافة النطاق الخاص بك.
«ملاحظة: واجهة Cloudflare قد تتغير من وقت لآخر، لذلك قد تختلف أسماء بعض الأزرار أو أماكنها قليلًا عن الصور الموجودة في هذا الدليل.»
---
ما هي Cloudflare Pages؟
Cloudflare Pages هي خدمة من Cloudflare مخصصة لنشر مواقع الويب والتطبيقات، وتدعم المشاريع الثابتة بالإضافة إلى العديد من أطر العمل الحديثة.
يمكنك نشر مشروعك عن طريق:
- GitHub
- GitLab
- رفع الملفات مباشرة
- أدوات سطر الأوامر
وعند استخدام GitHub أو GitLab، يمكن لـ Cloudflare تنفيذ عملية البناء والنشر تلقائيًا عند تحديث المشروع.
---
المتطلبات قبل البدء
قبل البدء، تحتاج إلى:
1. حساب على Cloudflare.
2. حساب على GitHub أو GitLab إذا كنت ستستخدم النشر عن طريق Git.
3. مشروع موقع جاهز.
4. معرفة مجلد الملفات الناتجة عن عملية Build إذا كان المشروع يستخدم React أو Vite.
5. اسم نطاق Domain إذا كنت تريد استخدام نطاق خاص بدلًا من نطاق Cloudflare.
---
الخطوة الأولى: رفع المشروع إلى GitHub
إذا كان مشروعك موجودًا على جهازك، فمن الأفضل وضعه داخل مستودع GitHub.
أنشئ Repository جديدًا على GitHub، ثم ارفع ملفات المشروع إليه.
يجب أن يحتوي المستودع على ملفات المشروع الأساسية.
بالنسبة إلى مشروع React/Vite، ستجد عادةً ملفات مثل:
project/
├── src/
├── public/
├── package.json
├── package-lock.json
├── vite.config.js
└── index.html
إذا كان المشروع موجودًا بالفعل على GitHub، يمكنك الانتقال مباشرة إلى الخطوة التالية.
---
الخطوة الثانية: الدخول إلى Cloudflare
ادخل إلى حسابك في Cloudflare، ثم انتقل إلى قسم:
Workers & Pages
ومن هناك اختر إنشاء مشروع جديد.
حسب واجهة Cloudflare الحالية، ستجد خيارات مختلفة لإنشاء ونشر المشروع.
اختر:
Pages
ثم اختر طريقة النشر المناسبة لك.
إذا كان المشروع موجودًا على GitHub، اختر:
Import an existing Git repository
Cloudflare تدعم ربط مشاريع Pages مع GitHub وGitLab، ويمكنها تنفيذ عمليات Build وDeploy تلقائيًا عند تحديث المستودع.
---
الخطوة الثالثة: ربط GitHub مع Cloudflare
إذا كانت هذه أول مرة تستخدم فيها GitHub مع Cloudflare، سيطلب منك Cloudflare السماح له بالوصول إلى حساب GitHub.
وافق على الربط، ثم اختر Repository الذي يحتوي على موقعك.
بعد اختيار المستودع، ستنتقل إلى صفحة إعدادات البناء والنشر.
---
الخطوة الرابعة: إعداد Build للمشروع
هذه من أهم مراحل العملية.
يجب تحديد:
- Production branch
- Build command
- Build output directory
بالنسبة إلى مشروع React + Vite، الإعداد المعتاد هو:
الإعداد| القيمة
Production branch| "main"
Build command| "npm run build"
Build output directory| "dist"
يقوم الأمر:
npm run build
ببناء النسخة النهائية من الموقع.
بعد نجاح عملية البناء، تكون الملفات الجاهزة للنشر داخل مجلد:
dist
وهذا هو المجلد الذي يجب أن تحدده Cloudflare Pages كمجلد إخراج.
أما المواقع HTML الثابتة، فقد تختلف الإعدادات حسب بنية المشروع ومكان وجود ملفات الموقع.
---
الخطوة الخامسة: نشر الموقع
بعد التأكد من إعدادات Build، اضغط على:
Save and Deploy
ستبدأ Cloudflare في تنفيذ عدة مراحل:
1. تحميل المشروع.
2. تثبيت Dependencies.
3. تنفيذ أمر Build.
4. إنشاء الملفات النهائية.
5. نشر الموقع على شبكة Cloudflare.
إذا نجحت العملية، ستظهر لك نتيجة Deployment ناجحة.
وسيحصل المشروع على عنوان مؤقت يشبه:
your-project.pages.dev
افتح الرابط في المتصفح للتأكد من أن الموقع يعمل.
---
الخطوة السادسة: التأكد من نجاح الموقع
بعد النشر، لا تكتفِ بظهور الصفحة الرئيسية.
اختبر الموقع كاملًا.
تحقق من:
- الصفحة الرئيسية.
- صفحات الموقع الداخلية.
- الصور.
- ملفات CSS.
- ملفات JavaScript.
- الروابط الداخلية.
- النماذج.
- الخطوط.
- أي API مستخدم داخل الموقع.
إذا كان الموقع React/Vite، اختبر أيضًا التنقل بين الصفحات والتحديث المباشر للروابط.
---
الخطوة السابعة: إضافة النطاق الخاص بك
إذا كنت لا تريد استخدام:
your-project.pages.dev
وكنت تملك نطاقًا مثل:
example.com
يمكنك ربطه بمشروع Cloudflare Pages.
من داخل مشروع Pages انتقل إلى:
Custom domains
ثم اختر:
Set up a domain
أدخل اسم النطاق الذي تريد استخدامه.
---
ربط النطاق الرئيسي
إذا كنت تريد استخدام نطاق رئيسي مثل:
example.com
فإن النطاق يجب أن يكون مضافًا إلى Cloudflare كـ Zone، ويجب إعداد Nameservers الخاصة بالنطاق لاستخدام Cloudflare.
بعد نجاح إعداد النطاق، تستطيع Cloudflare إدارة DNS وربط النطاق بمشروع Pages.
---
ربط نطاق فرعي
يمكنك أيضًا استخدام نطاق فرعي، مثل:
www.example.com
أو:
app.example.com
أو:
tools.example.com
في هذه الحالة يمكن استخدام سجل CNAME يشير إلى نطاق Pages الخاص بالمشروع.
مثال:
Type: CNAME
Name: tools
Target: your-project.pages.dev
لكن من المهم إضافة النطاق أولًا من داخل إعدادات Custom domains في مشروع Pages، وليس الاكتفاء بإنشاء سجل DNS يدويًا.
---
الخطوة الثامنة: انتظار تفعيل النطاق
بعد إعداد النطاق، تحتاج Cloudflare إلى التحقق من إعدادات DNS وإصدار شهادة SSL.
بعد اكتمال العملية، يمكنك الوصول إلى موقعك باستخدام:
https://example.com
وسيعمل الموقع باستخدام اتصال HTTPS.
---
ماذا يحدث عند تعديل الموقع؟
هذه إحدى أهم مزايا ربط Cloudflare Pages مع GitHub.
إذا عدلت المشروع ثم رفعت التعديلات إلى GitHub، تستطيع Cloudflare اكتشاف التغيير وتشغيل عملية Build وDeployment جديدة تلقائيًا.
مثال:
git add .
git commit -m "Update website"
git push
بعد وصول التحديث إلى الفرع المرتبط بالإنتاج، تبدأ Cloudflare في إنشاء Deployment جديد.
وبذلك لا تحتاج إلى رفع ملفات الموقع يدويًا في كل مرة.
---
ماذا لو فشل Deployment؟
إذا ظهر أن عملية النشر فشلت، لا تحاول تغيير الإعدادات عشوائيًا.
افتح سجل الـ Deployment وابحث عن الخطأ.
من أكثر الأسباب شيوعًا:
1. خطأ في Build Command
مثل استخدام:
npm run build
بينما المشروع لا يحتوي على Script باسم "build".
افتح ملف:
package.json
وتأكد من وجود:
"scripts": {
"build": "vite build"
}
---
2. تحديد مجلد إخراج خاطئ
في React/Vite يكون المجلد المعتاد:
dist
إذا كان مشروعك يستخدم إطارًا مختلفًا، فقد يكون مجلد الإخراج مختلفًا.
---
3. مشكلة في Dependencies
قد يفشل Build بسبب مكتبة ناقصة أو إصدار غير متوافق.
في هذه الحالة راجع سجل Build وابحث عن أول رسالة Error حقيقية، وليس آخر سطر فقط.
---
4. متغيرات البيئة Environment Variables
إذا كان مشروعك يستخدم مفاتيح أو متغيرات بيئية أثناء عملية البناء، يجب إضافتها إلى إعدادات المشروع في Cloudflare.
مثال:
VITE_API_URL
VITE_FIREBASE_API_KEY
ولا تضع المفاتيح السرية مباشرة داخل الكود إذا كانت يجب أن تبقى سرية.
---
ميزة Preview Deployments
عند استخدام Git integration، تستطيع Cloudflare إنشاء نسخ تجريبية من فروع المشروع.
وهذا مفيد جدًا إذا كنت تريد تجربة تغيير جديد قبل وضعه في النسخة الأساسية من الموقع.
مثلًا:
main
للنسخة الرسمية.
و:
development
للتجارب.
وبذلك تستطيع اختبار التغييرات قبل دمجها في النسخة النهائية.
---
هل Cloudflare Pages مناسبة لكل المواقع؟
Cloudflare Pages مناسبة جدًا للمواقع والتطبيقات التي تعتمد على الملفات الثابتة أو عمليات Build، مثل:
- HTML
- CSS
- JavaScript
- React
- Vite
- Vue
- Astro
- Gatsby
- وغيرها
أما التطبيقات التي تحتاج إلى Backend معقد أو عمليات Server-side متقدمة، فقد تكون خدمات Cloudflare Workers هي الخيار الأنسب حسب طبيعة المشروع.
---
نصائح مهمة قبل نشر موقعك
قبل اعتبار الموقع جاهزًا، قم بهذه المراجعة:
SEO
تأكد من وجود:
<title>
<meta name="description">
<link rel="canonical">
sitemap.xml
robots.txt
وتحقق من البيانات المنظمة Schema إذا كان الموقع يستخدمها.
الأداء
اختبر الموقع باستخدام أدوات قياس الأداء، وخصوصًا:
- Largest Contentful Paint
- First Contentful Paint
- Total Blocking Time
- Core Web Vitals
الهاتف
افتح الموقع من هاتف وتأكد من أن:
- القائمة تعمل.
- النصوص واضحة.
- الصور لا تتجاوز الشاشة.
- الأزرار سهلة الاستخدام.
- صفحات الموقع الداخلية تعمل.
HTTPS
تأكد من أن الموقع يعمل باستخدام:
https://
وليس فقط:
http://
---
الخلاصة
رفع موقع على Cloudflare Pages أصبح عملية بسيطة، خصوصًا عند ربط المشروع بـ GitHub.
الطريقة الأساسية هي:
GitHub → Cloudflare Pages → Build → Deploy → Custom Domain
وبالنسبة لمشروع React + Vite، يكون الإعداد المعتاد:
Build command:
npm run build
Build output directory:
dist
وبعد نجاح النشر يمكنك ربط نطاقك الخاص من خلال:
Workers & Pages → مشروعك → Custom domains
كما أن ربط GitHub يسمح بتحديث الموقع تلقائيًا عند دفع تعديلات جديدة إلى المستودع.
«تنبيه: إعدادات Cloudflare تختلف حسب نوع المشروع وطريقة بناء الموقع، لذلك لا تستخدم إعدادات "React/Vite" تلقائيًا لموقع مبني بتقنية مختلفة.»
التعليقات
تعليقات
إرسال تعليق