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

توضح هذه المقالة كيفية إنشاء تطبيق ويب Hugo ونشره في Azure Static Web Apps. النتيجة النهائية هي Azure Static Web App جديد مع إجراءات GitHub المقترنة التي تمنحك التحكم في كيفية إنشاء التطبيق ونشره.

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

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

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

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

• حساب Azure مع اشتراك نشط. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• حساب GitHub. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• تم تثبيت إعداد Git. إذا لم يكن لديك واحد، يمكنك تثبيت Git.

إنشاء تطبيق Hugo

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

1. اتبع دليل التثبيت ل Hugo على نظام التشغيل الخاص بك.

2. قم بفتح محطة طرفية

3. قم بتشغيل Hugo CLI لإنشاء تطبيق جديد.

   hugo new site static-app
   

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

   cd static-app
   

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

   git init
   

6. تأكد من تسمية mainفرعك .

   git branch -M main
   

7. بعد ذلك، أضف نسقا إلى الموقع عن طريق تثبيت نسق كنموذج فرعي git ثم تحديده في ملف تكوين Hugo.

   git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
   echo 'theme = "ananke"' >> config.toml
   

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

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

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

تحتاج إلى مستودع على GitHub للاتصال ب Azure Static Web Apps. توضح لك الخطوات التالية كيفية إنشاء مستودع لموقعك.

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

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

   git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
   

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

   git push --set-upstream origin main
   

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

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

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

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

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

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

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

5. حدد إنشاء.

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

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

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

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

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

   ملاحظة

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

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

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

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

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

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

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

   

إصدار Hugo المخصص

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

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - 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" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

النشر البديل باستخدام واجهة سطر الأوامر (CLI) الخاصة ب SWA

إذا كان تطبيق Hugo الخاص بك يحتوي على تبعيات تتطلب إعدادا إضافيا، مثل وحدات GoLang، فيمكنك استخدام Azure Static Web Apps CLI للنشر مباشرة. فيما يلي مثال على سير عمل GitHub Actions الذي يقوم بتثبيت CLI ونشر التطبيق الخاص بك:

jobs:
   build_and_deploy_job:
      runs-on: ubuntu-latest
      name: Build and Deploy with SWA CLI
      steps:
         - name: Checkout code
            uses: actions/checkout@v3
            with:
               submodules: true

         - name: Install SWA CLI
            run: npm install -g @azure/static-web-apps-cli

         - name: Build Hugo site
            run: |
               # Install Hugo modules
               hugo mod get

               # Minify the supported output formats
               hugo --minify

         - name: Deploy with SWA CLI
            env:
               AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
            run: |
               swa deploy ./public --api-location ./api --env production

يقوم سير العمل هذا بإنشاء موقع Hugo ونشره باستخدام Azure Static Web Apps CLI. يفترض أن go.mod الملف موجود في الدليل الجذر لمشروعك لإدارة التبعيات وتكوينات الوحدة النمطية.

استخدام ميزة Git Info في تطبيق Hugo الخاص بك

إذا كان تطبيق Hugo الخاص بك يستخدم ميزة Git Info، فإن ملف سير العمل الافتراضي الذي تم إنشاؤه ل Static Web App يستخدم إجراء GitHub للسحاف لإحضار إصدار سطحي من مستودع Git الخاص بك، مع عمق افتراضي يبلغ 1. في هذا السيناريو، يرى Hugo جميع ملفات المحتوى الخاصة بك على أنها قادمة من تثبيت واحد، لذلك لديهم نفس الكاتب والطوابع الزمنية للتعديل الأخير والمتغيرات الأخرى .GitInfo .

قم بتحديث ملف سير العمل لإحضار محفوظات Git الكاملة عن طريق إضافة معلمة actions/checkout جديدة ضمن الخطوة لتعيين fetch-depth إلى 0 (بلا حد):

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

يؤدي إحضار المحفوظات الكاملة إلى زيادة وقت الإنشاء لسير عمل GitHub Actions، ولكن .Lastmod المتغيرات و .GitInfo دقيقة ومتاحة لكل ملف من ملفات المحتوى.

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

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

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

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

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