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

مقالة
01/10/2024

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

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

إنشاء تطبيق Hugo
إعداد تطبيقات ويب ثابتة Azure
نشر تطبيق Hugo في Azure

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

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

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

إنشاء تطبيق Hugo

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

اتبع دليل التثبيت لتثبيت تطبيق Hugo على نظام التشغيل الخاص بك.
قم بفتح محطة طرفية
يُرجى تشغيل واجهة سطر الأوامر في Hugo لإنشاء تطبيق جديد.
```
hugo new site static-app
```
انتقل إلى التطبيق الذي تم إنشاؤه حديثا.
```
cd static-app
```
قم بتهيئة مستودع Git.
```
git init
```
احرص على تسمية الفرع الخاص بك بـ main.
```
git branch -M main
```
بعد ذلك، أضف سمة إلى الموقع عن طريق تثبيت سمة على هيئة وحدة فرعية لـ git ثم تحديدها في ملف تكوين Hugo.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```

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

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

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

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

أنشئ مستودع GitHub فارغًا (لا تقم بإنشاء README) من https://github.com/new اسمه hugo-static-app.
إضافة مستودع GitHub كمستودع ناءٍ إلى مستودعك المحلي. تأكد من إضافة اسم مستخدم GitHub بدلاً من العنصر النائب <YOUR_USER_NAME> في الأمر التالي.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
```
ادفع مستودعك المحلي إلى GitHub.
```
git push --set-upstream origin main
```

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

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

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

انتقل إلى مدخل Azure
حدد إنشاء مورد
البحث عن Static Web Apps
حدد تطبيقات الويب الثابتة
حدد إنشاء.

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

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

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

الخاصية القيمة

المنظمة حدد مؤسسة GitHub المطلوبة.

المستودع حدد hugo-static-app.

الفرع حدد "main".

إشعار

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

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

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

حدد Review + Create للتحقق من صحة التفاصيل.
حدد Create لبدء إنشاء App Service Static Web App وتوفير GitHub Actions للنشر.
بمجرد اكتمال النشر، حدد Go to resource.
في شاشة المورد، حدد رابط URL لفتح التطبيق المنشور. قد تحتاج إلى الانتظار دقيقة أو دقيقتين حتى تكتمل إجراءات GitHub.

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

عندما تقوم بإنشاء تطبيق ويب ثابت، يتم إنشاء ملف سير عمل يحتوي على إعدادات تكوين النشر للتطبيق. يمكنك تعيين إصدار Hugo معين في ملف سير العمل عن طريق توفير قيمة HUGO_VERSION في القسم env. يوضح تكوين المثال التالي كيفية تعيين 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

استخدام ميزة 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 من خلال الخطوات التالية:

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

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

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

Share via