react gh pages

نشر تطبيق React* على صفحات github

* تم إنشاؤه باستخدام create-react-app

مقدمة

في هذا البرنامج التعليمي ، سأريكم كيف يمكنك إنشاء تطبيق React ونشره على صفحات GitHub.

لإنشاء تطبيق React ، سأستخدم create-react-app ، وهي أداة يمكن للأشخاص استخدامها لإنشاء تطبيق React من نقطة الصفر. لنشر تطبيق React ، سأستخدم gh-pages ، وهي حزمة NPM التي يمكن للأفراد استخدامها لنشر الأشياء على صفحات GitHub ، وهي خدمة استضافة ويب مجانية تقدمها GitHub.

إذا اتبعت مع هذا البرنامج التعليمي ، فسوف ينتهي بك الأمر بتطبيق React جديد - تم استئصاله على صفحات GitHub - والتي يمكنك تخصيصها بعد ذلك.

الترجمات

تمت ترجمة هذا البرنامج التعليمي من لغته الإنجليزية الأصلية إلى اللغات التالية:

• الصينية التقليدية (الائتمان: @creper9487)

درس تعليمي

المتطلبات الأساسية

1. يتم تثبيت العقدة و NPM. فيما يلي الإصدارات التي سأستخدمها أثناء صنع هذا البرنامج التعليمي:

   $ node --version
   v16.13.2
   
   $ npm --version
   8.1.2

   يضيف تثبيت NPM أمرين إلى النظام - npm و npx - كلاهما سأستخدمه أثناء صنع هذا البرنامج التعليمي.

2. تم تثبيت GIT. إليك الإصدار الذي سأستخدمه أثناء صنع هذا البرنامج التعليمي:

   $ git --version
   git version 2.29.1.windows.1

3. حساب github.

إجراء

1. إنشاء مستودع فارغ على جيثب

1. تسجيل الدخول إلى حساب github الخاص بك.
2. قم بزيارة نموذج إنشاء مستودع جديد.
3. املأ النموذج على النحو التالي:

   • اسم المستودع: يمكنك إدخال أي اسم تريده*.

     * لموقع المشروع ، يمكنك إدخال أي اسم تريده. بالنسبة لموقع المستخدم ، يتطلب Github أن يكون لاسم المستودع التنسيق التالي: {username}.github.io (على سبيل المثال gitname.github.io )

     سيظهر الاسم الذي تدخله في أماكن قليلة: (أ) في الإشارات إلى المستودع في جميع أنحاء Github ، (ب) في عنوان URL للمستودع ، و (ج) في عنوان URL لتطبيق React الذي تم نشره.

     في هذا البرنامج التعليمي ، سأقوم بنشر تطبيق React كموقع للمشروع.

     سأدخل: react-gh-pages

   • خصوصية المستودع: حدد عامًا (أو خاصًا *).

     * بالنسبة للمستخدمين المجانيين ، فإن النوع الوحيد من المستودعات التي يمكن استخدامها مع صفحات GitHub عامة . بالنسبة لمستخدمي GitHub Pro (وغيرهم من المستخدمين الذين يدفعون) ، يمكن استخدام كل من المستودعات العامة والخاصة مع صفحات GitHub.

     سأختار: عام

   • تهيئة المستودع: اترك جميع مربعات الاختيار فارغة.

     سيجعل ذلك Github ينشئ مستودعًا فارغًا ، بدلاً من تحريك المستودع مسبقًا باستخدام ملف README.md و .gitignore و/أو LICENSE .

4. إرسال النموذج.

في هذه المرحلة ، يحتوي حساب GitHub الخاص بك على مستودع فارغ ، له اسم ونوع الخصوصية الذي حددته.

2. إنشاء تطبيق React

1. قم بإنشاء تطبيق React يدعى my-app :

   في حال كنت ترغب في استخدام اسم مختلف من my-app (على سبيل المثال web-ui ) ، يمكنك تحقيق ذلك من خلال استبدال جميع حوادث my-app في هذا البرنامج التعليمي ، مع هذا الاسم الآخر (أي my-app > web-ui ).

   $ npx create-react-app my-app

   سيقوم هذا الأمر بإنشاء تطبيق React مكتوب في JavaScript. لإنشاء واحدة مكتوبة في TypeScript ، يمكنك إصدار هذا الأمر بدلاً من ذلك:

   $ npx create-react-app my-app --template typescript

   سيقوم هذا الأمر بإنشاء مجلد جديد يسمى my-app ، والذي سيحتوي على الكود المصدري لتطبيق React.

   بالإضافة إلى احتواء الكود المصدري لتطبيق React ، فإن هذا المجلد هو أيضًا مستودع GIT. ستلعب تلك المميزة للمجلد في الخطوة 6.

   أسماء الفروع: master مقابل main

   سيكون لمستودع GIT فرعًا واحدًا ، سيتم تسميته إما (أ) master ، الافتراضي لتركيب GIT جديد ؛ أو (ب) قيمة متغير تكوين GIT ، init.defaultBranch ، إذا كان جهاز الكمبيوتر الخاص بك يعمل GIT الإصدار 2.28 أو لاحقًا وقمت بتعيين هذا المتغير في تكوين GIT الخاص بك (على سبيل المثال عبر $ git config --global init.defaultBranch main ) .

   نظرًا لأنني لم أقم بتعيين هذا المتغير في تثبيت GIT الخاص بي ، فسيتم تسمية الفرع في master مستودعتي. في حالة حصول الفرع في مستودعك على اسم مختلف (يمكنك التحقق منه عن طريق تشغيل $ git branch ) ، مثل main ؛ يمكنك استبدال جميع حوادث master خلال الفترة المتبقية من هذا البرنامج التعليمي ، مع هذا الاسم الآخر (على سبيل المثال master → main ).

2. أدخل المجلد الذي تم إنشاؤه حديثًا:

   $ cd my-app

في هذه المرحلة ، يوجد تطبيق React على جهاز الكمبيوتر الخاص بك وأنت في المجلد الذي يحتوي على رمز المصدر الخاص به. يمكن تشغيل جميع الأوامر المتبقية الموضحة في هذا البرنامج التعليمي من هذا المجلد.

3. قم بتثبيت حزمة NPM gh-pages

1. قم بتثبيت حزمة NPM gh-pages وقم بتعيينها على أنها تبعية للتطوير:

   $ npm install gh-pages --save-dev

في هذه المرحلة ، يتم تثبيت حزمة NPM gh-pages على جهاز الكمبيوتر الخاص بك ويتم توثيق اعتماد تطبيق React عليه في ملف REACT App's package.json .

4. أضف خاصية homepage إلى ملف package.json

1. افتح ملف package.json في محرر نصوص.

   $ vi package.json

   في هذا البرنامج التعليمي ، محرر النص الذي سأستخدمه هو VI. يمكنك استخدام أي محرر نص الذي تريده ؛ على سبيل المثال ، رمز Visual Studio.

2. أضف خاصية homepage بالتنسيق*: https://{username}.github.io/{repo-name}

   * لموقع المشروع ، هذا هو التنسيق. بالنسبة لموقع المستخدم ، فإن التنسيق هو: https://{username}.github.io . يمكنك قراءة المزيد حول خاصية homepage في قسم "GitHub Pages" في وثائق create-react-app .

   {
     "name": "my-app",
     "version": "0.1.0",
   + "homepage": "https://gitname.github.io/react-gh-pages",
     "private": true,

في هذه المرحلة ، يتضمن ملف REACT App's package.json خاصية تسمى homepage .

5. أضف البرامج النصية للنشر إلى ملف package.json

1. افتح ملف package.json في محرر نصية (إذا لم يكن مفتوحًا بالفعل في واحد).

   $ vi package.json

2. أضف خاصية predeploy وخاصية deploy إلى كائن scripts :

   "scripts": {
   +   "predeploy": "npm run build",
   +   "deploy": "gh-pages -d build",
       "start": "react-scripts start",
       "build": "react-scripts build",

في هذه المرحلة ، يتضمن ملف REACT App's package.json البرامج النصية للنشر.

6. أضف "عن بُعد" يشير إلى مستودع جيثب

1. أضف "عن بُعد" إلى مستودع GIT المحلي.

   يمكنك القيام بذلك عن طريق إصدار أمر في هذا التنسيق:

   $ git remote add origin https://github.com/{username}/{repo-name}.git

   لتخصيص هذا الأمر لموقفك ، استبدل {username} باسم المستخدم github واستبدل {repo-name} باسم مستودع github الذي أنشأته في الخطوة 1.

   في حالتي ، سأركض:

   $ git remote add origin https://github.com/gitname/react-gh-pages.git

   يخبر هذا الأمر GIT حيث أريد أن يدفع الأشياء كلما كنت-أو حزمة gh-pages التي تعمل نيابة عني-تشير إلى أمر $ git push من داخل مستودع GIT المحلي هذا.

في هذه المرحلة ، يحتوي المستودع المحلي على "عن بُعد" يشير عنوان URL إلى مستودع GitHub الذي أنشأته في الخطوة 1.

7. ادفع تطبيق React إلى مستودع GitHub

1. ادفع تطبيق React إلى مستودع GitHub

   $ npm run deploy

   سيؤدي ذلك إلى deploy البرامج النصية predeploy ونشرها في package.json .

   تحت الغطاء ، سيقوم البرنامج النصي predeploy بإنشاء نسخة قابلة للتوزيع من تطبيق React وتخزينها في مجلد يسمى build . بعد ذلك ، سيدفع البرنامج النصي deploy محتويات هذا المجلد إلى التزام جديد على فرع gh-pages في مستودع GitHub ، مما يخلق هذا الفرع إذا لم يكن موجودًا بالفعل.

   افتراضيًا ، سيكون للالتزام الجديد في فرع gh-pages رسالة ملزمة لـ "التحديثات". يمكنك تحديد رسالة الالتزام المخصصة عبر خيار -m ، مثل هذا:

   $ npm run deploy -- -m " Deploy React app to GitHub Pages "

في هذه المرحلة ، يحتوي مستودع GitHub على فرع يسمى gh-pages ، والذي يحتوي على الملفات التي تشكل الإصدار القابل للتوزيع من تطبيق React. ومع ذلك ، لم نقم بتكوين صفحات github لخدمة تلك الملفات حتى الآن.

8. تكوين صفحات github

1. انتقل إلى صفحة إعدادات صفحات Github
   1. في متصفح الويب الخاص بك ، انتقل إلى مستودع github
   2. فوق متصفح الرمز ، انقر فوق علامة التبويب المسمى "الإعدادات"
   3. في الشريط الجانبي ، في قسم "الكود والأتمتة" ، انقر على "الصفحات"
2. تكوين إعدادات "الإنشاء والنشر" مثل هذا:
   1. المصدر : انتشر من فرع
   2. فرع :
      • الفرع: gh-pages
      • المجلد: / (root)
3. انقر على زر "حفظ"

هذا كل شيء! تم نشر تطبيق React على صفحات GitHub!

في هذه المرحلة ، يمكن الوصول إلى تطبيق React لأي شخص يزور عنوان URL homepage التي حددتها في الخطوة 4. على سبيل المثال ، يمكن الوصول إلى تطبيق React I الذي تم نشره على https://gitname.github.io/react-gh-m.

9. (اختياري) قم بتخزين رمز مصدر تطبيق React على Github

في خطوة سابقة ، دفعت حزمة NPM gh-pages إلى الإصدار القابل للتوزيع من تطبيق React إلى فرع يسمى gh-pages في مستودع GitHub. ومع ذلك ، لم يتم تخزين الكود المصدري لتطبيق React على Github.

في هذه الخطوة ، سأريكم كيف يمكنك تخزين الكود المصدر لتطبيق React على Github.

1. ارتكب التغييرات التي أجريتها أثناء اتباع هذا البرنامج التعليمي ، إلى الفرع master لمستودع GIT المحلي ؛ ثم ، ادفع هذا الفرع إلى الفرع master لمستودع GitHub.

   $ git add .
   $ git commit -m " Configure React app for deployment to GitHub Pages "
   $ git push origin master

   أوصي باستكشاف مستودع github في هذه المرحلة. سيكون لها فرعين: master و gh-pages . سيحتوي الفرع master على رمز مصدر تطبيق React ، بينما سيحتوي فرع gh-pages على الإصدار القابل للتوزيع من تطبيق React.

مراجع

1. دليل النشر الرسمي create-react-app
2. Github Blog: بناء ونشر صفحات github من أي فرع
3. الحفاظ على ملف CNAME عند استخدام مجال مخصص

ملحوظات

• شكر خاص لـ Github (الشركة) لتزويدنا بخدمة استضافة صفحات Github مجانًا.
• والآن ، حان الوقت لتحويل تطبيق React الافتراضي الذي تم إنشاؤه عن طريق create-react-app إلى شيء فريد!
• يتكون هذا المستودع من فرعين:
  • master - رمز المصدر لتطبيق React
  • gh-pages - تطبيق React الذي تم تصميمه من رمز المصدر هذا

المساهمين

بفضل هؤلاء الأشخاص للمساهمة في صيانة هذا البرنامج التعليمي.

تتم الحفاظ على هذه القائمة يدويًا - الآن - وتشمل (أ) كل شخص قدم طلب سحب تم دمجه في النهاية في master ، و (ب) كل شخص ساهم بطريقة مختلفة (على سبيل المثال تقديم ملاحظات بناءة) والذي وافق عليه أنا بما في ذلك في هذه القائمة.