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 öğ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
- 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.
Hugo Uygulaması Oluşturma
Hugo Komut Satırı Arabirimi'ni (CLI) kullanarak bir Hugo uygulaması oluşturun:
İşletim sisteminizde Hugo'yu yükleme kılavuzunu izleyin.
Terminal açma
Yeni bir uygulama oluşturmak için Hugo CLI'yi çalıştırın.
hugo new site static-app
Yeni oluşturulan uygulamaya gidin.
cd static-app
Git deposunu başlatın.
git init
Dalınızın adlı
main
olduğundan emin olun.git branch -M main
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
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.
hugo-static-app adlı uygulamadan boş bir GitHub deposu oluşturun (BENIOKU'yu oluşturmayınhttps://github.com/new).
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
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
Azure portal'a gidin
Kaynak Oluştur'u seçin
Statik Web Uygulamaları için arama yapın
Statik Web Uygulamaları'nı seçin
Oluştur'u seçin
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 GitHub ile oturum açın'ı seçin ve GitHub ile kimlik doğrulaması yapın.
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.
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
Ayrıntıların doğru olduğunu doğrulamak için Gözden Geçir + Oluştur'u seçin.
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.
Dağıtım tamamlandıktan sonra Kaynağa git'i seçin.
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 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:
- Azure portalı açın
- Üstteki arama çubuğunda, uygulamanızı daha önce sağladığınız ada göre arayın
- Uygulamaya tıklayın
- Sil düğmesine tıklayın
- Silme eylemini onaylamak için Evet'e tıklayın