مقدمة عن إنشاء مواقع الويب باستخدام Gatsby و وورد بريس (سريع وثابت)

كيف يعمل موقع ويب ديناميكي نموذجي ، مثل تلك القائمة على وورد بريس؟ عندما يقوم زائر بإدخال عنوان URL على متصفح أو يزور موقع الويب الخاص بك من خلال رابط ، يتم إرسال طلب إلى خادم الويب الخاص بك.

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

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

ما هو غاتسبي؟

ينشئ وورد بريس مواقع ويب ديناميكية ، والتي تحتاج إلى مجموعة من PHP و MySQL و Apache أو Nginx على الخادم لتشغيلها. من الممكن إنشاء نسخة ثابتة من وورد بريس عن طريق إنشاء قائمة بصفحات HTML لجميع محتويات موقعك.

يُطلق على هذا الإصدار الثابت من وورد بريس اسم وورد بريس بدون رأس أو وورد بريس بدون خادم . تتم عملية التحويل هذه مرة واحدة فقط بحيث يمكن تقديم نفس الصفحة للزوار عدة مرات. كيف تقوم بتحويل موقع وورد بريس الخاص بك إلى إصدار ثابت؟ هذا هو المكان الذي يأتي فيه غاتسبي إلى الصورة.

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

تم تطوير Gatsby منذ عام واحد فقط ، لكن عددًا كبيرًا من المستخدمين يجربون Gatsby. وجد Gatsby القبول في مجموعة متنوعة من الإعدادات. يتم تشغيل الصفحة الرئيسية لمدونة علوم وهندسة البيانات في Airbnb  بواسطة Gatsby ، على الرغم من استضافة منشورات المدونة الفعلية على Medium.

مدونة علم بيانات الهندسة airbnb 3

مدونة Airbnb للهندسة وعلوم البيانات

براون هي علامة تجارية لشركة السلع الاستهلاكية P&G. يتم استضافة موقعه الكندي مع Gatsby ، بينما يتم تشغيل وظيفة البحث على الموقع بواسطة React.

موقع براون كندا 3

موقع براون الكندي

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

محفظة جاكوب كاسترو 3

محفظة جاكوب دي كاسترو

لماذا تختار Gatsby؟

مواقع الويب السريعة:  الفائدة الأساسية لبناء موقع ثابت باستخدام Gatsby هي السرعة ، والتي يحاول مشرفي المواقع تحسينها منذ إعلان Google عن استخدام سرعة الموقع في ترتيب بحث الويب . تؤثر أوقات التحميل أيضًا على مشاهدات الصفحة والتحويلات. تشير التقديرات إلى أن التأخير لمدة ثانية واحدة في وقت تحميل الموقع يمكن أن يؤدي إلى تقليل التحويلات بنسبة 7٪ .

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

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

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

لماذا نتجنب جاتسبي؟

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

على سبيل المثال، تعليقات لا بد من استضافتها خارجيا من خلال خدمة مثل هارد .

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

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

الخبرة الفنية:  تم بناء Gatsby على ReactJS و GraphQL. لذلك ، هناك حاجة إلى بعض المعرفة بجافا سكريبت وفكرة أساسية عن GraphQL للعمل مع موقع ويب ونقله إلى Gatsby.

تعد مواقع الويب الثابتة مفيدة لأولئك الذين يبحثون عن حل منخفض التكلفة وبأمان عالٍ. بعض حالات الاستخدام عبارة عن مواقع ويب للمحفظة للمستقلين ومواقع عرض المنتج.

إذا كنت تعتقد أن الفوائد تفوق أوجه القصور ، فهذا عظيم! سنحاول الآن إعداد Gatsby للتكامل مع موقع وورد بريس الخاص بنا .

يتوفر أحدث إصدار من موقع Gatsby الذي أنشأناه في هذا البرنامج التعليمي على GitHub  لاستخدامك.

الخطوة 1: إعداد Gatsby

في هذا القسم ، سننظر في كيفية تثبيت Gatsby وإنشاء موقع ثابت أساسي باستخدام Gatsby.

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

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

معلومات

حاليًا ، لا يمكن لـ Kinsta استضافة خوادم NodeJS ويجب إعدادها في مكان آخر. ومع ذلك ، يمكنك استخدام Kinsta لتثبيت وورد بريس وسحب البيانات باستخدام إما REST API أو GraphQL .

إذا كنت تقوم بتشغيل Windows ، فيمكنك تثبيت NodeJS و Git من خلال المثبت في صفحة التنزيل. على جهاز Mac ، يمكنك إما تنزيل أدوات التثبيت الخاصة بهم أو استخدام البيرة المنزلية.

brew install nodejs
brew install git

إذا كنت تستخدم نظام التشغيل Linux OS ، فيمكنك تثبيت NodeJS من خلال مثبت الحزمة مثل apt.

sudo apt update
sudo apt install nodejs git

قم بتثبيت Gatsby

بمجرد تثبيت NodeJS و Git بنجاح ، فأنت جاهز لتثبيت Gatsby! أسهل طريقة هي تشغيل الأمر التالي على الجهاز (استخدم npmسطر الأوامر في Windows):

npm install -g gatsby-cli

يقوم المثبت أولاً بتثبيت التبعيات ثم Gatsby. أنت الآن جاهز لإنشاء موقع Gatsby الأول الخاص بك.

قم ببناء ونشر موقع Gatsby الخاص بك

قم بتشغيل الأمر التالي لإنشاء موقع Gatsby.

gatsby new gatsby-wordpress

ينشئ Gatsby موقعًا في الدليل / gatsby-وورد بريس عن طريق استنساخ قالب Gatsby starter . يمكنك توفير قالب بداية مختلف لنسخه. بمجرد اكتمال الاستنساخ وتثبيت التبعيات ، يمكنك تشغيل إصدار تطوير من الموقع باستخدام الأمر التالي.

cd gatsby-wordpress
gatsby develop

يمكنك بعد ذلك زيارة إصدار التطوير للموقع على http: // localhost: 8000.

موقع بداية gatsby 3

موقع Gatsby Starter

الخطوة الأخيرة هي بناء موقعك الثابت. يقوم الأمر التالي بإنشاء الملفات الثابتة في الدليل العام. لتحميله على الخادم ، يمكنك ببساطة تحميل محتويات هذا الدليل إلى الدليل الجذر للخادم. قد ترغب في إضافة بادئة مسار  مثل www.example.com/blog/ كعنوان URL جذري للبنيات الخاصة بك.

gatsby build

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

gatsby serve

الآن بعد أن أنشأت بنجاح موقعًا ثابتًا أساسيًا من Gatsby ، دعنا نحاول دمجه مع وورد بريس.

الخطوة الثانية: كيفية توصيل Gatsby بـ وورد بريس

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

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

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

npm install gatsby-source-wordpress

تكوين Gatsby

بعد ذلك ، أضف هذا المكون الإضافي إلى ملف التكوين gatsby-config.js الخاص بـ Gatsby.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

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

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

إحضار المشاركات باستخدام GraphQL

بمجرد تحديد مصدر موقع وورد بريس في ملف التكوين الخاص بك ، ستحتاج إلى تحديد البيانات التي يجب استخراجها من موقع وورد بريس. يستخدم Gatsby GraphQL ، وهي لغة استعلام مفتوحة المصدر لواجهات برمجة التطبيقات ، للحصول على منشورات وورد بريس بشكل مجمّع.

قبل الانتهاء من الاستعلامات المراد تحديدها ، يمكنك تحديد المحتوى الذي تريد جلبه من وورد بريس بشكل تفاعلي. قم بتشغيل خادم التطوير وانتقل إلى عنوان URL: http: // localhost: 8000 / ___ graphql لفتح محرر GraphQL.

استعلام عن الرسم البياني للبيانات 3

الاستعلام عن البيانات باستخدام GraphQL

عند الانتهاء من المحتوى المراد سحبه ، يمكنك إضافة استعلامات GraphQL إلى ملف index.js.

دعونا نسحب العنوان والمقتطف فقط من كل منشور في الوقت الحالي. يمكننا إضافة المزيد من الحقول في وقت لاحق.

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

عندما تتحقق من موقع التطوير ، ستلاحظ أنه تم سحب جميع المنشورات من وورد بريس مع عرض عناوينها ومقتطفاتها:

الصفحة الرئيسية لبرنامج gatsby مع مشاركات ووردبريس 3

صفحة Gatsby الرئيسية مع مشاركات وورد بريس

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

الخطوة 3: إنشاء قالب صفحة أساسي

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

أنشئ صفحة لكل منشور

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

أضف التعليمات البرمجية التالية إلى gatsby-node.js. لاحظ أننا نحصل بالإضافة إلى ذلك على المحتوى والمؤلف والتاريخ والارتباط الثابت لكل منشور:

هل سئمت من مضيف بطيء لموقع وورد بريس الخاص بك؟ نحن نقدم خوادم فائقة السرعة ودعمًا عالميًا على مدار الساعة طوال أيام الأسبوع من خبراء وورد بريس. تحقق من خططنا

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressPost(sort: {fields: [date]}) {
        edges {
          node {
            title
            excerpt
            slug
            date(formatString: "MM-DD-YYYY")
            author {
              name
            }
          }
        }
      }
    }

  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        // Decide URL structure
        path: node.slug,
        // path to template
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug,
        },
      })
    })
  })

بعد سحب البيانات من GraphQL ، تُنشئ الشفرة صفحة لكل منشور. ضمن المنشور ، يمكنك تحديد بنية عنوان URL للصفحة بناءً على الرابط باستخدام المسار.

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

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

أعد تشغيل خادم التطوير بعد إجراء التغييرات على ملف gatsby-node.js لتصبح التغييرات سارية المفعول.

قم بإنشاء نموذج لعرض منشور

قم بإنشاء قوالب دليل في دليل src. قم بإنشاء ملف جديد blog-post.js داخل دليل القوالب وأدخل الكود التالي:

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => {
  const post = data.allWordpressPost.edges[0].node
  console.log(post)
  return (
    <Layout>
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
        <p> By: {post.author.name} </p>
        <p> On: {post.date} </p>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    allWordpressPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          title
          content
          slug
          date(formatString: "MM-DD-YYYY")
          author {
            name
          }
        }
      }
    }
  }

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

ارتباط إلى صفحات في الفهرس

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

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h1>My WordPress Blog</h1>
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <Link to={node.slug}>
            <p>{node.title}</p>
          </Link>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
          slug
        }
      }
    }
  }

إليك حالة صفحة الفهرس:

صفحة الفهرس مع روابط النشر 3

صفحة الفهرس بعد إضافة روابط الوظائف

عند النقر فوق ارتباط إلى منشور ، إليك صفحة منشور المدونة ، التي يتم تقديمها بواسطة blog-post.js:

منشور مدونة بالتفاصيل 3

منشور مدونة مع العنوان والمحتوى وتاريخ الإنشاء والمؤلف

الخطوة 4: مهام الترحيل المتقدمة

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

تحويلات مسار الصورة

إحدى مشاركاتنا الأصلية ، “النشر بالصورة!” كان لديه صورة فيه. إذا انتقلت إلى الصفحة المقابلة على Gatsby ، فستلاحظ أن الصورة معروضة ، لكن مصدر الصورة هو نفسه مصدر وورد بريس. في هذا المثال ، يشير إلى صورة وورد بريس المستضافة محليًا.

مشاركة gatsby مع الصورة والمصدر 3

نشر غاتسبي بصورة ومصدرها

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

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

gatsby-imageثم gatsby-وورد بريس-inline-imagesالبرنامج المساعد.

npm install gatsby-image
npm install gatsby-wordpress-inline-images

بعد ذلك ، أضف الأسطر التالية إلى ملفك gatsby-config.js .

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        ...
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: `localhost:8888/wordpress`,
              protocol: `http`
            }
          }
        ]
      }
    }
  ],
}

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

عرض تاريخ آخر تعديل

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

لإضافة آخر طابع زمني معدل من وورد بريس إلى منشور Gatsby الخاص بك ، تحتاج إلى إضافة الحقل المعدل إلى قائمة العناصر في استعلام GraphQL الخاص بك. إنه طابع زمني مثل date، لذلك تحتاج أيضًا إلى إضافة المعلمة formatString. هذا هو blog-post.jsالملف المعدل :

...
<Layout>
  <div>
    ...
    <p> On: {post.date} </p>
    <p> Last modified: {post.modified} </p>
  </div>
</Layout>
...

export const query = graphql`
  query($slug: String!) {
  {
    allWordpressPost {
      edges {
        node {
          ...
          modified(formatString: "MM-DD-YYYY")
        }
      }
    }
  }

بمجرد إضافة هذا ، ستتمكن من رؤية الطابع الزمني الأخير المعدل على صفحة نشر المدونة على Gatsby:

مشاركة gatsby مع الطابع الزمني الأخير المعدل 3

النشر مع آخر طابع زمني تم تعديله

الجميع يتحدث عن #Gatsby .. ولكن ما هو؟ 🤷‍♂️ تعرف على كيفية إنشاء مواقع ويب سريعة مدعومة من Gatsby + وورد بريس في هذا البرنامج التعليمي المتعمق! 🕴🚀

انقر للتغريد

ملخص

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

قم بتثبيت Gatsby لبناء موقع بداية

قم بتوصيل Gatsby بمصدر وورد بريس من خلال GraphQL

إنشاء قوالب لمنشورات المدونة

قم باستيراد جميع صورك من وورد بريس

اعرض آخر طابع زمني تم تعديله من وورد بريس

الآن ، دورك: هل لعبت حول Gatsby؟ ما هي تجربتك معها؟ قل لنا في التعليقات!

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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