مقدمة
Hashnode هي منصة نشر محتوى مجانية ومجتمع مطورين مصمم لإبقاء عشاق التكنولوجيا متفاعلين. توفر مساحة للمستخدمين لإنشاء ومشاركة منشورات المدونات وبناء مجتمع متخصص في مختلف مجالات التكنولوجيا. تهدف HashNode إلى تبسيط إنشاء وصيانة مدونة تقنية سهلة الاستخدام للمطورين ومُحسّنة لمحركات البحث، حيث توفر ميزات مثل النطاقات المخصصة، ومحررًا مدمجًا، وتكاملًا سلسًا مع أنظمة التحكم في الإصدارات الشائعة مثل GitHub. يتيح لك أحدث عروضها، Headless Hashnode، إنشاء مدونة من الصفر باستخدام واجهات برمجة تطبيقات GraphQL المبتكرة من Hashnode. يمكنك إنشاء مدونة من الصفر أو استخدام مجموعة أدوات Next.js المبتدئة.
في هذا البرنامج التعليمي، سنقوم بإعداد Hashnode headless على DigitalOcean Droplets.
مقدمة إلى HeadLess HashNode
نظام إدارة المحتوى بدون واجهة مستخدم (CMS) هو بنية تفصل بين إدارة المحتوى وطبقتي العرض. في نظام إدارة المحتوى التقليدي، يُكتب المحتوى ويُخزن ويُعرض في نظام واحد، أما في البنية بدون واجهة مستخدم، فيمكن إدارة تخزين المحتوى وعرضه بشكل منفصل، مما يتيح للمصممين والمطورين تجربة كيفية ظهور المدونة لمستخدميها.
Headless Hashnode هو نظام إدارة محتوى مخصص يساعد المستخدمين على إنشاء مدونات شخصية أو مؤسسية حتى يتمكنوا من اللعب بنطاقهم باستخدام محرر WYSIWYG الخاص بـ Hashnode وأدوات تحسين الذكاء الاصطناعي وتحسين محركات البحث دون القلق بشأن تتبع المحتوى والتحليلات أثناء الاستضافة.
يبدأ
المتطلبات الأساسية:
- حساب على DigitalOcean
- حساب على Hashnode.
استخدام قطرات DigitalOcean
تعتبر DigitalOcean Droplets عبارة عن آلات افتراضية بسيطة وقابلة للتطوير وموثوقة ويمكن نشرها بسهولة في أقل من دقيقة.
للبدء، انتقل إلى لوحة تحكم DigitalOcean وانقر على زر "إنشاء" الأخضر أعلى يمين الصفحة. من القائمة المنسدلة، اختر "Droplets"، وهو الخيار الأول أيضًا.
في النافذة التالية، ستحتاج إلى تحديد تفضيلاتك للمنطقة والصورة والحجم وتفاصيل أخرى. يُنصح بشدة باختيار المنطقة الأقرب إلى قرائك المحتملين، حتى لو كان مركز البيانات مُختارًا لك مسبقًا.
في الخيار التالي "الصور"، انتقل إلى علامة تبويب "السوق" وابحث عن NodeJS على أوبونتو. يتميز سوق DigitalOcean بمجموعة من الأدوات والموارد الجاهزة للنشر تُسمى "تطبيقات بنقرة واحدة". بدلاً من تنزيل جميع التبعيات يدويًا، يمكنك الانتقال إلى السوق وتشغيل تطبيق بنقرة واحدة يأتي مع صور وإعدادات مُعدّة مسبقًا وجميع الحزم والتبعيات التي تحتاجها لمشروعك. ستظهر شاشتك كما يلي:
في النافذة التالية، يمكنك اختيار حجم وحدة التخزين. اختر الحجم الأنسب لك أو لشركتك، مع مراعاة عدد المدونات التي تخطط لنشرها مستقبلًا. يُنصح باستخدام قرص صلب SSD بسعة 25 جيجابايت على الأقل لتشغيل هذا التطبيق على مستوى الإنتاج. للحصول على أداء أسرع، نوصي باختيار وحدة تخزين متميزة تدعم معالجات Intel وAMD ووحدات تخزين SSD من نوع NVMe. يمكنك اختيار وحدة تخزين متميزة تناسب احتياجاتك، تمامًا مثل وحدة التخزين القياسية.
بعد الانتهاء، عليك اختيار طريقة مصادقة. يمكنك تسجيل الدخول إلى Droplet عبر مفتاح SSH أو كلمة مرور. في هذا الشرح، سنستخدم كلمة مرور، لذا أضف أي سلسلة نصية تختارها ودوّنها. في القسم التالي، يمكنك إضافة مراقبة وتنبيهات مُحسّنة للمقاييس مجانًا بتحديد المربع بجوار الخيار، وستكون جاهزًا. تأكد من إضافة اسم مضيف أبسط لـ Droplet، وراجع جميع التفاصيل قبل النقر على "إنشاء Droplet".
يستغرق تجهيز Droplet دقيقة واحدة تقريبًا. بعد الانتهاء، انقر على رابط "البدء" للاطلاع على تطبيق Marketplace والاطلاع على الميزات المضمنة.
إعداد القطرة
لتشغيل Droplet، اقبل الاتصالات الواردة وأعد توجيهها إلى التطبيق في المحطة المحلية لديك:
ssh root@YOUR-DROPLET-IP«استبدل "YOUR-DROPLET-IP" بعنوان IP الخاص بجهاز Droplet في لوحة التحكم. أدخل كلمة المرور عند الطلب.
الخطوة التالية هي تحديث وترقية الحزم في Droplet، ولهذا، قم بتشغيل الأوامر التالية:
sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.لإزالة الصفحة الافتراضية المعروضة في Droplet والتي تشغل المنفذ 3000، استخدم الأوامر التالية.
cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r defaultإذا لم تظهر التغييرات خلال 5 دقائق، فقد تحتاج إلى إيقاف تشغيل Droplet ثم إعادة تشغيله. في هذه الحالة، ستحتاج إلى الاتصال بـ Droplet عبر SSH من خلال محطتك المحلية. في الخطوات التالية، سنستخدم Node.js وnpm وNginx، وهي مثبتة مسبقًا على Droplet. Nginx هي الأداة التي تتولى جميع التوجيهات إلى تطبيق Next.js.
تكوين Nginx
قم بإنشاء ملف تكوين Nginx جديد باستخدام الأمر التالي:
sudo nano /etc/nginx/sites-available/hashnode
قم بلصق التكوين التالي، واستبدال server_name بعنوان IP الخاص بـ Droplet:
server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}بعد الانتهاء، احفظ الملف وأغلقه. الآن، نحتاج إلى إنشاء رابط رمزي لتفعيل الإعدادات باستخدام الأمر التالي:
sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/لاختبار تكوين Nginx الخاص بك بحثًا عن أخطاء نحوية، يمكنك تشغيل الأمر التالي:
sudo nginx -tيجب أن يكون الناتج المثالي مثل هذا:
نحن الآن جاهزون لإعادة تشغيل Nginx ويمكننا القيام بذلك باستخدام الأمر:
sudo service nginx restartتثبيت Headless Hashnode
انتقل إلى الدليل على اليمين:
cd /var/wwwاستنساخ مستودع Headless Hashnode على Github:
git clone https://github.com/hashnode/starter-kitاختر قالبًا وانتقل إلى دليله. في هذا البرنامج التعليمي، سنستخدم القالب الشخصي:
cd starter-kit/packages/blog-starter-kit/themes/personalنسخ ملف متغيرات البيئة:
cp .env.example .env.localثم قم بتعديل ملف متغيرات البيئة:
nano .env.localيجب عليك تغيير متغيرات البيئة لتشير إلى حساب Hashnode الخاص بك. غيّر NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST إلى نقطة النهاية وNEXT_PUBLIC_MODE إلى وضع الإنتاج. سيبدو الملف كما يلي:
لتثبيت التبعيات، قم بتشغيل الأمر التالي:
pnpm installيجب أن تبدو شاشتك كما يلي:
بعد أن أصبحت كل الأمور جاهزة، يمكنك الآن تشغيل الأمر التالي لنشر Headless Hashnode على Droplet. لاحظ أن عملية التجميع ستستغرق دقيقة واحدة. يجب أن يبدو جهازك الطرفي كما يلي:
pnpm dev
بمجرد التجميع، يمكنك زيارة عنوان IP الخاص بـ Droplet لمشاهدة موقع Headless Hashnode الخاص بك قيد التشغيل!
بفضل هذا، قمنا بنشر Hashnode headless على DigitalOcean Droplet باستخدام وكيل عكسي يوفره Nginx!
إعداد مدير عملية PM2
أحيانًا، قد يتوقف أمر التشغيل الذي نُشغّله بسبب إعادة تشغيل الخادم أو الحاجة إلى تثبيت تحديث. سنستخدم أداة PM2 لضمان استمرار تشغيل تطبيقنا. ستُعاد تشغيل PM2 حتى في حالة تعطل التطبيق.
مع صورة Node.js Marketplace، تم تثبيت PM2 مسبقًا. لضمان تشغيل تطبيقك دائمًا باستخدام PM2:
cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start
لضمان بدء تشغيل PM2 عند بدء التشغيل، شغّل الأوامر التالية. سيؤدي هذا إلى إنشاء نص برمجي يمكنك نسخه ولصقه في جهازك الطرفي لبدء تشغيل PM2 عند بدء التشغيل وحفظ هذه الإعدادات.
pm2 startup
pm2 saveنتيجة
أدوات إدارة المحتوى بدون رأس إدارة مثالية لتخصيص واجهات المستخدم، وتُسهّل Hashnode استخدام أداة مرنة وقابلة للتطوير. لتحسين أمان مدونتك وتحسين محركات البحث (SEO)، فكّر في إعداد شهادات SSL باستخدام Let's Encrypt وتطبيق اتصالات HTTPS. إذا كنت ترغب في إضافة اسم نطاق خاص بك، فتذكر ضبط إعدادات DNS. وجّه سجل A الخاص بنطاقك إلى عنوان IP الخاص بـ Droplet لتتمكن من الوصول إلى التطبيق باستخدام اسم نطاقك. سجّل حسابًا اليوم. نتطلع بشوق لرؤية مدوناتك مع DigitalOcean!
