يعد نشر تطبيقات Angular على صفحات GitHub طريقة رائعة لاستضافتها مجانًا. Angular هو إطار عمل JavaScript شائع لبناء تطبيقات ذات صفحة واحدة.

يحتوي Angular على واجهة سطر أوامر شاملة تدعم الإنشاء السريع والإعداد لتطبيقات JavaScript. يحتوي Angular CLI على العديد من الأوامر لإنشاء مكونات التطبيق وإنشائها وتقديمها وإنشاؤها.

يمكنك أيضًا استخدام CLI لنشر تطبيقات Angular لأهداف مختلفة ، بما في ذلك صفحات GitHub.

ماذا تحتاج

لتحقيق أقصى استفادة من هذا الدليل ، يجب أن تكون لديك المهارات والأدوات التالية:

  • يجب أن تكون على دراية أساسيات Angular، مثل مفهوم التطبيقات والإعدادات وعناوين URL وما إلى ذلك.
  • أنت مألوف أساسيات جيثب و Git ، مثل إنشاء حساب GitHub وإنشاء مستودع git (repo) وصفحات GitHub (صفحات GH).
  • لديك تطبيق Angular جاهز للنشر.
  • عنوان URL الأساسي الخاص بك على المسار الصحيح. عمليات النشر إلى صفحات GH تفشل بسبب تعيين base-href (عنوان url الأساسي) بشكل خاطئ.
  • حساب جيثب.
  • مستودع GitHub (repo) مع رمز التطبيق.

الآن بعد أن أصبح لديك كل هذه العناصر في مكانها ، فلنبدأ عملية النشر.

عملية النشر

للبدء ، يجب أن تكون قد أنشأت مستودع GitHub لمشروعك ودفعت الكود إلى ملف رئيسي / رئيسي فرع.

instagram viewer

بعد ذلك ، قم بإنشاء فرع صفحات GH.

1. قم بإنشاء فرع صفحات GH

سيساعدك هذا الاختراق في الحصول على رابط صفحات GH للمساعدة في تعيين قاعدة href.

أولاً ، قم بإنشاء صفحات GH في مستودعك المحلي باستخدام الأمر التالي:

بوابة فرع gh- صفحات

بعد ذلك ، تحقق من الفرع الرئيسي إلى صفحات GH لنقل جميع الكود.

بوابة الخروج gh- صفحات

بعد ذلك ، ادفع صفحات GH إلى GitHub لإنشاء فرع بعيد لصفحات GH.

git push origin gh-pages

في شريط الأدوات أسفل اسم الريبو ، انقر فوق الإعدادات> الصفحات.

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

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

3. قم بتثبيت Angular-CLI-GHpages

حزمة angular-cli-ghpages هي أداة يستخدمها Angular CLI لأغراض النشر.

انتقل مرة أخرى إلى مستودع المشروع المحلي الخاص بك. ثم قم بتثبيت وتشغيل angular-cli-ghpages باستخدام هذا الأمر:

ng إضافة angular-cli-ghpages

4. انشر التطبيق

لإنشاء التطبيق في مرحلة الإنتاج ، يجب عليك توصيله بخادم بعيد على GitHub.

قم بتكوين تطبيقك إلى خادم بعيد عن طريق تشغيل الأمر التالي:

ng publish --base-href = https://GithubUserName.github.io/GithubRepoName/

تذكر استبدال الرابط أعلاه بالرابط المباشر من صفحات GH

سيبدو البناء الناجح مثل الرسم التوضيحي أدناه:

بعد ذلك ، انتقل إلى GitHub وانقر على رابط صفحات GH لمشاهدة مشروعك المنشور.

تهانينا ، لقد قمت بنشر تطبيق Angular الخاص بك!

إذا كان الارتباط يعرض ملف README فقط ، فيرجى الرجوع إلى إعدادات صفحات GitHub GH. تأكد من أن الفرع المحدد هو صفحات gh وليس الفرع الرئيسي أو الفرع الرئيسي. ثم امنحه خمس دقائق وأعد التحميل. أحيانًا يستغرق GitHub وقتًا لعكس التغييرات.

لمعرفة المزيد حول كيفية استخدام Angular CLI في النشر ، تفضل بزيارة التوثيق الزاوي.

كيفية نشر تطبيق Angular على صفحات GitHub

هناك عدة طرق لنشر تطبيقات Angular على صفحات GH ، ولكن هذه الطريقة هي الأسهل. يمكنك إعداد رابط إعادة الشراء لصفحات GH واستخدامه مع Angular-CLI لنشر تطبيقك على صفحات GitHub.

هناك الكثير الذي يمكنك القيام به باستخدام Angular و Angular CLI. لا تتردد في الاستكشاف. استخدم CLI لنشر التطبيقات على صفحات GH لرؤية واستضافة تطبيقاتك مجانًا.