gatsby starter gcn

غاتسبي كاتب-gcn

قالب أولي لإنشاء مواقع ويب ثابتة مذهلة باستخدام Gatsby وContentful وNetlify. مستوحاة من كاتب المحتوى غاتسبي.

سمات

• تكامل المحتوى مع المحتوى النائب الجاهز للاستخدام
• تكامل Netlify بما في ذلك نموذج اتصال مُعد مسبقًا
• الحد الأدنى من التصميم سريع الاستجابة - مصنوع للتخصيص أو التمزيق
• منطق ترقيم الصفحات
• واجهة المستخدم الموضوع
• مكون صديق لكبار المسئولين الاقتصاديين
  • دعم مشاركة OpenGraph
  • إنشاء خريطة الموقع
• تحليلات جوجل
• تطبيق الويب التقدمي
• الدعم دون اتصال
• وحدة Gatsby القياسية لفحص Javascript باستخدام StandardJS
• دعم Stylelint للمكونات المصممة لمسح CSS في JS

تجريبي

https://gcn.netlify.app/

ابدء

ثَبَّتَ

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

أو عبر Gatsby CLI

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

إعداد المحتوى

1. قم بالتسجيل في Contentful وقم بإنشاء مساحة فارغة جديدة

2. yarn run setup

3. أدخل المعلومات المطلوبة لمساحة Contentful الخاصة بك والموجودة هنا: app.contentful.com → إعدادات المساحة → مفاتيح واجهة برمجة التطبيقات . ستحتاج إلى توفير مفتاح API قياسي (علامة التبويب الأولى) ومفتاح إدارة (علامة التبويب الثانية).

التخصيص

بيانات الموقع

تحرير بيانات siteMeta في /src/gatsby-config.js

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

ملاحظة: إذا لم تنعكس التغييرات التي قمت بها عند التطوير محليًا، فقد تحتاج إلى تشغيل yarn clean متبوعًا بإعادة تشغيل الخادم عبر yarn develop .

واجهة المستخدم الموضوع

تحرير /src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

باستخدام معيار غاتسبي

1. تحقق بسرعة من التعليمات البرمجية الخاصة بك بحثًا عن الأخطاء باستخدام البرنامج النصي yarn test
2. يمكنك عرض Gatsby Standard README للحصول على تفاصيل حول كيفية دمج وحدات Gatsby Standard وStylint وPrettier المضمنة في هذا المشروع في محرر النصوص الخاص بك

المحتوى وكبار المسئولين الاقتصاديين

1. يمكنك استبدال ملفات share.jpg و favicon.png في الدليل static/images .
2. يتم تعريف الأوصاف التعريفية في Contentful. إذا اخترت ترك هذا الحقل فارغًا في المشاركات الجديدة، فسيتم استخدام مقتطف مكون من 320 حرفًا من المنشور/الصفحة بدلاً من ذلك.

النشر

النشر اليدوي لـ Netlify

1. تشغيل gatsby build

2. قم بسحب وإسقاط المجلد /public/ في Netlify

نشر Netlify من Git (مستحسن)

1. موقع Netlify الجديد من Git

2. تواصل مع GitHub وحدد الريبو الخاص بك

3. انتقل إلى Netlify: الإعدادات → البناء والنشر → إنشاء متغيرات البيئة . أضف متغيرات البيئة التالية باستخدام Space ID وContent Delivery API - رمز الوصول من Contentful. بالإضافة إلى ذلك، إذا رغبت في ذلك، يمكنك إدخال معرف Google Analytics. يجب تسمية المتغيرات بهذا الشكل تمامًا حتى تعمل بشكل صحيح.

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. انتقل إلى Netlify: ينشر . انقر فوق Trigger deploy لتشغيل النشر يدويًا للتأكد من إنشاء موقع الويب بنجاح باستخدام متغيرات بيئة البناء الخاصة بك. في هذه المرحلة، عليك أن تدرك أنه في كل مرة تقوم فيها بالضغط master عملية النشر، سيبدأ النشر تلقائيًا ويتم نشره في مرحلة الإنتاج.

إعدادات إضافية

الرد التلقائي على الويب (اختياري)

1. انتقل إلى Netlify: الإعدادات ← البناء والنشر ← إنشاء الخطافات . قم بإنشاء خطاف بناء جديد.

2. انتقل إلى Contentful: app.contentful.com → إعدادات المساحة → Webhooks . قم بإنشاء خطاف ويب باستخدام عنوان URL الخاص ببناء Netlify الذي قمت بإنشائه للتو وقم بتكوين الأحداث التي يجب أن تؤدي إلى إنشاء البناء على الإنتاج. على سبيل المثال، سيقوم ما يلي بإعادة بناء موقع الإنتاج في كل مرة يتم فيها نشر منشور أو صفحة أو إلغاء نشرها أو حذفها:

إشعارات نموذج Netlify (اختياري)

1. انتقل إلى Netlify: النماذج → الإشعارات

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

نصائح مفيدة

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