Menyebarkan situs Hugo ke Azure Static Web Apps

Artikel
01/10/2024

Artikel ini menunjukkan cara membuat dan menyebarkan aplikasi web Hugo ke Azure Static Web Apps. Hasil akhirnya adalah aplikasi Azure Static Web App baru dengan Tindakan GitHub terkait yang memberikan Anda kontrol mengenai cara pembuatan dan penerbitan aplikasinya.

Dalam tutorial ini, Anda akan mempelajari cara:

Membuat aplikasi Hugo
Menyiapkan Azure Static Web Apps
Menyebarkan aplikasi Hugo ke Azure

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Prasyarat

Akun Azure dengan langganan aktif. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
Akun GitHub. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
Penyiapan Git terinstal. Jika Anda tidak memilikinya, Anda dapat menginstal Git.

Membuat aplikasi Hugo

Buat aplikasi Hugo menggunakan Antarmuka Tingkat Panggilan (CLI) Hugo:

Ikuti panduan pemasangan untuk Hugo di OS Anda.
Buka terminal
Jalankan CLI Hugo untuk membuat aplikasi baru.
```
hugo new site static-app
```
Buka aplikasi yang baru dibuat.
```
cd static-app
```
Inisialisasi repositori Git.
```
git init
```
Pastikan cabang Anda diberi nama main.
```
git branch -M main
```
Berikutnya, tambahkan tema ke situs dengan memasang tema sebagai submodul git, kemudian tentukan temanya di dalam file konfigurasi Hugo.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```

Lakukan perubahan.

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

Dorong aplikasi Anda ke GitHub

Anda memerlukan repositori di GitHub agar dapat tersambung ke Azure Static Web Apps. Langkah-langkah berikut ini memperlihatkan cara membuat repositori untuk situs Anda.

Buat repositori GitHub kosong (jangan buat README) dari https://github.com/new bernama hugo-static-app.
Tambahkan repositori GitHub sebagai repositori jarak jauh untuk repositori lokal Anda. Pastikan untuk menambahkan nama pengguna GitHub Anda sebagai pengganti <YOUR_USER_NAME> tempat penampung dalam perintah berikut.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
```
Dorong repositori lokal Anda ke GitHub.
```
git push --set-upstream origin main
```

Menyebarkan aplikasi web Anda

Langkah-langkah berikut menunjukkan cara membuat aplikasi situs statis baru dan menerapkannya ke lingkungan produksi.

Buat aplikasi

Masuk ke portal Azure
Pilih Buat Sumber Daya
Cari Static Web Apps
Pilih Aplikasi Web Statis
Pilih Buat

Pada tab Dasar, masukkan nilai berikut ini untuk setiap pengaturan.

Properti	Nilai
Langganan	Nama langganan Azure Anda.
Grup sumber daya	my-hugo-group
Nama	hugo-static-app
Jenis paket	Gratis
Region for Azure Functions API dan lingkungan pementasan	Pilih wilayah terdekat dengan Anda.
Sumber	GitHub

Pilih Masuk dengan GitHub dan autentikasi dengan GitHub.
Masukkan nilai GitHub berikut.

Properti Nilai

Organisasi Pilih organisasi GitHub yang Anda inginkan.

Repositori Pilih hugo-static-app.

Cabang Pilih utama.

Catatan

Jika Anda tidak melihat repositori apa pun, Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Telusuri ke repositori GitHub Anda dan buka aplikasi Pengaturan > > Aplikasi OAuth Resmi, pilih Azure Static Web Apps, lalu pilih Berikan. Untuk repositori organisasi, Anda harus menjadi pemilik organisasi untuk memberikan izin.
Di bagian Detail Build, pilih Hugo dari menu drop-down Prasetel Build dan tetap gunakan nilai default.

Properti	Nilai
Organisasi	Pilih organisasi GitHub yang Anda inginkan.
Repositori	Pilih hugo-static-app.
Cabang	Pilih utama.

Tinjau dan buat

Pilih Tinjau + Buat untuk memverifikasi bahwa semua detail sudah benar.
Pilih Buat untuk memulai pembuatan App Service Static Web App dan provisikan GitHub Actions untuk penyebaran.
Setelah penyebaran selesai, pilih Buka sumber daya.
Pada layar sumber daya, pilih tautan URL untuk membuka aplikasi yang Anda sebarkan. Anda mungkin perlu menunggu satu atau dua menit agar GitHub Actions selesai.

Versi Kustom Hugo

Saat Anda membuat Static Web App, file alur kerja yang dibuat mencakup pengaturan konfigurasi penerbitan untuk aplikasi. Anda dapat memilih versi Hugo tertentu di dalam file alur kerja dengan menyediakan nilai untuk HUGO_VERSION di bagian env. Contoh konfigurasi berikut menunjukkan cara mengatur Hugo ke versi tertentu.

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

Menggunakan fitur Info Git di aplikasi Hugo Anda

Jika aplikasi Hugo Anda menggunakan fitur Info Git, file alur kerja default yang dibuat untuk Static Web App menggunakan GitHub Action checkout untuk mengambil versi repositori Git Anda yang dangkal, dengan kedalaman default 1. Dalam skenario ini, Hugo melihat semua file konten Anda berasal dari satu penerapan, sehingga mereka memiliki penulis yang sama, tanda waktu modifikasi terakhir, dan variabel lainnya .GitInfo .

Perbarui file alur kerja Anda untuk mengambil riwayat Git lengkap Anda dengan menambahkan parameter baru di bawah actions/checkout langkah untuk mengatur fetch-depth ke 0 (tanpa batas):

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

Mengambil riwayat lengkap meningkatkan waktu build alur kerja GitHub Actions Anda, tetapi variabel dan .GitInfo Anda .Lastmod akurat dan tersedia untuk setiap file konten Anda.

Membersihkan sumber daya

Jika ingin berhenti menggunakan aplikasi ini, Anda dapat menghapus sumber daya Azure Static Web Apps melalui langkah-langkah berikut:

Membuka portal Azure
Di bilah pencarian atas, cari aplikasi Anda menggunakan nama yang Anda berikan sebelumnya
Klik aplikasi
Klik tombol Hapus
Klik Ya untuk mengonfirmasi tindakan penghapusan

Langkah berikutnya

Tambahkan domain kustom

Bagikan melalui