# Статические HTML Spaces

Spaces также поддерживают пользовательский HTML для вашего приложения вместо использования Streamlit или Gradio. Укажите `sdk: static` внутри блока `YAML` в начале файла **README.md** вашего Spaces. Затем вы можете разместить ваш HTML-код в файле **index.html**.

Статические Spaces бесплатны для всех: они обслуживаются напрямую без запуска на вычислительных ресурсах, поэтому, в отличие от Spaces на базе [Gradio](./spaces-sdks-gradio) и [Docker](./spaces-sdks-docker), для их создания никогда не требуется платный тариф.

Вот несколько примеров Spaces с использованием пользовательского HTML:

* [Smarter NPC](https://huggingface.co/spaces/mishig/smarter_npc): отображение проекта PlayCanvas с использованием iframe в Spaces.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): отображение модели Sketchfab в Spaces.
* [Диффузия остального](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): Нарисуйте и диффузируйте остальное

## Добавление шага сборки перед обслуживанием

Статические Spaces поддерживают добавление пользовательского шага сборки перед раздачей статических ресурсов. Это полезно для фронтенд-фреймворков, таких как React, Svelte и Vue, которые требуют процесса сборки перед запуском приложения. Команда сборки выполняется автоматически при обновлении вашего Space.

Добавьте `app_build_command` внутри блока `YAML` в начале файла **README.md** вашего Spaces, а также `app_file`.

Например:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Примеры пространств:

- [Приложение Svelte](https://huggingface.co/spaces/julien-c/vite-svelte)
- [React App](https://huggingface.co/spaces/coyotte508/static-vite)

Под капотом он [запускает сборку](https://huggingface.co/spaces/huggingface/space-build), сохраняя сгенерированные файлы в специальной ссылке `refs/convert/build`.

## Переменные пространства

Пользовательские [переменные окружения](./spaces-overview#managing-secrets) можно передать вашему Space. Если для вашего Space [включён OAuth](./spaces-oauth), информация OAuth, такая как client ID и scope, также доступна в виде переменных окружения.

Чтобы использовать эти переменные в JavaScript, можно воспользоваться объектом `window.huggingface.variables`. Например, чтобы получить доступ к переменной `OAUTH_CLIENT_ID`, можно использовать `window.huggingface.variables.OAUTH_CLIENT_ID`.

Вот пример Space, использующего пользовательские переменные окружения и oauth, с выводом переменных в HTML:

* [Статические переменные](https://huggingface.co/spaces/huggingfacejs/static-variables)