
بداية صفحة مقصودة بسيطة وبسيطة وسهلة الاستخدام بدون كل أنواع الأجراس والصفارات المثبت عليها والتي سيتعين عليك إزالتها لاحقًا. قم بإنشاء صفحة مقصودة جميلة وسريعة للغاية من قالب مجرد بصفحة واحدة تبدو جيدة بالفعل.
إذا لم تكن قد قمت بتثبيت Gatsby CLI بعد، فقم بذلك أولاً.
npm install --global gatsby-cliيستخدم Gatsby CLI Node وnpm والتي ستحتاج أيضًا إلى تثبيتها. يمكن العثور على مزيد من المعلومات على GatsbyJS.org.
قم بتثبيت المبدئ باستخدام أمر Gatsby الجديد.
gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.gitانتقل إلى دليل المشروع وابدأ تشغيل الموقع.
cd landing-page && gatsby developسيتم فتح الموقع في متصفحك الافتراضي على http://localhost:8000
قم بتحرير التعليمات البرمجية في /src ، واحفظ تغييراتك، وسيتم إعادة تحميلها على الفور في المتصفح.
يأتي الحد الأدنى من بداية الصفحة المقصودة مع عدد قليل من المكونات الإضافية المثبتة بالفعل، ولكن تركيزها الأساسي ينصب على البقاء بسيطًا ومظهرًا نظيفًا. يتم تضمين هذه الأشياء بشكل افتراضي:
src/images تلقائيًا بواسطة البرنامج المساعد gatsby-image ويمكن سحبها إلى مكونات ذات تحميل بطيء وتأثيرات ضبابيةgatsby-config.js لبدء تتبع زوار الموقع تلقائيًاgatsby-plugin-sitemapsrc/styles/constants.js على مجموعة من الألوان والأنماط الافتراضية التي يتم تطبيقها بشكل مضمّن على المكونات الموجودة على الموقع والتي يمكن تجاوزها باستخدام الأنماط الخاصة بك إذا كنت تريد تجربة اللعب بالكود المصدري في ساحة اللعب عبر الإنترنت، فيمكنك فتح الريبو في Codesandox باستخدام هذا الزر.
إذا كنت تريد فقط رؤية موقع على الإنترنت بسرعة كبيرة، فيمكنك نشر نسخة من الموقع على Netlify باستخدام هذا الزر.
لإنشاء بنية محسنة للموقع، قم بتشغيل هذا الأمر
gatsby build سيتم تجميع مجلد /public بحيث يمكن نشره على خدمة مثل Netlify أو Surge أو GitHub Pages أو AWS S3 أو استضافة Firebase أو خادم الملفات الخاص بك.