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

  • Makale

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 öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

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

Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı 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 adlı mainolduğundan 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. hugo-static-app adlı uygulamadan boş bir GitHub deposu oluşturun (BENIOKU'yu 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>/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.

    Özellik Değer
    Abonelik Azure aboneliğinizin adı.
    Kaynak grubu my-hugo-group
    Ad 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

  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 hugo-static-app öğesini seçin.
    Dal Ana öğesini seçin.

    Not

    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 Hugo'yu seçin ve varsayılan değerleri koruyun.

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.

    Deployed application

Ö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. bölümünde için bir değer HUGO_VERSION env sağlayarak iş akışı dosyasında belirli bir Hugo sürümünü 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ı güncelleştirerek tam Git geçmişinizi getirmek için 0 fetch-depth adımın actions/checkout altına yeni bir parametre ekleyin (sınır yok):

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

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

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