نشر موقع Jekyll إلى Azure Static Web Apps

توضح هذه المقالة كيفية إنشاء ونشر تطبيق ويب Jekyll إلى تطبيقات الويب الثابت من Azure.

في هذا البرنامج التعليمي، تتعلم كيفية:

• إنشاء موقع Jekyll على الويب
• إعداد مورد تطبيقات ويب ثابت من Azure
• نشر تطبيق Jekyll لـ Azure

إذا لم يكن لديك اشتراك في Azure، فأنشئ حساب Azure مجاني قبل أن تبدأ.

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

• تثبيت Jekyll
  • يمكنك استخدام نظام Windows الفرعي لـ Linux واتباع تعليمات Ubuntu عند الضرورة.
• حساب Azure مع اشتراك نشط. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• حساب GitHub. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• تم تثبيت إعداد Git. إذا لم يكن لديك واحد، يمكنك تثبيت Git.

إنشاء تطبيق Jekyll

إنشاء تطبيق Jekyll باستخدام واجهة سطر الأوامر (CLI) لـ Jekyll:

1. من المحطة الطرفية، قم بتشغيل CLI لـ Jekyll لإنشاء تطبيق جديد.

   jekyll new static-app
   

2. انتقل إلى التطبيق الذي تم إنشاؤه حديثا.

   cd static-app
   

3. ابدأ تشغيل مستودع Git جديد.

    git init
   

4. التزم بالتغييرات.

   git add -A
   git commit -m "initial commit"
   

ادفع تطبيقك إلى GitHub

تطبيقات الويب الثابتة من Azure تستخدم GitHub لنشر موقعك على الويب. توضح الخطوات التالية كيفية إنشاء مستودع GitHub.

1. إنشاء مستودع GitHub فارغ (لا تقم بإنشاء README) من https://github.com/new بالاسم jekyll-azure-static.

2. إضافة مستودع GitHub كمستودع ناءٍ إلى مستودعك المحلي. تأكد من إضافة اسم مستخدم GitHub بدلاً من العنصر النائب <YOUR_USER_NAME> في الأمر التالي.

   git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
   

3. ادفع مستودعك المحلي إلى GitHub.

   git push --set-upstream origin main
   

   إشعار

   قد يكون اسم فرع git الخاص بك مختلفاً عن main. استبدل main في هذا الأمر بالقيمة الصحيحة.

قم بنشر تطبيق الويب الخاص بك

توضح لك الخطوات التالية كيفية إنشاء تطبيق موقع ثابت جديد ونشره في بيئة إنتاج.

قم بإنشاء التطبيق

1. انتقل إلى مدخل Azure

2. حدد إنشاء مورد

3. البحث عن Static Web Apps

4. حدد تطبيقات الويب الثابتة

5. حدد إنشاء.

6. في علامة التبويب Basics، أدخل القيم التالية.

   الخاصية	القيمة
   الاشتراك	اسم اشتراك Azure خاصتك.
   مجموعة الموارد	jekyll-static-app
   الاسم	jekyll-static-app
   نوع الخطة	الحره
   المنطقة ل Azure Functions API والبيئات المرحلية	حدد أقرب منطقة إليك.
   Source	GitHub

7. حدد Sign in with GitHub ثم قم بالمصادقة باستخدام GitHub.

8. أدخل قيم GitHub التالية.

   الخاصية	القيمة
   المنظمة	حدد مؤسسة GitHub المطلوبة.
   المستودع	حدد jekyll-static-app.
   الفرع	حدد "main".

   إشعار

   إذا لم تشاهد أي مستودعات، فقد تحتاج إلى تخويل Azure Static Web Apps على GitHub. استعرض للوصول إلى مستودع GitHub وانتقل إلى الإعدادات Applications > Authorized OAuth Apps، وحدد Azure Static Web Apps، ثم حدد Grant>. بالنسبة لمستودعات المؤسسة، يجب أن تكون مالكًا للمؤسسة لمنح الأذونات.

9. في مقطع Build Details، حدد Custom من القائمة المنسدلة Build Presets واحتفظ بالقيم الافتراضية.

10. في مربع موقع التطبيق، اكتب ./.

11. اترك مربع Api location فارغًا.

12. في مربع موقع الإخراج، اكتب _site.

المراجعة والإنشاء

1. حدد Review + Create للتحقق من صحة التفاصيل.

2. حدد Create لبدء إنشاء App Service Static Web App وتوفير GitHub Actions للنشر.

3. بمجرد اكتمال النشر، حدد Go to resource.

4. في شاشة المورد، حدد رابط URL لفتح التطبيق المنشور. قد تحتاج إلى الانتظار دقيقة أو دقيقتين حتى تكتمل إجراءات GitHub.

   

إعدادات Jekyll مخصصة

عندما تقوم بإنشاء تطبيق ويب ثابت، يتم إنشاء ملف سير عمل يحتوي على إعدادات تكوين النشر للتطبيق.

لتكوين متغيرات البيئة، مثل JEKYLL_ENV، أضف قسما env إلى Azure Static Web Apps GitHub Actions في سير العمل.

- name: Build And Deploy
   id: builddeploy
   uses: Azure/static-web-apps-deploy@v1
   with:
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
      repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
      action: "upload"
      ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
      # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

تنظيف الموارد

إذا كنت لن تستمر في استخدام هذا التطبيق، يمكنك حذف مورد تطبيق Azure Static Web من خلال الخطوات التالية:

1. في علامة تبويب جديدة، افتح مدخل Azure
2. في شريط البحث العلوي، ابحث عن تطبيقك بالاسم الذي قدمته سابقًا
3. انقر فوق التطبيق
4. انقر فوق الزر حذف
5. انقر فوق نعم لتأكيد إجراء الحذف

الخطوات التالية

إضافة مجال مخصص