Azure Static Web Apps'e Jekyll sitesi dağıtma

Bu makalede, Azure Static Web Apps'te Jekyll web uygulaması oluşturma ve dağıtma işlemleri gösterilmektedir.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

• Jekyll web sitesi oluşturma
• Azure Static Web Apps kaynağı ayarlama
• Jekyll uygulamasını Azure'a dağıtma

Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı oluşturun.

Önkoşullar

• Jekyll'i yükleme
  • Linux için Windows Alt Sistemi kullanabilir ve gerekirse Ubuntu yönergelerini izleyebilirsiniz.
• Etkin aboneliği olan bir Azure hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Bir GitHub hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Yüklü bir Git kurulumu. Yoksa Git'i yükleyebilirsiniz.

Jekyll Uygulaması Oluşturma

Jekyll Komut Satırı Arabirimini (CLI) kullanarak bir Jekyll uygulaması oluşturun:

1. Terminalden Jekyll CLI'yi çalıştırarak yeni bir uygulama oluşturun.

   jekyll new static-app
   

2. Yeni oluşturulan uygulamaya gidin.

   cd static-app
   

3. Yeni bir Git deposu başlatın.

    git init
   

4. Değişiklikleri gönderin.

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

Uygulamanızı GitHub'a gönderme

Azure Static Web Apps, web sitenizi yayımlamak için GitHub'ı kullanır. Aşağıdaki adımlarda GitHub deposu oluşturma adımları gösterilmektedir.

1. jekyll-azure-static adlı kaynaktan boş bir GitHub deposu oluşturun (README oluşturmayınhttps://github.com/new).

2. GitHub deposunu yerel deponuza uzak depo olarak ekleyin. Aşağıdaki komutta yer tutucu yerine GitHub kullanıcı adınızı eklediğinizden <YOUR_USER_NAME> emin olun.

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

3. Yerel deponuzu GitHub'a gönderin.

   git push --set-upstream origin main
   

   Dekont

   Git dalınızın adı değerinden mainfarklı olabilir. bu komuttaki değerini doğru değerle değiştirin main .

Web uygulamanızı dağıtma

Aşağıdaki adımlarda yeni bir statik site uygulaması oluşturma ve bunu üretim ortamına dağıtma adımları gösterilmektedir.

Uygulamayı oluşturma

1. Azure portal'a gidin

2. Kaynak Oluştur'u seçin

3. Statik Web Uygulamaları için arama yapın

4. Statik Web Uygulamaları'nı seçin

5. Oluştur'u seçin

6. Temel Bilgiler sekmesinde aşağıdaki değerleri girin.

   Özellik	Değer
   Abonelik	Azure aboneliğinizin adı.
   Kaynak grubu	jekyll-static-app
   Adı	jekyll-static-app
   Plan türü	Ücretsiz
   Azure İşlevleri API ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

7. GitHub ile oturum açın'ı seçin ve GitHub ile kimlik doğrulaması yapın.

8. Aşağıdaki GitHub değerlerini girin.

   Özellik	Değer
   Kuruluş	İstediğiniz GitHub kuruluşunu seçin.
   Depo	jekyll-static-app öğesini seçin.
   Dal	Ana öğesini seçin.

   Dekont

   Herhangi bir depo görmüyorsanız GitHub'da Azure Static Web Apps'i yetkilendirmeniz gerekebilir. GitHub deponuza gidin ve Ayarlar Uygulamalar Yetkili OAuth Uygulamaları'na gidin, Azure Statik Web Uygulamaları'nı ve ardından Ver'i seçin.>> Kuruluş depoları için, izinleri vermek için kuruluşun sahibi olmanız gerekir.

9. Derleme Ayrıntıları bölümünde, Derleme Ön Ayarları açılan listesinden Özel'i seçin ve varsayılan değerleri koruyun.

10. Uygulama konumu kutusuna ./. yazın.

11. Api konum kutusunu boş bırakın.

12. Çıkış konumu kutusuna _site girin.

Gözden geçir ve oluştur

1. Ayrıntıların doğru olduğunu doğrulamak için Gözden Geçir + Oluştur'u seçin.

2. App Service Statik Web Uygulaması'nın oluşturulmasını başlatmak ve dağıtım için bir GitHub Actions sağlamak için Oluştur'u seçin.

3. Dağıtım tamamlandıktan sonra Kaynağa git'i seçin.

4. Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısını seçin. GitHub Actions'ın tamamlanması için bir veya iki dakika beklemeniz gerekebilir.

   

Özel Jekyll ayarları

Statik bir web uygulaması oluşturduğunuzda, uygulamanın yayımlama yapılandırma ayarlarını içeren bir iş akışı dosyası oluşturulur.

gibi JEKYLL_ENVortam değişkenlerini yapılandırmak için iş akışındaki Azure Static Web Apps GitHub Actions'a bir env bölüm ekleyin.

- 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

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz, aşağıdaki adımları izleyerek Azure Statik Web Uygulaması kaynağını silebilirsiniz:

1. Azure portalı açın
2. Üstteki arama çubuğunda, uygulamanızı daha önce sağladığınız ada göre arayın
3. Uygulamaya tıklayın
4. Sil düğmesine tıklayın
5. Silme eylemini onaylamak için Evet'e tıklayın

Sonraki adımlar

Özel etki alanı ekleme