كيفية استضافة موقع Angular باستخدام Netlify و GitHub

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

إذا قمت بتخزين نسخة من رمز مصدر موقع الويب الخاص بك في مستودع GitHub ، فيمكنك استخدام Netlify لاستضافة هذا الموقع.

تقوم Netlify أيضًا بإعادة نشر موقعك تلقائيًا عندما تدفع أي تغييرات جديدة إلى فرع المستودع الذي تستضيفه.

كيفية إنشاء مثال أساسي لتطبيق Angular

يمكنك إنشاء تطبيق Angular بسيط باستخدام محرر مثل Visual Studio Code. يمكنك بعد ذلك استضافة موقع الويب هذا باستخدام Netlify.

1. إنشاء تطبيق Angular الجديد.
2. قم بإنشاء صفحة رئيسية بسيطة. استبدل الكود الموجود في ملف app.component.html ملف بمحتوى الصفحة المقصودة التالية:

   <فئة div ="رأس حاوية معتم">
   <h2>موقع أعمالنا</h2>
   </div>
   <فئة div ="حاوية بيضاء">
   <فئة div ="محتوى">
   <h2>موقع أعمالنا
   
   
   
   
   
   instagram viewer
   
   </h2>
   <ص>تعرف على كيفية تصميم موقع الويب الاحترافي الخاص بك وتطويره وصيانته في لمح البصر.</ ص>
   </div>
   </div>
   <فئة div ="حاوية برتقالية">
   <فئة div ="محتوى">
   <h2>الذي نفعله</h2>
   <ص>نقدم لك الأدوات اللازمة لتطوير مواقع الويب والحلول الفريدة لعملائك. نحن نقدم أيضًا تدريبًا لـ
    الصيانة والمواضيع الأخرى ذات الصلة بالموقع.</ ص>
   </div>
   </div>
   <فئة div ="حاوية بيضاء">
   <فئة div ="محتوى">
   <h2>معلومات عنا</h2>
   <ص>نحن شركة صغيرة تعمل من ملبورن ، أستراليا. تم تصميم مساحاتنا بشكل فريد حتى يتمكن العملاء أيضًا من ذلك
    قم بزيارتنا شخصيًا.</ ص>
   </div>
   </div>
   <فئة div ="تذييل حاوية معتم">
   <ص>حقوق الطبع والنشر 2022</ ص>
   </div>

3. أضف بعض الأنماط إلى تطبيق Angular عن طريق إضافة بعض CSS إلى ملف app.component.css ملف:

   * {
    خط العائلة: "اريال"، بلا الرقيق؛
   }
   .header {
    الحشو: 30 بكسل 50 بكسل ؛
   }
   .تذييل {
    الحشو: 5 بكسل 50 بكسل ؛
    محاذاة النص: مركز ؛
   }
   .container-dark {
    لون الخلفية: رقم 202C39 ؛
    اللون الابيض؛
    العرض: فليكس ؛
    محاذاة العناصر: مركز ؛
   }
   .container-orange {
    لون الخلفية: # FFD091 ؛
    لون: رقم 202C39 ؛
   }
   .container-white {
    لون الخلفية: whitesmoke.
    لون: رقم 202C39 ؛
   }
   .محتوى {
    الحشو: 100 بكسل 25٪ ؛
    العرض: فليكس ؛
    الاتجاه المرن: العمود.
    ارتفاع الخط: 2rem ؛
   حجم الخط: 1.2em;
    محاذاة العناصر: مركز ؛
    محاذاة النص: مركز ؛
   }

4. أضف بعض الأنماط لتطبيق Angular العام بتنسيق Styles.css:

   جسم {
    الهامش: 0؛
    حشوة: 0 ؛
   }

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

   يخدم ng

6. انتظر حتى يتم تجميع التعليمات البرمجية الخاصة بك ، وقم بزيارة http://localhost: 4200/ في متصفح الويب لعرض تطبيقك.
7. في ال .browserslistrc ملف ، قم بإزالة iOS Safari الإصدار 15.2-15.3. سيؤدي هذا إلى منع ظهور أخطاء التوافق في وحدة التحكم عند إنشاء المشروع.

   آخر إصدار كروم
   آخر إصدار واحد من فايرفوكس
   آخر إصدارين رئيسيين من Edge
   آخر إصدارين رئيسيين من Safari
   آخر إصدارين رئيسيين لنظام iOS
   Firefox ESR
   لاios_saf 15.2-15.3
   لاسفاري 15.2-15.3

8. قم ببناء الكود الخاص بك باستخدام بناء نانوغرام الأمر في المحطة:

   بناء نانوغرام

9. في ال .gitignore ملف أو إزالة أو التعليق خارج /dist خط. ستضمن إزالته حي المجلد موجود في مجموعة الملفات التي تدفعها إلى مستودع GitHub الخاص بك.

   # / dist

كيفية دفع الكود الزاوي إلى جيثب

ستحتاج إلى تخزين الكود الخاص بك في مستودع بعيد لـ Netlify للوصول إلى كود المصدر.

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

1. قم بإنشاء مستودع جديد على جيثب. يمكنك القيام بذلك عن طريق تسجيل الدخول إلى GitHub والنقر فوق جديد.
2. أدخل تفاصيل المستودع الجديد الخاص بك. أعطه اسمًا مثل "netlify-app" ووصف. لا تقم بتهيئة المستودع باستخدام ملف README أو ملف .gitignore أو ترخيص.
3. في محطة على جهاز الكمبيوتر الخاص بك ، انتقل إلى الدليل حيث قمت بتخزين تطبيق Angular الخاص بك. قم بتشغيل الأوامر التالية لتهيئة المجلد الخاص بك كمستودع git:

   بوابة الحرف الأول
   بوابة إضافة.
   شخص سخيف يقترف م "أولا يقترف"

4. ادفع الكود الموجود داخل هذا المجلد إلى المستودع البعيد الجديد الذي أنشأته على GitHub. اتبع ال git remote add original, فرع بوابة، و دفع بوابة الأوامر التي يوفرها GitHub في صفحة المستودع البعيد:

   git remote add original <رابط GitHub repo الخاص بك>
   فرع بوابة-M الرئيسي
   بوابة دفع -u الأصل الرئيسي

5. يمكنك التأكد من أن رمز تطبيق Angular موجود الآن في مستودع GitHub البعيد عن طريق تحديث صفحة مستودع GitHub.

كيفية استخدام Netlify لاستضافة التعليمات البرمجية الخاصة بك

لاستضافة التعليمات البرمجية الخاصة بك باستخدام Netlify ، ستحتاج إلى منحها حق الوصول إلى كود مصدر GitHub الخاص بك. سيستخدم Netlify بعد ذلك ملف حي مجلد مشروع Angular الخاص بك لنشر الإصدار المدمج من التعليمات البرمجية الخاصة بك.

يمكنك تكوين كل هذه الإعدادات باتباع خطوات التكوين عند إنشاء موقع جديد:

1. تسجيل الدخول أو الاشتراك في نيتليفاي. يمكنك القيام بذلك باستخدام بيانات اعتماد GitHub الخاصة بك.
2. من لوحة المعلومات الرئيسية وصفحة قائمة المواقع ، قم بتوسيع إضافة موقع جديد، واختر استيراد مشروع موجود.
3. يختار جيثب.
4. انقر فوق قم بتكوين Netlify على GitHub.
5. انقر فوق ثَبَّتَ.
6. سيعرض Netlify قائمة من مستودعات GitHub الخاصة بك. حدد الشخص الذي ترغب في استضافته. على سبيل المثال ، إذا قمت بتسمية المستودع الخاص بك "netlify-app" ، فحدد "netlify-app" من القائمة.
7. في شاشة التكوين ، اترك ملف مالك، فرع للنشر، و الدليل الأساسي الحقول بقيمها الافتراضية. إذا كنت تنشر فرعًا معينًا ، مثل فرع "إنتاج" منفصل ، فيمكنك إضافته إلى فرع للنشر مجال. غير ال بناء القيادة حقل "بناء نانوغرام". بالنسبة إلى نشر الدليل حقل ، اكتب dist /. إذا كنت لا تعرف اسم المشروع ، فيمكنك الانتقال إلى مجلد dist الخاص بمشروعك للعثور عليه هناك. على سبيل المثال ، "dist / netlify-app".
8. انقر فوق نشر الموقع.
9. انتظر لحين اكتمال النشر. قد يستغرق هذا بضع دقائق ، وقد تحتاج إلى تحديث الصفحة. إذا سارت الأمور على ما يرام ، فستتمكن من رؤية النشر الناجح في قائمة النشر. انقر فوق النشر المنشور ، على سبيل المثال ، الإنتاج: main @ HEAD.
10. اضغط على نشر الإنتاج المفتوح زر.
11. يمكنك الآن عرض موقع الويب الخاص بك في علامة تبويب أخرى ، باستخدام عنوان URL بتنسيق .netlify.app. إذا كنت تستضيف موقع ويب به عمليات إعادة توجيه متعددة ، فقد لا تتمكن من إعادة التوجيه إلى صفحات أخرى. في هذه الحالة ، هناك طريقة إصلاح إعادة توجيه فاشلة على Netlify. إذا كنت تريد ، يمكنك أيضًا تعديل اسم المجال المجاني الخاص بك.

استضافة موقع الويب الخاص بك باستخدام GitHub و Netlify

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

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