قم بتبسيط المكدس الخاص بك باستخدام مولد موقع ثابت مخصص

نشرت: 2022-03-10
ملخص سريع ↬ في التطوير الحديث ، هناك العديد من الأدوات الرائعة لتطوير مواقع الويب ، ولكنها غالبًا ما تكون أكثر مما هو ضروري لمشروع معين. في هذه المقالة ، سوف نستكشف كيفية أخذ صفحة HTML متواضعة وجعل محتواها قابلاً للتعديل في نظام إدارة المحتوى بدون أطر عمل وبدون جافا سكريبت من جانب العميل.

مع ظهور حركة Jamstack ، أصبحت المواقع التي يتم تقديمها بشكل ثابت في غاية الغضب مرة أخرى. لا يقوم معظم المطورين الذين يقدمون خدمة HTML الثابتة بتأليف HTML أصلي. للحصول على تجربة مطور قوية ، ننتقل غالبًا إلى أدوات تسمى Static Site Generators (SSG).

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

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

ما هو مولد الموقع الثابت؟

يعد منشئ الموقع الثابت في جوهره برنامجًا ينفذ سلسلة من التحويلات على مجموعة من الملفات لتحويلها إلى أصول ثابتة ، مثل HTML. ما نوع الملفات التي يمكن أن يقبلها ، وكيف يحولها ، وما أنواع الملفات التي تخرج تميز مجموعات SSG.

يستخدم Jekyll ، وهو SSG مبكرًا ولا يزال شائعًا ، Ruby لمعالجة القوالب السائلة وملفات محتوى Markdown إلى HTML.

يستخدم Gatsby React و JSX لتحويل المكونات والمحتوى إلى HTML. ثم يخطو خطوة إلى الأمام وينشئ تطبيقًا من صفحة واحدة يمكن تقديمه بشكل ثابت.

11ty يجعل HTML من محركات القوالب مثل Liquid أو Handlebars أو Nunjucks أو قوالب JavaScript الحرفية.

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

بين مجموعات SSG الثلاثة المختلفة ، يمكننا أن نرى موضوعًا مشتركًا آخر: البيانات + القوالب = الموقع النهائي. يبدو أن هذه هي الوظيفة الأساسية للمواقع الثابتة للمولد. هذه هي الوظيفة التي سنبني عليها SSG حولها.

يعد منشئ الموقع الثابت في جوهره برنامجًا ينفذ سلسلة من التحويلات على مجموعة من الملفات لتحويلها إلى أصول ثابتة ، مثل HTML.

"

مكدس التكنولوجيا الجديد لمولد الموقع الثابت لدينا: المقاود و Sanity.io و Netlify

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

  • مصدر البيانات: Sanity.io
  • جلب البيانات والنمذجة: العقدة والمقاود
  • المضيف والنشر: Netlify.

المتطلبات الأساسية

  • تم تثبيت NodeJS
  • حساب Sanity.io
  • معرفة Git
  • المعرفة الأساسية لسطر الأوامر
  • المعرفة الأساسية للنشر في خدمات مثل Netlify.

ملاحظة : للمتابعة ، يمكنك العثور على الكود في هذا المستودع على GitHub.

المزيد بعد القفز! أكمل القراءة أدناه ↓

إعداد هيكل المستند الخاص بنا في HTML

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

في هيكل مشروعنا ، نحتاج إلى إنشاء مكان لتعيش فيه ملفات المصدر الخاصة بنا. في هذه الحالة ، سننشئ دليل src ونضع index.html بداخله.

في index.html ، سنحدد المحتوى الذي نريده. سيكون هذا بسيطًا نسبيًا عن الصفحة.

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title of the page!</title> </head> <body> <h1>The personal homepage of Bryan Robinson</h1> <p>Some pagraph and rich text content next</p> <h2>Bryan is on the internet</h2> <ul> <li><a href="linkURL">List of links</a></li> </ul> </body> </html>

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

قم بتحويل HTML الخاص بنا إلى نموذج يقبل البيانات

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

في جوهرها ، تأخذ Handlebars سلسلة تشبه HTML ، وتدرج البيانات عبر القواعد المحددة في المستند ، ثم تُخرج سلسلة HTML مترجمة.

لاستخدام المقاود ، سنحتاج إلى تهيئة package.json وتثبيت الحزمة.

قم بتشغيل npm init -y لإنشاء بنية ملف package.json مع بعض المحتوى الافتراضي. بمجرد حصولنا على هذا ، يمكننا تثبيت المقاود.

 npm install handlebars

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

لبدء البرنامج النصي الخاص بنا ، سننشئ ملف index.js في الأعلى. الأول هو المقاود والثاني هو وحدة نمطية افتراضية في Node للوصول إلى نظام الملفات الحالي.

 const fs = require('fs'); const Handlebars = require('handlebars');

سنستخدم الوحدة fs للوصول إلى ملف المصدر الخاص بنا ، وكذلك للكتابة إلى ملف التوزيع. لبدء بنائنا ، سننشئ وظيفة main لملفنا ليتم تشغيلها عند استدعائها ووظيفة buildHTML لدمج بياناتنا وترميزنا.

 function buildHTML(filename, data) { const source = fs.readFileSync(filename,'utf8').toString(); const template = Handlebars.compile(source); const output = template(data); return output } async function main(src, dist) { const html = buildHTML(src, { "variableData": "This is variable data"}); fs.writeFile(destination, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); } main('./src/index.html', './dist/index.html');

تقبل الوظيفة main() وسيطتين: المسار إلى قالب HTML الخاص بنا والمسار الذي نريد أن يعيش ملفنا المدمج. في وظيفتنا الرئيسية ، نقوم بتشغيل buildHTML على مسار مصدر القالب مع قدر من البيانات.

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

نعيد هذه السلسلة إلى وظيفتنا main ونستخدم طريقة writeFile التي توفرها وحدة نظام ملفات Node لكتابة الملف الجديد في الموقع المحدد لدينا إذا كان الدليل موجودًا.

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

قبل أن ننشئ CMS لإدارة هذه الصفحة ، دعنا نؤكد أنها تعمل. للاختبار ، سنقوم بتعديل مستند HTML الخاص بنا لاستخدام البيانات التي مررناها للتو. سنستخدم بناء جملة variableData Handlebars لتضمين محتوى variData.

 <h1>{{ variableData }}</h1>

الآن بعد أن أصبح HTML الخاص بنا يحتوي على متغير ، نحن جاهزون لتشغيل برنامج العقدة النصي الخاص بنا.

 node index.js

بمجرد انتهاء النص ، يجب أن يكون لدينا ملف في /dist/index.html . إذا قرأنا فتح هذا في المتصفح ، فسنرى عرض الترميز الخاص بنا ، وكذلك سلسلة "هذه بيانات متغيرة" أيضًا.

الاتصال بـ CMS

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

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

Sanity هي خدمة مدفوعة ، لكن لديهم خطة "قياسية" مجانية وتحتوي على جميع الميزات التي نحتاجها لموقع مثل هذا.

إعداد العقل

أسرع طريقة لبدء مشروع Sanity الجديد وتشغيله هي استخدام Sanity CLI. سنبدأ بتثبيت ذلك عالميًا.

 npm install -g @sanity/cli

يتيح لنا CLI الوصول إلى مجموعة من المساعدين للإدارة والنشر والإنشاء. لتبدأ الأمور ، سنقوم بتشغيل sanity init . سيؤدي هذا إلى توجيهنا من خلال استبيان للمساعدة في تمهيد الاستوديو الخاص بنا (ما يطلق عليه Sanity CMS مفتوح المصدر).

 Select a Project to Use: Create new project HTML CMS Use the default dataset configuration? Y // this creates a "Production" dataset Project output path: studio // or whatever directory you'd like this to live in Select project template Clean project with no predefined schemas

ستنشئ هذه الخطوة مشروعًا جديدًا ومجموعة بيانات جديدة في حساب Sanity الخاص بك ، وإنشاء نسخة محلية من Studio ، وربط البيانات و CMS معًا من أجلك. بشكل افتراضي ، سيتم إنشاء دليل studio في جذر مشروعنا. في المشاريع الكبيرة الحجم ، قد ترغب في إعداد هذا كمستودع منفصل. بالنسبة لهذا المشروع ، من الجيد إبقاء هذا مرتبطًا ببعضه البعض.

لتشغيل الاستوديو الخاص بنا محليًا ، سنقوم بتغيير الدليل إلى دليل studio وتشغيل برنامج sanity start . سيؤدي هذا إلى تشغيل Studio على localhost:3333 . عند تسجيل الدخول ، ستظهر لك شاشة لإعلامك بأن لديك "مخطط فارغ". مع ذلك ، حان الوقت لإضافة مخططنا ، وهو كيف سيتم تنظيم بياناتنا وتحريرها.

إنشاء مخطط سلامة العقل

الطريقة التي تنشئ بها المستندات والحقول داخل Sanity Studio هي إنشاء مخططات داخل ملف schemas/schema.js .

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

بالنسبة لصفحة الويب الخاصة بنا ، نريد مجموعة من البيانات تتضمن ما يلي:

  • لقب
  • الاسم الكامل
  • السيرة الذاتية (مع تحرير النص المنسق)
  • قائمة مواقع الويب مع الاسم وعنوان URL.

لتحديد هذا في مخططنا ، نقوم بإنشاء كائن للمستند الخاص بنا وتحديد الحقول الخاصة به. قائمة مشروحة بالمحتوى الخاص بنا مع type الحقل الخاص به:

  • العنوان - السلسلة
  • الاسم الكامل - سلسلة
  • السيرة الذاتية - مجموعة من "الكتل"
  • قائمة مواقع الويب - مصفوفة كائنات مع حقول اسم وسلسلة URL.
 types: schemaTypes.concat([ /* Your types here! */ { title: "About Details", name: "about", type: "document", fields: [ { name: 'title', type: 'string' }, { name: 'fullName', title: 'Full Name', type: 'string' }, { name: 'bio', title: 'Biography', name: 'content', type: 'array', of: [ { type: 'block' } ] }, { name: 'externalLinks', title: 'Social media and external links', type: 'array', of: [ { type: 'object', fields: [ { name: 'text', title: 'Link text', type: 'string' }, { name: 'href', title: 'Link url', type: 'string' } ] } ] } ] } ])

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

هيكلة المحتوى الخاص بك بطريقة قابلة لإعادة الاستخدام

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

سحب بياناتنا إلى مشروعنا

الآن بعد أن جعلنا بياناتنا متاحة عبر واجهة برمجة التطبيقات ، فلنقم بإدراجها في مشروعنا.

قم بتثبيت وتكوين عميل Sanity JavaScript

أول شيء ، نحتاج إلى الوصول إلى البيانات الموجودة في Node. يمكننا استخدام برنامج Sanity JavaScript لإنشاء هذا الاتصال.

 npm install @sanity/client

سيؤدي هذا إلى جلب وتثبيت JavaScript SDK. من هنا ، نحتاج إلى تهيئته لجلب البيانات من المشروع الذي أنشأناه مسبقًا. للقيام بذلك ، سنقوم بإعداد برنامج نصي لأداة مساعدة في /utils/SanityClient.js . نزود SDK بمعرف المشروع واسم مجموعة البيانات ، ونحن على استعداد لاستخدامه في البرنامج النصي الرئيسي الخاص بنا.

 const sanityClient = require('@sanity/client'); const client = sanityClient({ projectId: '4fs6x5jg', dataset: 'production', useCdn: true }) module.exports = client;

إحضار بياناتنا مع GROQ

بالعودة إلى ملف index.js بنا ، سننشئ وظيفة جديدة لجلب بياناتنا. للقيام بذلك ، سنستخدم لغة الاستعلام الأصلية لـ Sanity ، GROQ مفتوح المصدر.

سننشئ الاستعلام في متغير ثم نستخدم العميل الذي قمنا بتكوينه لجلب البيانات بناءً على الاستعلام. في هذه الحالة ، نبني كائنًا بخاصية تسمى about . في هذا الكائن ، نريد إرجاع البيانات الخاصة بوثيقتنا المحددة. للقيام بذلك ، نقوم بالاستعلام بناءً على المستند _id الذي يتم إنشاؤه تلقائيًا عندما نقوم بإنشاء مستندنا.

للعثور على _id ، ننتقل إلى المستند في Studio ونقوم بنسخه من عنوان URL أو الانتقال إلى وضع "فحص" لعرض جميع البيانات الموجودة في المستند. للدخول إلى "فحص" ، انقر فوق قائمة "kabob" في الجزء العلوي الأيمن أو استخدم الاختصار Ctrl + Alt + I. سوف يسرد هذا العرض جميع البيانات الموجودة في هذا المستند ، بما في ذلك _id بنا. سيعيد Sanity مجموعة من كائنات المستند ، لذا من أجل التبسيط ، 0th الإدخال 0.

ثم نقوم بتمرير الاستعلام إلى طريقة fetch الخاصة بعميل Sanity الخاص بنا وسيعيد كائن JSON لجميع البيانات الموجودة في وثيقتنا. في هذا العرض التوضيحي ، لا تعد إعادة جميع البيانات مشكلة كبيرة. لعمليات التنفيذ الأكبر ، يسمح GROQ لـ "إسقاط" اختياري لإرجاع الحقول الصريحة التي تريدها فقط.

 const client = require('./utils/SanityClient') // at the top of the file // ... async function getSanityData() { const query = `{ "about": *[_id == 'YOUR-ID-HERE'][0] }` let data = await client.fetch(query); }

تحويل حقل النص المنسق إلى HTML

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

بالنسبة لحالة الاستخدام الخاصة بنا ، فهذا يعني أننا بحاجة إلى تحويل الكائن إلى HTML. توجد وحدات NPM يمكن استخدامها لتحويل النص المحمول إلى استخدامات مختلفة. في حالتنا سنستخدم حزمة تسمى block-content-to-html.

 npm install @sanity/block-content-to-html

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

 const blocksToHtml = require('@sanity/block-content-to-html'); // Added to the top async function getSanityData() { const query = `{ "about": *[_type == 'about'][0] }` let data = await client.fetch(query); data.about.content = blocksToHtml({ blocks: data.about.content }) return await data }

استخدام المحتوى من Sanity.io في المقاود

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

 async function main(src, dist) { const data = await getSanityData(); const html = buildHTML(src, data) fs.writeFile(dist, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); }

الآن ، يمكننا تغيير HTML الخاص بنا لاستخدام البيانات الجديدة. سنستخدم المزيد من الاستدعاءات المتغيرة في نموذجنا لسحب معظم بياناتنا.

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

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

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ about.title }}</title> </head> <body> <h1>The personal homepage of {{ about.fullName }}</h1> {{{ about.content }}} <h2>Bryan is on the internet</h2> <ul> {{#each about.externalLinks }} <li><a href="{{ this.href }}">{{ this.text }}</a></li> {{/each}} </ul> </body> </html>

إعداد النشر

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

النشر إلى Netlify

للاستضافة ، سنستخدم Netlify. Netlify هو مضيف موقع ثابت. إنه يخدم أصولًا ثابتة ، ولكنه يحتوي على ميزات إضافية تجعل موقعنا يعمل بسلاسة. لديهم بنية أساسية مدمجة للنشر يمكنها تشغيل البرنامج النصي الخاص بالعقدة ، وخطافات الويب لتشغيل البنيات ، و CDN الموزع عالميًا للتأكد من تقديم صفحة HTML الخاصة بنا بسرعة.

يمكن لـ Netlify مشاهدة مستودعنا على GitHub وإنشاء بناء بناءً على أمر يمكننا إضافته في لوحة القيادة الخاصة بهم.

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

بمجرد أن يتم التوصيل ، نحتاج إلى إخبار Netlify بكيفية بناء مشروعنا. في لوحة القيادة ، سوف نتوجه إلى الإعدادات> إنشاء ونشر> إنشاء الإعدادات. في هذا المجال ، نحتاج إلى تغيير "أمر الإنشاء" إلى "node index.js" و "دليل النشر" إلى "./dist".

عندما يبني Netlify موقعنا ، فإنه سيتم تشغيل أمرنا ثم التحقق من المجلد الذي ندرجه للمحتوى ونشر المحتوى بداخله.

إعداد خطاف ويب

نحتاج أيضًا إلى إخبار Netlify بنشر إصدار جديد عندما يقوم شخص ما بتحديث المحتوى. للقيام بذلك ، سنقوم بإعداد Webhook لإخطار Netlify أننا بحاجة إلى إعادة بناء الموقع. Webhook هو عنوان URL يمكن الوصول إليه برمجيًا بواسطة خدمة مختلفة (مثل Sanity) لإنشاء إجراء في الخدمة الأصلية (في هذه الحالة Netlify).

يمكننا إعداد "خطاف بناء" محدد في لوحة معلومات Netlify الخاصة بنا في الإعدادات> إنشاء ونشر> إنشاء خطافات. أضف خطافًا ، وامنحه اسمًا واحفظه. سيوفر هذا عنوان URL يمكن استخدامه لتشغيل بناء في Netlify عن بُعد.

بعد ذلك ، نحتاج إلى إخبار Sanity بتقديم طلب إلى عنوان URL هذا عند نشر التغييرات.

يمكننا استخدام Sanity CLI لتحقيق ذلك. داخل دليلنا /studio ، يمكننا تشغيل sanity hook create للاتصال. سيطلب الأمر اسمًا ومجموعة بيانات وعنوان URL. يمكن أن يكون الاسم هو أي شيء تريده ، ويجب أن تكون مجموعة البيانات production لمنتجنا ، ويجب أن يكون عنوان URL هو عنوان URL الذي قدمته Netlify.

الآن ، عندما ننشر محتوى في Studio ، سيتم تحديث موقعنا على الويب تلقائيًا. لا يوجد إطار ضروري.

  • يمكن العثور على الكود في مستودع GitHub →

الخطوات التالية

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

  • ينشر هذا الموقع صفحة واحدة فقط ، ولكن مع وجود القليل من الإضافات في نص البناء الخاص بنا ، يمكننا جعله ينشر المزيد من الصفحات. يمكنه حتى نشر منشور مدونة.
  • يفتقر المستودع إلى "تجربة المطور" قليلاً. يمكننا تشغيل البرنامج النصي Node الخاص بنا على أي ملف محفوظ عن طريق تنفيذ حزمة مثل Nodemon أو إضافة "إعادة التحميل السريع" بشيء مثل BrowserSync.
  • يمكن للبيانات الموجودة في Sanity تشغيل العديد من المواقع والخدمات. يمكنك إنشاء موقع سيرة ذاتية يستخدم هذا وينشر ملف PDF بدلاً من صفحة ويب.
  • يمكنك إضافة CSS وجعل هذا يبدو وكأنه موقع حقيقي.