دليل متكامل: بناء مدونة فائقة السرعة بـ Gatsby و Netlify CMS

في هذا المقال، سنخوض رحلة عملية لبناء مدونة متكاملة باستخدام إطار عمل Gatsby ونظام إدارة المحتوى Netlify CMS. ستتعلم كيفية تثبيت Gatsby على جهازك واستخدامه لتطوير موقع مدونة فائق السرعة بكفاءة. سنتطرق أيضاً إلى كيفية دمج Netlify CMS في موقعك، بدءاً من إنشاء الملفات وتكوينها، وصولاً إلى ربط نظام إدارة المحتوى بموقعك عبر مصادقة المستخدم. أخيراً، ستكتشف كيفية الوصول إلى لوحة تحكم CMS الإدارية لتبدأ في كتابة أولى تدويناتك. يمكن العثور على الكود الكامل لهذا المشروع هنا. فيما يلي مقدمة موجزة عن هذه الأدوات.

ما هو Gatsby؟

Gatsby هو إطار عمل مجاني ومفتوح المصدر مبني على React، مصمم لمساعدتك في بناء مواقع ويب وتطبيقات ويب فائقة السرعة. يُصنف أيضاً كمولد للمواقع الساكنة (Static Site Generator)، على غرار Next.js و Hugo و Jekyll. يتميز Gatsby بدمج تحسين محركات البحث (SEO)، وإمكانية الوصول (Accessibility)، وتحسين الأداء بشكل أساسي منذ البداية. هذا يعني أنك ستتمكن من بناء تطبيقات ويب جاهزة للإنتاج في وقت أقل بكثير مما لو كنت تبنيها باستخدام React بمفرده.

ما هو Netlify CMS؟

Netlify CMS هو نظام إدارة محتوى (CMS) مصمم خصيصاً لمولدات المواقع الساكنة. تم تطويره بواسطة نفس الفريق الذي يقف وراء منصة Netlify. يتيح لك هذا النظام إنشاء وتحرير المحتوى بسهولة كما لو كنت تستخدم WordPress، ولكنه يقدم واجهة أبسط وأكثر سهولة في الاستخدام. الميزة الرئيسية لـ Netlify CMS هي أنك لست بحاجة إلى إنشاء ملفات Markdown يدوياً في كل مرة ترغب فيها بكتابة مقال. هذا مفيد بشكل خاص لكتاب المحتوى الذين يفضلون التركيز على الكتابة دون الحاجة للتعامل مع الأكواد، محررات النصوص، المستودعات (repositories)، أو أي تفاصيل تقنية أخرى.

الآن، دعنا نبدأ في بناء المدونة! ولكن قبل الانطلاق، ملاحظة هامة: يتطلب هذا الدليل معرفة مسبقة بـ JavaScript و React. إذا لم تكن مرتاحاً بعد للتعامل مع هذه الأدوات، فقد قمت بتضمين مصادر تعليمية في نهاية المقال لمساعدتك على صقل هذه المهارات. حتى لو كنت جديداً على هذه التقنيات، فقد حرصت على تبسيط هذا الدليل قدر الإمكان لتتمكن من المتابعة.

تهيئة بيئة العمل

قبل أن نتمكن من بناء مواقع Gatsby، يجب علينا التأكد من تثبيت جميع البرامج الأساسية المطلوبة للمدونة.

تثبيت Node.js

Node.js هي بيئة تشغيل تسمح بتنفيذ كود JavaScript خارج متصفح الويب. إنها أداة تمكنك من كتابة كود الخادم الخلفي (backend server code) بدلاً من استخدام لغات برمجة أخرى مثل Python أو Java أو PHP. بما أن Gatsby مبني باستخدام Node.js، فإن تثبيته على جهاز الكمبيوتر الخاص بك أمر ضروري. لتثبيت Node.js، انتقل إلى صفحة التنزيل وقم بتنزيل الإصدار المناسب لنظام التشغيل الخاص بك. بعد الانتهاء من خطوات التثبيت، افتح الطرفية (terminal) وقم بتشغيل الأمر node -v للتحقق من التثبيت الصحيح. حالياً، يجب أن يكون الإصدار 12.18.4 أو أعلى.

تثبيت Git

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

• تثبيت Git على Mac OS
• تثبيت Git على Windows
• تثبيت Git على Linux

تثبيت Gatsby CLI

Gatsby CLI (واجهة سطر الأوامر لـ Gatsby) هي الأداة التي تمكنك من بناء مواقع مدعومة بـ Gatsby. من خلال تشغيل هذا الأمر، يمكننا تثبيت أي مواقع Gatsby والمكونات الإضافية (plugins) التي نرغب فيها. لتثبيت Gatsby CLI، افتح الطرفية وقم بتشغيل هذا الأمر:

npm install -g gatsby-cli

بمجرد إعداد كل شيء بنجاح، نكون جاهزين لبناء أول موقع Gatsby لنا.

كيفية بناء موقع Gatsby

في هذا الدليل، سنستخدم القالب الأولي الافتراضي لـ Gatsby، ولكن لديك الحرية في اختيار أي قالب آخر من مكتبة قوالب Gatsby الأولية. شخصياً، أستخدم قالب Lekoart لتصميمه البسيط والجميل ووجود الوضع الداكن (dark mode).

في الطرفية (terminal)، قم بتشغيل هذا الأمر لتثبيت مدونة Gatsby الجديدة:

gatsby new foodblog https://github.com/gatsbyjs/gatsby-starter-blog

ملاحظة لمستخدمي Windows: إذا واجهت الخطأ “Error: Command failed with exit code 1: yarnpkg” أثناء إنشاء موقع Gatsby، يرجى مراجعة هذه الصفحة لاستكشاف الأخطاء وإصلاحها. قد تحتاج إلى تنظيف تبعيات تثبيتات yarn القديمة أو اتباع تعليمات Gatsby على Windows.

شرح أمر سطر الأوامر

دعنا نشرح ماذا يعني سطر الأوامر هذا بالضبط:

• new: هذا هو الأمر الذي ينشئ مشروع Gatsby جديداً.
• foodblog: هذا هو اسم المشروع. يمكنك تسميته كما تشاء هنا. لقد سميت هذا المشروع foodblog كمثال فقط.
• الرابط (https://github.com/gatsbyjs/gatsby-starter-blog): يشير هذا الرابط المحدد إلى مستودع كود (code repository) يحتوي على الكود الأولي (starter code) الذي ترغب في استخدامه. بعبارة أخرى، لقد اخترت القالب للمشروع.

بمجرد اكتمال التثبيت، سنقوم بتشغيل الأمر cd foodblog الذي سينقلنا إلى موقع ملف مشروعنا.

cd foodblog

بعد ذلك، سنقوم بتشغيل gatsby develop الذي سيبدأ تشغيل الموقع على الجهاز المحلي. اعتماداً على مواصفات جهاز الكمبيوتر الخاص بك، قد يستغرق الأمر بعض الوقت قبل أن يبدأ بالكامل.

gatsby develop

افتح علامة تبويب جديدة في متصفحك وانتقل إلى http://localhost:8000/. يجب أن ترى الآن موقع Gatsby الجديد الخاص بك!

الآن بعد أن أنشأنا المدونة، الخطوة التالية هي إضافة Netlify CMS لتسهيل كتابة تدوينات المدونة.

كيفية إضافة Netlify CMS إلى موقعك

يتضمن دمج Netlify CMS في موقع Gatsby الخاص بك أربع خطوات رئيسية: هيكلة ملفات التطبيق، التكوين، المصادقة، والوصول إلى نظام إدارة المحتوى (CMS). دعنا نتناول كل مرحلة من هذه المراحل على حدة.

إعداد هيكل ملفات التطبيق

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

├── node_modules
├── src
├── static
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

لا تقلق بشأن كل هذه الملفات؛ سنستخدم عدداً قليلاً جداً منها هنا. ما نبحث عنه هو مجلد static. هذا هو المجلد الذي سيشكل الهيكل الرئيسي لـ Netlify CMS. إذا لم يكن مشروعك يحتوي على مجلد static، فقم بإنشائه في الدليل الجذر لمشروعك.

داخل مجلد static، أنشئ مجلداً باسم admin. داخل هذا المجلد، أنشئ ملفين: index.html و config.yml:

admin
├ index.html
└ config.yml

الملف الأول، index.html، هو نقطة الدخول إلى لوحة تحكم CMS الإدارية الخاصة بك. هذا هو المكان الذي يعمل فيه Netlify CMS. لست بحاجة إلى القيام بأي تنسيق أو تصميم، حيث يتم ذلك بالفعل لك باستخدام وسم script في المثال أدناه:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

الملف الثاني، config.yml، هو جوهر Netlify CMS الرئيسي. سيكون الأمر معقداً بعض الشيء حيث سنقوم بكتابة كود الواجهة الخلفية (backend code). سنتحدث عنه بمزيد من التفصيل في قسم التكوين.

تكوين الواجهة الخلفية (Backend)

في هذا الدليل، نستخدم Netlify للاستضافة والمصادقة، لذا يجب أن تكون عملية تكوين الواجهة الخلفية مباشرة نسبياً. أضف جميع مقتطفات الكود في هذا القسم إلى ملف admin/config.yml الخاص بك. سنبدأ بإضافة الأكواد التالية:

backend:
  name: git-gateway
  branch: master

تنبيه: يعمل هذا الكود أعلاه مع مستودعات GitHub و GitLab. إذا كنت تستخدم Bitbucket لاستضافة مستودعك، فاتبع هذه التعليمات بدلاً من ذلك.

يحدد الكود الذي كتبناه للتو بروتوكول الواجهة الخلفية الخاص بك وفرع النشر (وهو branch: master). Git Gateway هو واجهة برمجة تطبيقات (API) مفتوحة المصدر تعمل كوكيل بين المستخدمين المصادق عليهم لموقعك ومستودع موقعك. سأشرح المزيد عن وظيفته في قسم المصادقة.

بعد ذلك، سنقوم بكتابة media_folder: "images/uploads". سيسمح لك هذا بإضافة ملفات الوسائط مثل الصور مباشرة إلى نظام إدارة المحتوى (CMS) الخاص بك. وبالتالي، لن تحتاج إلى استخدام محرر نصوص لإضافة الوسائط يدوياً.

media_folder: "images/uploads"

تأكد من أنك أنشأت مجلداً باسم images داخل مجلد admin. داخل مجلد images، أنشئ مجلداً باسم uploads، فهذا هو المكان الذي ستستضيف فيه صورك.

تكوين المجموعات (Collections)

تحدد المجموعات هيكل أنواع المحتوى المختلفة على موقعك الساكن. بما أن كل موقع يمكن أن يكون مختلفاً، فإن كيفية تكوين إعدادات المجموعة ستختلف من موقع لآخر.

لنفترض أن موقعك يحتوي على مدونة، وأن التدوينات مخزنة في content/blog، ويتم حفظ الملفات بتنسيق تاريخ-عنوان، مثل 2020-09-26-how-to-make-sandwiches-like-a-pro.md. تبدأ كل تدوينة بإعدادات في الواجهة الأمامية (front matter) بتنسيق YAML بهذه الطريقة:

---
layout: blog
title: "How to make sandwiches like a pro"
date: 2020-09-26 11:59:59
thumbnail: "/images/sandwich.jpg"
---
This is the post body where I write about how to make a sandwich so good that will impress Gordon Ramsay.

باستخدام هذا المثال أعلاه، هذه هي الطريقة التي ستضيف بها إعدادات collections إلى ملف config.yml الخاص بـ Netlify CMS:

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }

دعنا نفحص وظيفة كل من هذه الحقول:

• name: يُستخدم هذا في المسارات (routes) مثل /admin/collections/blog.
• label: يُستخدم هذا في واجهة المستخدم (UI - User Interface). عندما تكون في صفحة الإدارة، سترى كلمة “Blog” كبيرة في أعلى الشاشة. هذه الكلمة الكبيرة “Blog” هي الـ label.
• folder: يشير هذا إلى مسار الملف حيث يتم تخزين تدوينات مدونتك.
• create: يسمح هذا للمستخدم (أنت أو أي شخص لديه صلاحيات المسؤول) بإنشاء مستندات جديدة (تدوينات مدونة في هذه الحالة) ضمن هذه المجموعات.
• slug: هذا هو القالب لأسماء الملفات.
• {{year}}، {{month}}، و {{day}}: يتم سحب هذه القيم من حقل تاريخ التدوينة أو تاريخ الحفظ.
• {{slug}}: هو نسخة آمنة للرابط (URL-safe) من عنوان التدوينة. افتراضياً، يكون {{slug}}.

الحقول (fields) هي المكان الذي يمكنك فيه تخصيص محرر المحتوى (الصفحة التي تكتب فيها تدوينة المدونة). يمكنك إضافة أشياء مثل التقييمات (1-5)، الصور المميزة، أوصاف الميتا (meta descriptions)، وما إلى ذلك. على سبيل المثال، في هذا الكود المحدد، نضيف أقواس معقوفة {}. داخلها نكتب label بقيمة “Publish Date” والتي ستكون التسمية في واجهة المستخدم للمحرر. حقل name هو اسم الحقل في الواجهة الأمامية (front matter) ونسميه “date” لأن الغرض من هذا الحقل هو إدخال التاريخ. وأخيراً، يحدد الـ widget كيف سيبدو نمط واجهة المستخدم ونوع البيانات التي يمكننا إدخالها. في هذه الحالة، كتبنا "datetime" مما يعني أنه يمكننا إدخال التاريخ والوقت فقط.

- { label: "Publish Date", name: "date", widget: "datetime" }

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

تفعيل المصادقة (Authentication)

في هذه المرحلة، نكون قد انتهينا تقريباً من تثبيت وتكوين Netlify CMS. حان الوقت الآن لربط موقع Gatsby الخاص بك بنظام إدارة المحتوى (CMS) عن طريق تفعيل المصادقة. سنضيف بعض أكواد HTML ثم ننشط بعض الميزات من Netlify. بعد ذلك، ستكون في طريقك لإنشاء أول تدوينة لك.

سنحتاج إلى طريقة لربط واجهة الواجهة الأمامية (front end interface) بالواجهة الخلفية (backend) حتى نتمكن من التعامل مع المصادقة. للقيام بذلك، أضف وسم script الخاص بـ HTML إلى ملفين:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

الملف الأول لإضافة وسم script هذا هو ملف admin/index.html. ضعه بين وسمي <head>. والملف الثاني لإضافة الوسم هو ملف public/index.html. هذا أيضاً يوضع بين وسمي <head>.

عندما يسجل المستخدم الدخول باستخدام أداة Netlify Identity widget، يقوم رمز وصول (access token) بتوجيههم إلى الصفحة الرئيسية للموقع. لإكمال عملية تسجيل الدخول والعودة إلى CMS، أعد توجيه المستخدم إلى المسار /admin/. للقيام بذلك، أضف الكود التالي قبل وسم الإغلاق </body> لملف public/index.html:

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

بهذا، نكون قد انتهينا من كتابة الكود وحان الوقت لزيارة Netlify لتفعيل المصادقة. قبل المتابعة، يجب عليك عمل Git commit لتغييراتك ودفعها إلى المستودع (repository). بالإضافة إلى ذلك، سيتعين عليك نشر موقعك مباشرة (deploy your site live) حتى تتمكن من الوصول إلى الميزات في قسم “تفعيل Identity و Git Gateway“.

نشر موقعك مباشرة باستخدام Netlify

سنستخدم Netlify لنشر موقع Gatsby الخاص بنا مباشرة. عملية النشر بسيطة وسريعة، والأهم من ذلك، أنها تأتي مع شهادة SSL مجانية (Secure Sockets Layer). هذا يعني أن موقعك محمي (يمكنك التأكد من ذلك بالبحث عن القفل الأخضر في شريط عنوان المتصفح). إذا لم تكن قد اشتركت في المنصة، يمكنك القيام بذلك هنا.

عند الانتهاء من التسجيل، يمكنك بدء عملية النشر باتباع هذه الخطوات الثلاث:

1. انقر على زر “New site from Git” لإنشاء موقع جديد للنشر.
2. اختر مزود Git الذي تستضيف عليه موقعك. موقعي مستضاف على GitHub، لذا هذا ما سأختاره.
3. اختر المستودع (repository) الذي تريد ربطه بـ Netlify. اسم موقع Gatsby الخاص بي هو “foodblog” ولكن يجب عليك اختيار اسم مشروعك الخاص.
4. الخطوة الأخيرة تسأل كيف ترغب في أن يقوم Netlify بضبط عمليات البناء (builds) ونشر موقعك. سنترك كل شيء كما هو وسنضغط على زر “Deploy site“. سيبدأ هذا في نشر موقعك مباشرة.

بمجرد اكتمال النشر، يمكنك زيارة موقعك المباشر بالنقر على الرابط الأخضر الذي تم إنشاؤه لك في الجزء العلوي الأيسر من الشاشة. مثال: https://random_characters.netlify.app.

بهذا، يمكن للعالم الآن رؤية موقعك. يمكنك استبدال الرابط الغريب بنطاقك المخصص (custom domain) من خلال قراءة هذا التوثيق.

تفعيل Identity و Git Gateway

تساعد خدمات Identity و Git Gateway من Netlify في إدارة مستخدمي لوحة تحكم CMS لموقعك دون الحاجة إلى أن يكون لديهم حساب لدى مزود Git الخاص بك (مثل GitHub) أو صلاحية الوصول (commit access) إلى مستودعك. لتفعيل هذه الخدمات، توجه إلى لوحة تحكم موقعك على Netlify واتبع هذه الخطوات:

1. اذهب إلى Settings > Identity، واختر “Enable Identity service“.
   
   
   
2. انقر على زر “Enable Identity” لتفعيل ميزة Identity.
3. تحت “Registration preferences“، اختر “Open” أو “Invite only“. في معظم الأحيان، ترغب في أن يتمكن المستخدمون المدعوون فقط من الوصول إلى CMS الخاص بك. ولكن إذا كنت تجرب فقط، يمكنك تركه “Open” للراحة.
   
4. ضمن القائمة الفرعية Identity، انقر على رابط “Registration” وسيتم نقلك إلى تفضيلات التسجيل.
5. انتقل لأسفل إلى Services > Git Gateway، وانقر على “Enable Git Gateway“. هذا يقوم بالمصادقة مع مزود Git الخاص بك ويولد رمز وصول API. في هذه الحالة، نترك حقل “Roles” فارغاً، مما يعني أن أي مستخدم مسجل الدخول يمكنه الوصول إلى CMS.
   
   
6. انقر على زر “Enable Git Gateway” لتفعيل ميزة Git Gateway.

بهذا، يكون موقع Gatsby الخاص بك قد تم ربطه بـ Netlify CMS. كل ما تبقى هو الوصول إلى لوحة تحكم CMS الإدارية وكتابة تدوينات المدونة.

كيفية الوصول إلى لوحة تحكم CMS

حسناً، أنت الآن جاهز لكتابة أول تدوينة لك! هناك طريقتان للوصول إلى لوحة تحكم CMS الإدارية الخاصة بك، اعتماداً على خيارات الوصول التي اخترتها من Identity.

• إذا اخترت “Invite only“، يمكنك دعوة نفسك والمستخدمين الآخرين بالنقر على زر “Invite user“. سيتم إرسال رسالة بريد إلكتروني تحتوي على رابط دعوة لتسجيل الدخول إلى لوحة تحكم CMS الإدارية الخاصة بك. انقر على رابط التأكيد وسيتم نقلك إلى صفحة تسجيل الدخول.
• بدلاً من ذلك، إذا اخترت “Open“، يمكنك الوصول إلى CMS موقعك مباشرة على yoursite.com/admin/. سيُطلب منك إنشاء حساب جديد. عند إرسال البيانات، سيتم إرسال رابط تأكيد إلى بريدك الإلكتروني. انقر على رابط التأكيد لإكمال عملية التسجيل وسيتم نقلك إلى صفحة CMS.

ملاحظة هامة: إذا لم تتمكن من الوصول إلى لوحة تحكم CMS الإدارية الخاصة بك بعد النقر على الرابط من البريد الإلكتروني، فالحل هو نسخ الرابط في المتصفح الذي يبدأ بـ #confirmation_token=random_characters ولصق الرابط بعد علامة الهاشتاج “#“، بهذه الطريقة: https://yoursite.com/admin/#confirmation_token=random_characters. هذا يجب أن يحل المشكلة.

إذا سار كل شيء على ما يرام، يجب أن ترى لوحة تحكم المسؤول لموقعك:

يمكنك إنشاء تدوينتك الجديدة بالنقر على زر “New post“. عندما تكون جاهزاً لنشر تدوينتك، يمكنك النقر على زر “Publish Now” لنشرها فوراً. عند الضغط على زر النشر، يتم إنشاء ملف التدوينة تلقائياً. ثم ستتم إضافة التغييرات برسالة commit بناءً على اسم التدوينة مع تاريخ ووقت النشر. أخيراً، سيتم دفعها إلى المستودع المضيف (host repository)، ومن هناك ستكون تدوينتك مرئية مباشرة. يمكنك عرض التغييرات من خلال النظر إلى رسالة commit في مستودعك المضيف. بعد الانتظار لبضع دقائق، يجب أن تكون تدوينتك الجديدة مباشرة.

خطوة إضافية: تنظيف المقالات النموذجية

الشيء الأخير الذي يجب فعله هو تنظيف المقالات النموذجية. لحذف هذه التدوينات، انتقل إلى ملفات المدونة في محرر النصوص الخاص بك واحذفها واحدة تلو الأخرى. تأكد من التحقق من الطرفية (terminal) عند حذفها حتى لا تكون هناك أي مشاكل في موقعك. بمجرد مسح جميع التدوينات النموذجية، قم بعمل commit لهذه التغييرات وادفعها إلى المستودع. والآن، لقد انتهيت تماماً! يمكنك الآن إنشاء تدويناتك الجديدة من لوحة تحكم CMS المريحة ومشاركة قصصك مع العالم.

ملخص الدليل

في هذا الدليل، تعلمت كيفية:

• إنشاء موقع مدونة باستخدام Gatsby.
• إضافة Netlify CMS إلى موقع Gatsby الخاص بك عن طريق إنشاء وتكوين الملفات.
• تفعيل مصادقة المستخدم عن طريق تنشيط Identity و Git Gateway.
• الوصول إلى لوحة تحكم CMS الإدارية لموقعك.
• نشر أول تدوينة لك مدعومة بـ Gatsby و Netlify CMS.

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

لا يزال هناك الكثير لتغطيته حول Gatsby و Netlify CMS. إحدى أفضل الطرق للتعلم عنهما هي من خلال مراجعة وثائقهما الرسمية. آمل أن يكون هذا الدليل مفيداً لك، ونتمنى لك تدوينات سعيدة!

يمكنك زيارة مدونتي لمعرفة المزيد من النصائح والحيل والدروس التعليمية حول تطوير الويب.

صورة الغلاف بواسطة NeONBRAND على Unsplash.

مصادر لتعلم JavaScript و React

إليك بعض المصادر التي قد تساعدك على تعلم JavaScript و React:

• JavaScript:
  • وثائق JavaScript الرسمية
  • freeCodeCamp
  • W3Schools: JavaScript Tutorial
  • JavaScript.info
• React:
  • وثائق React الرسمية
  • Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
  • Scrimba: Learn React for free
  • Flavio Copes: The React Handbook

إذا قرأت حتى هذه النقطة، فشكراً للمؤلف لإظهار اهتمامك.

تعلم البرمجة مجاناً. ساعد منهج freeCodeCamp مفتوح المصدر أكثر من 40,000 شخص في الحصول على وظائف كمطورين. ابدأ.

الخلاصة التقنية

يمثل الدمج بين Gatsby و Netlify CMS حلاً قوياً وفعالاً لبناء مدونات ومواقع ويب ساكنة تتميز بالسرعة والأداء العالي وسهولة الإدارة. فبينما يوفر Gatsby بنية قوية ومحسّنة للأداء ومحركات البحث بفضل طبيعته كمولد للمواقع الساكنة واستخدامه لـ React، يقدم Netlify CMS واجهة مستخدم بديهية تسمح لكتاب المحتوى بإدارة منشوراتهم دون الحاجة للتعمق في تعقيدات الكود. هذه التركيبة مثالية للمشاريع التي تتطلب سرعة تحميل فائقة، تكاليف استضافة منخفضة، وأماناً عالياً، مع الحفاظ على مرونة التحرير. إن عملية الإعداد الموضحة في هذا الدليل، من تهيئة البيئة إلى تفعيل المصادقة ونشر الموقع، تجعل هذا الحل متاحاً حتى للمطورين ذوي الخبرة المتوسطة، مما يفتح آفاقاً واسعة لإنشاء محتوى ويب ديناميكي بميزات المواقع الساكنة.