بداية صفحة مقصودة بسيطة وبسيطة وسهلة الاستخدام بدون كل أنواع الأجراس والصفارات المثبت عليها والتي سيتعين عليك إزالتها لاحقًا. قم بإنشاء صفحة مقصودة جميلة وسريعة للغاية من قالب مجرد بصفحة واحدة تبدو جيدة بالفعل.
إذا لم تكن قد قمت بتثبيت 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-sitemap
src/styles/constants.js
على مجموعة من الألوان والأنماط الافتراضية التي يتم تطبيقها بشكل مضمّن على المكونات الموجودة على الموقع والتي يمكن تجاوزها باستخدام الأنماط الخاصة بك إذا كنت تريد تجربة اللعب بالكود المصدري في ساحة اللعب عبر الإنترنت، فيمكنك فتح الريبو في Codesandox باستخدام هذا الزر.
إذا كنت تريد فقط رؤية موقع على الإنترنت بسرعة كبيرة، فيمكنك نشر نسخة من الموقع على Netlify باستخدام هذا الزر.
لإنشاء بنية محسنة للموقع، قم بتشغيل هذا الأمر
gatsby build
سيتم تجميع مجلد /public
بحيث يمكن نشره على خدمة مثل Netlify أو Surge أو GitHub Pages أو AWS S3 أو استضافة Firebase أو خادم الملفات الخاص بك.