# Statik HTML Uzayları

Spaces, Streamlit veya Gradio kullanmak yerine uygulamanız için özel HTML barındırmanıza da olanak tanır. `YAML` bloğunun içine, Spaces **README.md** dosyanızın başına `sdk: static` değerini ekleyin. Ardından HTML kodunuzu bir **index.html** dosyasının içine yerleştirebilirsiniz.

Statik Spaces herkes için ücretsizdir: doğrudan sunulurlar ve hesaplama üzerinde çalışmazlar, bu nedenle [Gradio](./spaces-sdks-gradio) ve [Docker](./spaces-sdks-docker) Spaces'lerin aksine, bunları oluşturmak asla ücretli bir plan gerektirmez.

Özel HTML kullanan Spaces örnekleri:

* [Smarter NPC](https://huggingface.co/spaces/mishig/smarter_npc): Spaces'te bir PlayCanvas projesini iframe ile görüntüleyin.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Spaces'te bir Sketchfab modelini görüntüleyin.
* [Kalanı yay](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): Kalanını çiz ve yay

## Sunumdan önce bir derleme adımı ekleme

Static Spaces, statik varlıklarınızı sunmadan önce özel bir derleme adımı eklemenizi destekler. Bu, uygulamayı sunmadan önce bir derleme süreci gerektiren React, Svelte ve Vue gibi ön yüz çerçeveleri için faydalıdır. Derleme komutu, Space'iniz güncellendiğinde otomatik olarak çalışır.

Spaces **README.md** dosyanızın başındaki `YAML` bloğunun içine `app_build_command` ve `app_file` ekleyin.

Örneğin:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Örnek uzaylar:

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

Arka planda, [bir derleme başlatır](https://huggingface.co/spaces/huggingface/space-build) ve oluşturulan dosyaları özel bir `refs/convert/build` ref'inde saklar.

## Değişkenler

Özel [ortam değişkenleri](./spaces-overview#managing-secrets) Space'inize iletilebilir. Space'iniz için [OAuth etkinleştirildiyse](./spaces-oauth), istemci kimliği ve kapsam gibi OAuth bilgileri de ortam değişkenleri olarak kullanılabilir.

Bu değişkenleri JavaScript'te kullanmak için `window.huggingface.variables` nesnesini kullanabilirsiniz. Örneğin, `OAUTH_CLIENT_ID` değişkenine erişmek için `window.huggingface.variables.OAUTH_CLIENT_ID` kullanabilirsiniz.

Özel ortam değişkenleri ve oauth etkinleştirilmiş bir Space'in, değişkenleri HTML'de görüntülediği bir örneği aşağıda verilmiştir:

* [Statik Değişkenler](https://huggingface.co/spaces/huggingfacejs/static-variables)