Öğretici: bir Jekyll sitesini Azure statik Web Apps yayımlama

Bu makalede, bir Jekyıll Web uygulamasının nasıl oluşturulacağı ve Azure statik Web Appsnasıl dağıtılacağı gösterilmektedir.

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

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

Önkoşullar

• Jekyıll 'yi yükler
  • Linux için Windows alt sistemini kullanabilir ve gerekirse Ubuntu yönergelerini izleyebilirsiniz.
• Etkin aboneliği olan bir Azure hesabı. Bir hesabınız yoksa, ücretsiz olarak bir hesap oluşturabilirsiniz.
• GitHub hesabı. Bir hesabınız yoksa, ücretsiz olarak bir hesap oluşturabilirsiniz.

Jekyıll uygulaması oluşturma

Jekyll komut satırı arabirimini (CLı) kullanarak bir Jekyll uygulaması oluşturun:

1. Terminalden yeni bir uygulama oluşturmak için Jekyıll CLı 'yi çalıştırın.

   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 işleyin.

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

Uygulamanızı GitHub 'a gönderme

Azure statik Web Apps, Web sitenizi yayımlamak için GitHub 'ı kullanır. Aşağıdaki adımlarda bir GitHub deposunun nasıl oluşturulacağı gösterilmektedir.

1. https://github.com/new Jekyıll-Azure-static adlı dosyadan boş bir GITHUB deposu (Benioku dosyası oluşturmayın) oluşturun.

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

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

3. Yerel depoyu GitHub 'a iletin.

   git push --set-upstream origin main
   

   Not

   Git dalınız farklı şekilde adlandırılmış olabilir main . mainBu komutta yerine doğru değeri koyun.

Web uygulamanızı dağıtın

Aşağıdaki adımlarda, yeni bir statik site uygulamasının nasıl oluşturulacağı ve bir üretim ortamına nasıl dağıtılacağı gösterilmektedir.

Uygulama oluşturma

1. Azure portalına gidin

2. Kaynak oluştur ' u seçin

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

4. Statik Web Apps seçin

5. Oluştur’u seçin

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

   Özellik	Değer
   Abonelik	Azure abonelik adınız.
   Kaynak grubu	jekyıll-static-App
   Ad	jekyıll-static-App
   Plan türü	Ücretsiz
   Azure Işlevleri API 'SI ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

7. GitHub Ile oturum açma ve GitHub ile kimlik doğrulama ' yı seçin.

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

   Özellik	Değer
   Kuruluş	İstediğiniz GitHub kuruluşunuzu seçin.
   Depo	Jekyıll-static-App öğesini seçin.
   Dal	Ana öğesini seçin.

9. Yapı ayrıntıları bölümünde, derleme ön ayarları açılır 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 tümünün doğru olduğunu doğrulamak için gözden geçir + oluştur düğmesini seçin.

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

3. Dağıtım tamamlandıktan sonra, kaynak ' a gidin.

4. Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısına tıklayın. GitHub eyleminin tamamlanabilmesi için bir dakika veya iki dakika beklemeniz gerekebilir.

   

Özel Jekyıll ayarları

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

Gibi ortam değişkenlerini yapılandırmak için JEKYLL_ENV , env Iş akışındaki Azure statik Web Apps GitHub eylemine bir 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 edemeyecekecekseniz, Azure statik Web uygulaması kaynağını aşağıdaki adımlarla silebilirsiniz:

1. Azure portalı açın
2. En üstteki arama çubuğunda, daha önce verdiğiniz adı izleyerek uygulamanızı 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