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

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

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

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

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

المتطلبات

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

إنشاء تطبيق Jekyll

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

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

   jekyll new static-app
   

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

   cd static-app
   

3. تهيئة مستودع Git جديد.

    git init
   

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

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

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

تستخدم Azure Static Web Apps 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 والبيئات المرحلية	حدد أقرب منطقة إليك.
   مصدر	GitHub

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

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

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

   ‏‫ملاحظة

   إذا لم تشاهد أي مستودعات، فقد تحتاج إلى تخويل Azure Static Web Apps على GitHub. استعرض للوصول إلى مستودع GitHub وانتقل إلى Settings > 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. افتح مدخل Microsoft Azure
2. في شريط البحث العلوي، ابحث عن تطبيقك بالاسم الذي قدمته سابقًا
3. انقر فوق التطبيق
4. انقر فوق الزر حذف
5. انقر فوق نعم لتأكيد إجراء الحذف

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

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