Aracılığıyla paylaş

Hugo sitesini Azure Static Web Apps'e dağıtma

Bu makalede , Hugo web uygulamasının nasıl oluşturulacağı ve Azure Static Web Apps'e nasıl dağıtılacağı gösterilmektedir. Nihai sonuç, uygulamanın nasıl derlendiğini ve yayımlandığını denetlemenizi sağlayan ilişkili GitHub Actions'a sahip yeni bir Azure Statik Web Uygulamasıdır.

Bu eğitimde şunları öğreniyorsunuz:

  • Hugo uygulaması oluşturma
  • Azure Static Web Apps kurulumu
  • Hugo uygulamasını Azure'a dağıtma

Azure hesabınız yoksa, başlamadan önce ücretsiz hesap oluşturun.

Önkoşullar

Hugo Uygulaması Oluşturma

Hugo Komut Satırı Arabirimi'ni (CLI) kullanarak bir Hugo uygulaması oluşturun:

  1. İşletim sisteminizde Hugo'yu yükleme kılavuzunu izleyin.

  2. Terminal açma

  3. Yeni bir uygulama oluşturmak için Hugo CLI'yi çalıştırın.

    hugo new site static-app

  4. Yeni oluşturulan uygulamaya gidin.

    cd static-app

  5. Git deposunu başlatın.

    git init

  6. Dalınızın main olarak adlandırıldığından emin olun.

    git branch -M main

  7. Ardından, git alt modülü olarak bir tema yükleyip Hugo yapılandırma dosyasında belirterek siteye bir tema ekleyin.

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

  8. Değişiklikleri gönderin.

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

Uygulamanızı GitHub'a gönderme

Azure Static Web Apps'e bağlanmak için GitHub'da bir depoya ihtiyacınız vardır. Aşağıdaki adımlarda, siteniz için bir deponun nasıl oluşturulacağı gösterilmektedir.

  1. https://github.com/new adlı, içerisinde hugo-static-app ismi olan boş bir GitHub deposu oluşturun (README oluşturmayın).

  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>/hugo-static-app

  3. Yerel deponuzu GitHub'a gönderin.

    git push --set-upstream origin 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.

    Mülkiyet Değer
    Abonelik Azure aboneliğinizin adı.
    Kaynak Grubu my-hugo-group
    İsim hugo-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 (İngilizce)

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

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

    Mülkiyet Değer
    Organizasyon İstediğiniz GitHub kuruluşunu seçin.
    Depo hugo-static-app öğesini seçin.
    Şube Ana öğeyi seçin.

    Uyarı

    Herhangi bir depo görmüyorsanız GitHub'da Azure Static Web Apps'i yetkilendirmeniz gerekebilir. GitHub deponuza göz atın ve Ayarlar Uygulamaları Yetkili OAuth Uygulamaları'na >gidin, Azure Statik Web Uygulamaları'nı>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 Hugo'yu seçin ve varsayılan değerleri koruyun.

Gözden geçirme ve oluşturma

  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 seçeneğini 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.

    Dağıtılan uygulama

Özel Hugo sürümü

Statik Web Uygulaması oluşturduğunuzda, uygulamanın yayımlama yapılandırma ayarlarını içeren bir iş akışı dosyası oluşturulur. İş akışı dosyasında belirli bir Hugo sürümünü HUGO_VERSION bölümünde env için bir değer sağlayarak belirleyebilirsiniz. Aşağıdaki örnek yapılandırma, Hugo'yu belirli bir sürüme ayarlamayı göstermektedir.

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

Hugo uygulamanızda Git Bilgileri özelliğini kullanma

Hugo uygulamanız Git Bilgileri özelliğini kullanıyorsa, Statik Web Uygulaması için oluşturulan varsayılan iş akışı dosyası Git deponuzun basit bir sürümünü getirmek için github eylemini kullanıma alma işlemini kullanır ve varsayılan derinliği 1 olur. Bu senaryoda Hugo, tüm içerik dosyalarınızın tek bir işlemeden geldiğini görür, böylece aynı yazara, son değişiklik zaman damgasına ve diğer .GitInfo değişkenlere sahip olur.

İş akışı dosyanızı tam Git geçmişinizi getirecek şekilde güncellemek için adımının altına yeni bir parametre ekleyerek actions/checkout değerini fetch-depth (sınırsız) olarak ayarlayın.

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

Tüm geçmişi getirmek, GitHub Actions iş akışınızın yapı süresini artırır, ancak .Lastmod ve .GitInfo değişkenleriniz doğru ve her bir içerik dosyanız için kullanılabilir durumdadır.

Kaynakları temizle

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 alan adı ekle