# Static HTML Spaces

Spaces juga mengakomodasi HTML kustom untuk aplikasi Anda alih-alih menggunakan Streamlit atau Gradio. Atur `sdk: static` di dalam blok `YAML` di bagian atas file **README.md** Spaces Anda. Kemudian, Anda dapat menempatkan kode HTML Anda di dalam file **index.html**.

Static Spaces gratis untuk semua orang: mereka disajikan secara langsung tanpa berjalan di compute, sehingga tidak seperti [Gradio](./spaces-sdks-gradio) dan [Docker](./spaces-sdks-docker) Spaces, membuat mereka tidak pernah memerlukan paket berbayar.

Berikut adalah beberapa contoh Spaces yang menggunakan HTML kustom:

* [NPC yang Lebih Cerdas](https://huggingface.co/spaces/mishig/smarter_npc): Tampilkan proyek PlayCanvas dengan iframe di Spaces.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Menampilkan model Sketchfab di Spaces.
* [Diffuse the rest](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): Gambar dan diffuse bagian sisanya

## Menambahkan langkah build sebelum menyajikan

Static Spaces mendukung penambahan langkah build kustom sebelum menyajikan aset statis Anda. Hal ini berguna untuk framework frontend seperti React, Svelte, dan Vue yang memerlukan proses build sebelum aplikasi disajikan. Perintah build dijalankan secara otomatis saat Space Anda diperbarui.

Tambahkan `app_build_command` di dalam blok `YAML` di bagian atas file **README.md** Spaces Anda, dan `app_file`.

Sebagai contoh:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Contoh ruang:

- [Aplikasi Svelte](https://huggingface.co/spaces/julien-c/vite-svelte)
- [Aplikasi React](https://huggingface.co/spaces/coyotte508/static-vite)

Di balik layar, proses ini akan [meluncurkan build](https://huggingface.co/spaces/huggingface/space-build), dengan menyimpan file yang dihasilkan di ref khusus `refs/convert/build`.

## Variabel Space

[variabel lingkungan](./spaces-overview#managing-secrets) kustom dapat diteruskan ke Space Anda. Informasi OAuth seperti client ID dan scope juga tersedia sebagai variabel lingkungan, jika Anda telah [mengaktifkan OAuth](./spaces-oauth) untuk Space Anda.

Untuk menggunakan variabel-variabel ini di JavaScript, Anda dapat menggunakan objek `window.huggingface.variables`. Sebagai contoh, untuk mengakses variabel `OAUTH_CLIENT_ID`, Anda dapat menggunakan `window.huggingface.variables.OAUTH_CLIENT_ID`.

Berikut adalah contoh Space yang menggunakan variabel lingkungan kustom dan oauth yang diaktifkan serta menampilkan variabel dalam HTML:

* [Variabel Statis](https://huggingface.co/spaces/huggingfacejs/static-variables)