Menyebarkan situs Jekyll ke Azure Static Web Apps

Artikel
10/22/2023

Artikel ini menunjukkan cara membuat dan menerapkan aplikasi web Jekyll ke Azure Static Web Apps.

Dalam tutorial ini, Anda akan mempelajari cara:

Buat situs web Jekyll
Siapkan sumber daya Azure Static Web Apps
Terapkan aplikasi Jekyll ke Azure

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

Prasyarat

Pasang Jekyll
- Anda dapat menggunakan Subsistem Windows untuk Linux dan mengikuti instruksi Ubuntu, jika perlu.
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.

Buat Aplikasi Jekyll

Buat aplikasi Jekyll menggunakan Jekyll Command Line Interface (CLI):

Dari terminal, jalankan Jekyll CLI untuk membuat aplikasi baru.
```
jekyll new static-app
```
Buka aplikasi yang baru dibuat.
```
cd static-app
```
Inisialisasi repositori Git baru.
```
 git init
```

Lakukan perubahan.

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

Dorong aplikasi Anda ke GitHub

Azure Static Web Apps menggunakan GitHub untuk mempublikasikan situs web Anda. Langkah-langkah berikut menunjukkan cara membuat repositori GitHub.

Buat repo GitHub kosong (jangan buat README) dari https://github.com/new bernama jekyll-azure-static.
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>/jekyll-azure-static
```
Dorong repositori lokal Anda ke GitHub.
```
git push --set-upstream origin main
```
Catatan

Cabang git Anda mungkin diberi nama berbeda dari main. Ganti main dalam perintah ini dengan nilai yang benar.

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	jekyll-static-app
Nama	jekyll-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 jekyll-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 Kustom dari tarik turun Prasetel Build dan pertahankan nilai default.
Di kotak Lokasi aplikasi, masukkan ./.
Biarkan kotak Lokasi Api kosong.
Di kotak Lokasi keluaran, masukkan _site.

Properti	Nilai
Organisasi	Pilih organisasi GitHub yang Anda inginkan.
Repositori	Pilih jekyll-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.

Pengaturan Jekyll khusus

Saat Anda membuat aplikasi web statis, file alur kerja dibuat yang berisi setelan konfigurasi penerbitan untuk aplikasi tersebut.

Untuk mengonfigurasi variabel lingkungan, seperti JEKYLL_ENV, tambahkan env bagian ke Tindakan GitHub Azure Static Web Apps dalam alur kerja.

- 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

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